En este tema, aprenderás sobre los atributos de los formularios en HTML y cómo implementar la validación para asegurar que los datos ingresados por los usuarios sean correctos y completos antes de ser enviados.
Atributos Comunes de los Formularios
Atributos del Elemento <form>
- action: Define la URL a la que se enviarán los datos del formulario.
- method: Especifica el método HTTP que se usará para enviar los datos (
GEToPOST). - enctype: Define el tipo de codificación de los datos cuando se envían al servidor. Comúnmente usado con
multipart/form-datapara subir archivos. - target: Especifica dónde se abrirá la respuesta recibida después de enviar el formulario (
_self,_blank,_parent,_top).
<form action="/submit" method="post" enctype="multipart/form-data" target="_blank"> <!-- Elementos del formulario --> </form>
Atributos del Elemento <input>
- type: Define el tipo de control de entrada (
text,password,email,number, etc.). - name: Especifica el nombre del control de entrada, usado para identificar los datos en el servidor.
- value: Establece el valor inicial del control de entrada.
- placeholder: Proporciona un texto de sugerencia que aparece dentro del control de entrada.
- required: Indica que el campo debe ser completado antes de enviar el formulario.
- min y max: Establecen los valores mínimo y máximo para los tipos
number,range,date,datetime-local,month,time, yweek. - pattern: Define una expresión regular que el valor del campo debe coincidir.
<input type="text" name="username" placeholder="Enter your username" required>
<input type="email" name="email" placeholder="Enter your email" required>
<input type="number" name="age" min="18" max="99" required>
<input type="password" name="password" pattern=".{8,}" title="Eight or more characters" required>Validación del Formulario
La validación del formulario asegura que los datos ingresados por los usuarios cumplan con ciertos criterios antes de ser enviados al servidor. HTML5 proporciona varios atributos para facilitar la validación del formulario.
Validación de Atributos
- required: Asegura que el campo no esté vacío.
- minlength y maxlength: Establecen la longitud mínima y máxima del valor del campo.
- pattern: Usa una expresión regular para validar el formato del valor del campo.
- type: Algunos tipos de entrada (
email,url,number, etc.) tienen validación incorporada.
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required minlength="5" maxlength="15">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="99" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" pattern=".{8,}" title="Eight or more characters" required>
<input type="submit" value="Submit">
</form>Validación Personalizada con JavaScript
Para validaciones más complejas, puedes usar JavaScript para validar los datos del formulario antes de enviarlos.
<form id="myForm" action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required minlength="5" maxlength="15">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="99" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" pattern=".{8,}" title="Eight or more characters" required>
<input type="submit" value="Submit">
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
var username = document.getElementById('username').value;
var email = document.getElementById('email').value;
var age = document.getElementById('age').value;
var password = document.getElementById('password').value;
if (username.length < 5 || username.length > 15) {
alert('Username must be between 5 and 15 characters.');
event.preventDefault();
}
if (!email.includes('@')) {
alert('Please enter a valid email address.');
event.preventDefault();
}
if (age < 18 || age > 99) {
alert('Age must be between 18 and 99.');
event.preventDefault();
}
if (password.length < 8) {
alert('Password must be at least 8 characters long.');
event.preventDefault();
}
});
</script>Ejercicio Práctico
Ejercicio
Crea un formulario HTML que incluya los siguientes campos:
- Nombre de usuario (mínimo 5 caracteres, máximo 15 caracteres, requerido)
- Correo electrónico (requerido)
- Edad (mínimo 18, máximo 99, requerido)
- Contraseña (mínimo 8 caracteres, requerido)
- Confirmación de contraseña (debe coincidir con la contraseña, requerido)
Implementa validación tanto con atributos HTML como con JavaScript para asegurar que:
- Todos los campos requeridos estén completos.
- La contraseña y la confirmación de contraseña coincidan.
Solución
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario con Validación</title>
</head>
<body>
<form id="registrationForm" action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required minlength="5" maxlength="15">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="99" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" pattern=".{8,}" title="Eight or more characters" required>
<label for="confirmPassword">Confirm Password:</label>
<input type="password" id="confirmPassword" name="confirmPassword" required>
<input type="submit" value="Register">
</form>
<script>
document.getElementById('registrationForm').addEventListener('submit', function(event) {
var password = document.getElementById('password').value;
var confirmPassword = document.getElementById('confirmPassword').value;
if (password !== confirmPassword) {
alert('Passwords do not match.');
event.preventDefault();
}
});
</script>
</body>
</html>Conclusión
En esta lección, has aprendido sobre los atributos comunes de los formularios y cómo implementar la validación de formularios usando tanto atributos HTML como JavaScript. La validación de formularios es crucial para asegurar que los datos ingresados por los usuarios sean correctos y completos antes de ser enviados al servidor. En el siguiente tema, aprenderás cómo enviar formularios y manejar las respuestas del servidor.
Curso de HTML
Módulo 1: Introducción a HTML
- ¿Qué es HTML?
- Configurando tu Entorno
- Estructura Básica de HTML
- Etiquetas y Elementos HTML
- Creando tu Primera Página HTML
Módulo 2: Formateo de Texto en HTML
- Encabezados y Párrafos
- Etiquetas de Formateo de Texto
- Listas: Ordenadas y Desordenadas
- Citas en Bloque y Texto Preformateado
Módulo 3: Enlaces y Medios en HTML
Módulo 4: Tablas en HTML
- Estructura Básica de una Tabla
- Encabezados y Pies de Tabla
- Unión de Celdas: Colspan y Rowspan
- Estilizando Tablas
Módulo 5: Formularios en HTML
- Creando un Formulario Básico
- Elementos del Formulario: Input, Textarea y Select
- Atributos y Validación del Formulario
- Enviando Formularios
Módulo 6: Elementos Semánticos de HTML5
Módulo 7: Técnicas Avanzadas de HTML
Módulo 8: Integración de HTML y CSS
- Vinculando CSS a HTML
- CSS en Línea, Interno y Externo
- Selectores Básicos de CSS
- Estilizando Elementos HTML
Módulo 9: Diseño Web Responsivo
- Introducción al Diseño Responsivo
- Etiqueta Meta del Viewport
- Consultas de Medios
- Imágenes y Videos Responsivos
Módulo 10: Mejores Prácticas y Accesibilidad
- Mejores Prácticas de HTML
- Conceptos Básicos de Accesibilidad Web
- Usando Roles ARIA
- Pruebas de Accesibilidad