Crear un formulario en HTML, CSS y JavaScript es fundamental para la interacción con los usuarios en una página web.
En este tutorial, aprenderás a diseñar un formulario atractivo, aplicar validaciones con JavaScript y mejorar la experiencia del usuario.
Paso 1: Creación del formulario en HTML
Comenzaremos estructurando el formulario en HTML con campos para usuario y correo electrónico.
Código HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario en HTML, CSS y JavaScript</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form id="myForm">
<label for="username">Usuario:</label>
<input type="text" id="username" name="username" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Enviar</button>
</form>
<script src="script.js"></script>
</body>
</html>
Paso 2: Aplicar estilos con CSS
Ahora diseñaremos el formulario para que tenga una apariencia moderna y centrada.
Código CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
form {
background: #333;
padding: 20px;
border-radius: 5px;
color: white;
display: flex;
flex-direction: column;
gap: 10px;
}
input, button {
padding: 10px;
border: none;
border-radius: 5px;
}
button {
background: #6200ea;
color: white;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: #3700b3;
}
Paso 3: Validaciones con JavaScript
Utilizaremos JavaScript para validar que el usuario tenga al menos 8 caracteres y que el email tenga el formato correcto.
Código JavaScript
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault(); // Evita la recarga de la página
const username = document.getElementById("username").value;
const email = document.getElementById("email").value;
if (username.length < 8) {
console.log("El usuario debe tener al menos 8 caracteres.");
return;
}
if (!email.includes("@")) {
console.log("El email no es válido.");
return;
}
console.log(`Usuario: ${username}, Email: ${email}`);
console.log("Formulario enviado correctamente.");
});
Formulario en HTML listo
Hemos creado un formulario funcional con validaciones básicas en JavaScript. Puedes mejorar este proyecto agregando estilos avanzados o integrando mensajes de error visibles en la interfaz. ¡Sigue explorando HTML, CSS y JavaScript para llevar tus proyectos al siguiente nivel!
Mira el tutorial completo
El codigo que hemos creado ha sido propio, pero si quieres ver este tutorial en acción y con más detalles, no te pierdas el video completo donde explicamos cada paso visualmente. ¡Haz clic aquí para verlo! 🎥
