Los formularios modernos van más allá de inputs básicos. Este artículo explora las capacidades avanzadas de HTML5: nuevos tipos de input, validación nativa, API de validación de restricciones y técnicas para crear experiencias de usuario profesionales sin JavaScript innecesario.
Ejemplo de formulario avanzado con validación nativa HTML5
Contenido del Artículo
Tipos de Input en HTML5
HTML5 introdujo 13 nuevos tipos de input que mejoran UX y validación:
date/time
Selectores de fecha y hora nativos
range
Deslizadores para valores numéricos
search
Inputs optimizados para búsqueda
<label for="email">Correo:</label>
<input type="email" id="email" required>
<label for="fecha">Fecha:</label>
<input type="date" id="fecha" min="2023-01-01">| Tipo | Uso | Ejemplo |
|---|---|---|
| Validación automática de emails | <input type="email"> | |
| tel | Entrada de números telefónicos | <input type="tel"> |
| url | Validación de URLs | <input type="url"> |
| color | Selector de color | <input type="color"> |
| number | Solo números con controles +/- | <input type="number"> |
Atributos de Validación Nativa
HTML5 provee atributos para validación sin JavaScript:
required
Campo obligatorio
minlength/maxlength
Longitud mínima/máxima
min/max
Valores numéricos mínimos/máximos
<input
type="password"
minlength="8"
required
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="8+ caracteres, mayúscula, minúscula y número">Usa el atributo title para personalizar mensajes de error cuando falla pattern
API de Validación de Restricciones
JavaScript avanzado para control total de validación:
// Validación personalizada
const emailInput = document.getElementById('email');
emailInput.addEventListener('input', () => {
if (emailInput.validity.typeMismatch) {
emailInput.setCustomValidity('Por favor ingresa un email válido');
} else {
emailInput.setCustomValidity('');
}
});| Propiedad | Descripción | Uso |
|---|---|---|
| validity | Estado de validación | input.validity.valid |
| validationMessage | Mensaje de error | input.validationMessage |
| willValidate | Si será validado | input.willValidate |
| checkValidity() | Verifica validez | form.checkValidity() |
Estilización con Pseudoclases CSS
CSS provee pseudoclases para feedback visual:
:valid/:invalid
Estados de validación
:required/:optional
Campos obligatorios/opcionales
:in-range/:out-of-range
Valores dentro/fuera de rango
input:valid {
border-color: green;
}
input:invalid {
border-color: red;
}
input:focus:invalid {
box-shadow: 0 0 5px red;
}
Elementos Avanzados de Formulario
Componentes para experiencias complejas:
<label for="browser">Navegador:</label>
<input list="browsers" id="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
</datalist>| Elemento | Función | Atributos Clave |
|---|---|---|
| <datalist> | Sugerencias de autocompletado | list, id |
| <progress> | Barra de progreso | value, max |
| <meter> | Medidor de valores | min, max, low, high |
| <output> | Resultado de cálculos | for, name |
Validación Personalizada Avanzada
Técnicas para escenarios complejos:
Validación Cruzada
Comparar dos campos (ej. contraseñas)
Validación Asíncrona
Comprobar disponibilidad en servidor
CAPTCHAs Modernos
reCAPTCHA v3 sin interacción
// Validación cruzada de contraseñas
const password = document.getElementById('password');
const confirmPassword = document.getElementById('confirm-password');
function validatePassword() {
if (password.value !== confirmPassword.value) {
confirmPassword.setCustomValidity('Las contraseñas no coinciden');
} else {
confirmPassword.setCustomValidity('');
}
}
password.addEventListener('change', validatePassword);
confirmPassword.addEventListener('keyup', validatePassword);
Ejemplo: Formulario de Registro Completo
Implementación profesional con todas las técnicas:
<form id="registro">
<label for="email">Email:</label>
<input type="email" id="email" required>
<label for="pass">Contraseña:</label>
<input type="password" id="pass" minlength="8" required
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}">
<label for="confirm-pass">Confirmar Contraseña:</label>
<input type="password" id="confirm-pass" required>
<label for="birthdate">Fecha Nacimiento:</label>
<input type="date" id="birthdate" min="1900-01-01" max="2010-12-31">
<label for="avatar">Avatar:</label>
<input type="file" id="avatar" accept="image/png, image/jpeg">
<button type="submit">Registrarse</button>
</form>
<script>
const form = document.getElementById('registro');
const password = document.getElementById('pass');
const confirmPassword = document.getElementById('confirm-pass');
form.addEventListener('submit', (e) => {
if (!form.checkValidity()) {
e.preventDefault();
// Mostrar errores personalizados
}
});
// Validación cruzada
function validatePasswords() {
if (password.value !== confirmPassword.value) {
confirmPassword.setCustomValidity('Las contraseñas deben coincidir');
} else {
confirmPassword.setCustomValidity('');
}
}
password.addEventListener('change', validatePasswords);
confirmPassword.addEventListener('keyup', validatePasswords);
</script>Accesibilidad en Formularios
Mejores prácticas para usuarios con discapacidades:
<label for="nombre">Nombre completo:</label>
<input type="text" id="nombre" aria-describedby="nombre-error">
<span id="nombre-error" role="alert" aria-live="assertive"></span>Usa role="alert" para mensajes de error dinámicos que deben anunciarse inmediatamente
| Elemento | Recomendación | Beneficio |
|---|---|---|
| Todos | Etiquetas asociadas con <label> | Screen readers |
| Grupos | <fieldset> y <legend> | Agrupación semántica |
| Errores | aria-invalid y aria-describedby | Feedback accesible |
| Focus | Contraste adecuado en :focus | Usuarios con baja visión |
Herramientas y Recursos
Recursos para crear formularios profesionales:
BrowserStack
Prueba en múltiples navegadores
axe DevTools
Auditoría de accesibilidad
FormValidation
Librería de validación avanzada
Artículos Relacionados
DESARROLLO WEB