Crear un formulario de registro en HTML es una tarea fundamental para cualquier desarrollador web. Un formulario de registro permite a los usuarios ingresar información personal que luego puede ser almacenada en una base de datos.
A continuación, te mostraré cómo crear un formulario de registro básico en HTML con etiquetas de formulario, validaciones y estilos básicos utilizando CSS.
Paso 1: Estructura HTML del Formulario
Primero, crearemos la estructura básica del formulario utilizando HTML. Incluiremos campos comunes como nombre, correo electrónico, contraseña y confirmación de contraseña.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario de Registro</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2>Formulario de Registro</h2>
<form id="registrationForm" action="/submit" method="post">
<div class="form-group">
<label for="name">Nombre:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Correo Electrónico:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="password">Contraseña:</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<label for="confirm_password">Confirmar Contraseña:</label>
<input type="password" id="confirm_password" name="confirm_password" required>
</div>
<button type="submit">Registrar</button>
</form>
</div>
</body>
</html>
Paso 2: Estilos CSS para el Formulario
A continuación, agregaremos algunos estilos básicos en CSS para mejorar la apariencia del formulario.
También te puede interesar
Explorando Swagger-JSDoc: Documentación API Eficiente para Proyectos Node.js/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
h2 {
text-align: center;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
Paso 3: Validación de Contraseña con JavaScript
Finalmente, añadiremos una validación en JavaScript para asegurarnos de que las contraseñas coincidan antes de enviar el formulario.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario de Registro</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2>Formulario de Registro</h2>
<form id="registrationForm" action="/submit" method="post" onsubmit="return validateForm()">
<div class="form-group">
<label for="name">Nombre:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Correo Electrónico:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="password">Contraseña:</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<label for="confirm_password">Confirmar Contraseña:</label>
<input type="password" id="confirm_password" name="confirm_password" required>
</div>
<button type="submit">Registrar</button>
</form>
</div>
<script>
function validateForm() {
var password = document.getElementById("password").value;
var confirmPassword = document.getElementById("confirm_password").value;
if (password !== confirmPassword) {
alert("Las contraseñas no coinciden.");
return false;
}
return true;
}
</script>
</body>
</html>
Formulario de registro en HTML: Explicación del Código
- HTML: Creó la estructura del formulario con etiquetas
<form>,<input>, y<label>. Se incluyen campos para el nombre, correo electrónico, contraseña y confirmación de contraseña. - CSS: Aplicamos estilos básicos para mejorar la presentación del formulario, incluyendo estilos para el contenedor, etiquetas, campos de entrada y el botón de envío.
- JavaScript: Añadimos una función
validateFormque se ejecuta al enviar el formulario para asegurarse de que las contraseñas coincidan. Si las contraseñas no coinciden, se muestra una alerta y se previene el envío del formulario.
Este ejemplo proporciona una base sólida para un formulario de registro funcional y estéticamente agradable. Puedes expandirlo y personalizarlo según las necesidades específicas de tu aplicación.
