Curso HTML 9.6 Placeholder, required, pattern y otras ayudas de validación

Curso HTML 9.6: Placeholder, required, pattern y otras ayudas de validación

En este apartado profundizaremos en las principales herramientas nativas de HTML5 para ayudar a validar formularios y mejorar la experiencia del usuario. Veremos atributos como placeholder, required, pattern y otras ayudas de validación.

1. El atributo placeholder

El placeholder sirve para mostrar un texto guía dentro del campo cuando está vacío. No sustituye al label, pero aporta pistas adicionales.

Debe ser breve y descriptivo (no más de 30–40 caracteres).
Desaparece al enfocarlo o al introducir contenido.
No sustituye la accesibilidad: mantén siempre un <label> asociado.



  Nombre completo:

2. El atributo required

Con required informamos al navegador de que el campo no puede quedar vacío. Si el usuario intenta enviar el formulario sin rellenarlo, el navegador mostrará un mensaje de error.

Funciona en la mayoría de los navegadores modernos.
Puede combinarse con novalidate en la etiqueta <form> para desactivarla.
Se aplica a input, select y textarea.



  
    Registro de usuario

    Correo electrónico:
    

    Contraseña:

3. El atributo pattern

Con pattern se define una expresión regular que debe cumplirse. El valor completo del campo ha de coincidir con la regex (no hace falta incluir ^ ni $).

Regex	Descripción	Ejemplo
[0-9]{5}	Código postal de 5 dígitos	28013
[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}	Correo electrónico	ejemplo@dominio.com
\d{4}-\d{2}-\d{2}	Fecha en formato YYYY-MM-DD	2024-06-15


Código postal:

Consejos sobre pattern

Incluye siempre el atributo title para mostrar la explicación de la validación.
Comprueba la compatibilidad de tu regex en todos los navegadores objetivo.
Evita validar contraseñas complejas sólo con pattern; usa validación del lado servidor y APIs de contraseñas.

4. Otros atributos de validación nativa

HTML5 incorpora varios atributos adicionales que facilitan la validación sin JavaScript:

Atributo	Descripción	Ejemplo
min / max	Valor mínimo y máximo para campos numéricos, fecha o rango	`min='1' max='10'`
step	Incremento válido para `type='number'`, `range`, `date`	`step='0.5'`
minlength / maxlength	Longitud mínima y máxima de texto	`minlength='3' maxlength='12'`
multiple	Permite seleccionar múltiples archivos en `input[type='file']` o varias opciones en `email`	`multiple` en archivos
title	Texto que aparece en el tooltip al no cumplirse `pattern`	`title='Sólo letras y espacios'`


Edad (18–99):


Avatar (jpg, png):

5. Personalización y validación avanzada

Para casos complejos, puedes combinar la validación nativa con JavaScript usando la API de validación de restricciones (ValidityState). Permite:

Comprobar si un campo es válido: input.checkValidity().
Obtener el estado: input.validity.valid, valueMissing, patternMismatch, etc.
Definir mensajes personalizados: input.setCustomValidity('Mensaje de error').



  Usuario (3–12 caracteres):

Resumen

placeholder: pista visual dentro del campo, pero no sustituye al label.
required: marca obligatorio el campo.
pattern: expresión regular para validar el contenido.
Otras ayudas: min, max, step, minlength, maxlength, multiple, title.
Para validaciones complejas, combina con la API ValidityState y setCustomValidity.

Con estas herramientas nativas lograrás formularios más accesibles, robustos y con mejor experiencia de usuario sin necesidad de librerías externas.

Curso HTML 9.6 Placeholder, required, pattern y otras ayudas de validación