Validaciones de formularios HTML con atributos nativos
Clase 11 de 17 • Curso de HTML
Resumen
Crear formularios confiables empieza por dominar las validaciones nativas de HTML. Con atributos como require, placeholder, pattern, min, max, step y min length, el navegador hace gran parte del trabajo por ti, asegurando datos completos y con el formato correcto.
¿Cómo validar formularios HTML con atributos nativos?
Usar la etiqueta form y los tipos de input adecuados activa validaciones del navegador que evitan envíos incompletos o con formatos inválidos. Así reduces errores y mejoras la experiencia desde el primer intento.
¿Qué hace el navegador al usar form y tipos de input?
- Comprueba formato de email al enviar: falta de arroba dispara un aviso.
- Muestra mensajes contextuales cuando algo no coincide con lo esperado.
- Impide el envío si un campo require está vacío.
Ejemplo de correo con guía visual usando placeholder y obligatoriedad con require:
<input
type="email"
id="correo"
name="correo"
required
placeholder="usuario@ejemplos.com"
/>
Puntos clave: - require obliga a completar el campo antes de enviar. - placeholder muestra el formato esperado (por ejemplo, usuario@ejemplos.com). - El navegador valida el patrón básico del correo al momento de enviar.
¿Cómo restringir un teléfono con pattern y expresión regular?
Para evitar texto en un teléfono, usa pattern con una expresión regular que permita solo dígitos y una longitud exacta.
<input
type="text"
id="telefono"
name="telefono"
title="Ingresa nueve dígitos"
placeholder="000000000"
pattern="[0-9]{9}"
required
/>
Claves prácticas:
- [0-9]{9}
indica: solo números del 0 al 9 y exactamente 9 caracteres.
- title muestra una pista al pasar el cursor: “Ingresa nueve dígitos”.
- Si el valor no hace “match” con el pattern, el navegador bloquea el envío.
¿Cómo limitar números, fechas y contraseñas con min, max, step y min length?
Controlar rangos y longitudes evita valores fuera de regla. Con min, max, step y min length puedes definir límites claros sin JavaScript adicional.
¿Cómo controlar cantidad con number, min, max y step?
Para cantidades numéricas, el input de número ya valida que no haya letras. Además, puedes acotar rango y saltos:
<input
type="number"
id="cantidad"
name="cantidad"
min="1"
max="100"
step="5"
value="10"
/>
Buenas prácticas: - min y max fijan el rango permitido (ejemplo: del 1 al 100). - step define saltos (ejemplo: 1, 6, 11, 16...). - El value enviado corresponde al número seleccionado; puede sincronizarse con JavaScript si es necesario.
¿Cómo acotar fechas con date, min y max?
Limita el calendario a un período válido usando min y max. Útil para rangos de edad o periodos de registro.
<input
type="date"
id="fecha"
name="fecha"
min="2024-01-01"
max="2024-12-31"
/>
Ventajas: - Solo se puede seleccionar dentro del rango definido. - El calendario inicia en el mínimo y bloquea años fuera del intervalo.
¿Cómo fortalecer contraseñas con require y min length?
Para forzar contraseñas más robustas, combina obligatoriedad y longitud mínima.
<input
type="password"
id="contrasena"
name="contrasena"
required
minlength="8"
/>
Aspectos clave: - require evita que quede vacío. - min length de 8 caracteres impide claves demasiado cortas. - Al intentar enviar con menos de 8, el navegador muestra el error correspondiente.
¿Tienes otros patrones útiles o rangos que te funcionen mejor en tus formularios? Comparte ejemplos y dudas en los comentarios.