En esta ocasión exploramos algunos controles adicionales que HTML5 nos ofrece para enriquecer nuestros formularios, haciendo que sean más interactivos y visuales sin necesidad de recurrir a plugins externos. Comenzamos con el control range, conocido comúnmente como slider. Este se implementa con un input cuyo atributo type es range. Al usarlo, aparece un deslizador que permite seleccionar un valor dentro de un rango definido por los atributos min y max. Por ejemplo, si establecemos un rango de 1 a 5, el deslizador tendrá cinco posiciones posibles. Además, podemos controlar la precisión del movimiento con el atributo step, que define los incrementos permitidos. Si ponemos un step de 3 en un rango de 0 a 10, solo podremos elegir valores como 0, 3, 6 o 9. Este control es sencillo pero muy útil para encuestas o valoraciones donde queremos limitar la entrada a ciertos valores predefinidos.
<input type="range" min="0" max="10" step="3" name="valoracion">
Pasando a los controles relacionados con el tiempo, HTML5 nos facilita la selección de fechas y horas con inputs específicos. El tipo date nos muestra un calendario integrado en el navegador, eliminando la necesidad de plugins externos para seleccionar fechas. Podemos hacer que el campo sea obligatorio con required y limitar el rango de fechas permitidas usando min y max con valores en formato ISO, por ejemplo, 2017-01-01 para el primero de enero de 2017. Esto es especialmente útil para evitar que el usuario seleccione fechas fuera de un rango válido, como impedir fechas futuras.
<input type="date" name="fecha" required min="2017-01-01" max="2017-01-16">
De forma similar, el input de tipo time permite seleccionar una hora específica. El valor se envía en formato de 24 horas, por ejemplo, 18:38 para las seis y treinta y ocho de la tarde.
<input type="time" name="hora" required>
Para combinar fecha y hora, existe el input datetime-local, que permite seleccionar ambos valores en un solo control. Aunque hubo un tipo llamado datetime, este está obsoleto y no es soportado por navegadores modernos. El formato de envío es ISO con una T separando la fecha y la hora, como 2024-06-15T18:38.
<input type="datetime-local" name="fechaHora" required>
Además, HTML5 incluye otros tipos relacionados con el tiempo, como month para seleccionar un mes y año sin día, o week para elegir una semana específica del año. Estos pueden ser útiles dependiendo del contexto de la aplicación.
En cuanto a la selección de colores, el input de tipo color abre un selector nativo del sistema operativo que permite al usuario elegir un color sin necesidad de plugins adicionales. El valor se envía en formato hexadecimal, por ejemplo, #ff0000 para rojo. Aunque todavía puede presentar problemas de compatibilidad en algunos navegadores, es una herramienta muy práctica para interfaces que requieren personalización visual.
<input type="color" name="colorFavorito">
Finalmente, para mostrar el progreso de una tarea o proceso, HTML5 introduce la etiqueta progress. Esta no es un input, pero es muy útil para indicar visualmente el avance de una operación. Se define con atributos max para el valor máximo y value para el valor actual. Por ejemplo, si max es 100 y value es 50, la barra se mostrará a la mitad. Es recomendable añadir un atributo title para mejorar la accesibilidad, indicando qué representa el progreso, como un porcentaje.
<progress max="100" value="50" title="50% completado">50%</progress>
Estos controles amplían las posibilidades de nuestros formularios, haciendo que la interacción sea más intuitiva y visual para los usuarios, y al mismo tiempo simplifican el desarrollo al evitar dependencias externas. Con ellos, podemos crear interfaces modernas y funcionales que aprovechan las capacidades nativas de los navegadores actuales.