En el mundo de HTML, los formularios han evolucionado mucho con la llegada de HTML5, y eso nos facilita la vida a la hora de capturar datos de manera más eficiente y con menos complicaciones. Hace unos años, cuando diseñábamos formularios, teníamos que recurrir a validaciones en el servidor o a JavaScript para asegurarnos de que los datos introducidos eran correctos. Ahora, gracias a los nuevos tipos de input y atributos que HTML5 nos ofrece, gran parte de esa validación se realiza automáticamente en el navegador, mejorando la experiencia del usuario y simplificando nuestro trabajo.
Uno de los atributos que más nos ayuda es el placeholder. Este atributo muestra un texto grisáceo dentro del campo cuando está vacío, dándonos una pista sobre qué tipo de dato se espera. Por ejemplo, podemos poner un placeholder que diga Introduce tu nombre para que el usuario sepa qué debe escribir. Eso sí, es importante recordar que el placeholder no sustituye a la etiqueta label, que sigue siendo necesaria para cumplir con las normas de accesibilidad. Podemos usar el placeholder para aportar contexto, pero no debemos eliminar los labels por completo.
Otro atributo fundamental es required, que convierte un campo en obligatorio. Antes, para asegurarnos de que un usuario no dejara un campo vacío, teníamos que validar en el servidor o usar JavaScript. Ahora, simplemente añadiendo required al input, el navegador se encarga de impedir que el formulario se envíe si ese campo está vacío, mostrando un mensaje de error automático. Esto nos ahorra mucho trabajo y mejora la interacción con el usuario.
En cuanto a los tipos de input, HTML5 nos trae varios que facilitan la captura de datos específicos. Por ejemplo, el tipo number nos permite crear campos que solo aceptan números. Además, estos campos suelen mostrar controles para aumentar o disminuir el valor y, en dispositivos móviles, activan un teclado numérico que facilita la introducción de números. Podemos limitar los valores que se pueden introducir usando atributos como min, max y step. Por ejemplo, si queremos que el número esté entre 0 y 10 y solo acepte valores pares, podemos usar:
<input type="number" min="0" max="10" step="2">
Con esto, el usuario solo podrá seleccionar 0, 2, 4, 6, 8 o 10, y si intenta enviar un valor fuera de ese rango o que no sea múltiplo de 2, el navegador mostrará un error.
Otro tipo muy útil es el email. Este campo está diseñado para capturar direcciones de correo electrónico y realiza una validación básica para asegurarse de que el formato sea correcto, es decir, que contenga un símbolo @ y un dominio. Esto nos evita tener que programar validaciones complejas para emails, que suelen ser bastante engorrosas. Además, en dispositivos móviles, el teclado que aparece incluye accesos directos a caracteres comunes en emails, como la arroba, lo que facilita la escritura. También es interesante que, en muchos casos, el teclado no fuerza la primera letra en mayúscula, lo que es adecuado porque las direcciones de correo no distinguen entre mayúsculas y minúsculas.
El tipo tel está pensado para números de teléfono. Aunque no realiza validaciones estrictas sobre el formato, sí cambia el teclado en dispositivos móviles para mostrar un teclado numérico adaptado a la introducción de números telefónicos, incluyendo caracteres especiales como el asterisco o la almohadilla, que pueden ser parte de ciertos números. Esto mejora la experiencia al introducir teléfonos, aunque no nos garantiza que el número sea válido.
Estos nuevos tipos y atributos nos permiten crear formularios más intuitivos y robustos sin necesidad de añadir código extra para validaciones básicas. Además, mejoran la accesibilidad y la usabilidad, especialmente en dispositivos móviles, donde el teclado adecuado puede marcar una gran diferencia en la comodidad del usuario.
En próximos encuentros exploraremos otros tipos de input como rangos, fechas y horas, que también aportan funcionalidades interesantes para capturar datos específicos de manera sencilla y efectiva.