Desde la llegada de HTML5 nos encontramos con un montón de características nuevas las cuales nos hacen la vida más fácil, ya sea el insertar un vídeo o audio hasta etiquetas personalizadas, gracias a esto generamos una mejor experiencia de usuario y lo mejor de todo es que solucionamos varios problemas que antes nos tomaba tiempo hacer.
Entre todas esas características nos encontramos con nuevos tipos de entrada o como mejor los conocemos “input”, de los cuales ahora tenemos doce para elegir y todos ellos para distintas situaciones, aunque no todos son soportados por todos los navegadores, la mayoría ya están implementados, entonces vale darles una mirada:
Índice:
color
El input color permite seleccionar un color y devolver un valor hexadecimal de ese mismo color. El usuario puede seleccionar un color a partir de una paleta de colores que se le muestra o igual tiene la posibilidad de poner algún valor, todo esto depende del sistema operativo o del navegador.
<input type="color" name="" id="" />
Paleta de colores usando Chrome en OS X.
date
El input date le permite al usuario seleccionar una fecha en concreto a través de una especie de calendario lo cual lo hace más fácil para él. Lo mejor es que antes para lograr hacer lo mismo teníamos que usar JavaScript o JQuery, esto implicaba más tiempo o la página tardaba más en cargar.
<input type="date" name="" id="" />
También podemos agregar parámetros para hacer cosas más específicas:
<input type="date" name="" id="" min="2015-12-1" max="2015-12-31"/>
Los atributos
minymaxaseguran que el usuario solo pueda elegir entre un rango de fechas, ordenado por Año/Mes/Día.
datetime-local
El input datetime-local le permite al usuario seleccionar una fecha y hora (sin zona horaria).
Este input es perfecto para especificar el tiempo preciso de algún día.
<input type="datetime-local" name="" id="" />
Antes teníamos input datatime que nos permitía poner la zona horaria, pero este ha sido removido del estándar HTML, así que ahora solo tenemos datetime-local.
El input email solo permite entradas de tipo email (correo electrónico), es decir, que si se introduce un valor que no sea un email, este no lo va a dejar continuar.
<input type="email" name="" id="" />
month
El input month le permite al usuario seleccionar un mes, a través una especie de calendario al igual que con el input date.
<input type="month" name="" id="" />
number
El input number le permite al usuario seleccionar un valor numérico, no le permite al usuario agregar ningún otro valor que no sea un número.
<input type="number" name="" id="" />
Con los atributos min y max podemos especificar un rango mínimo y máximo del el cual el usuario no puede disminuir o rebasar.
<input type="number" name="" id="" min="0" max="10" />
range
El input range representa un valor numérico dentro de un rango determinado, algo así como el input number, a diferencia que a este lo vemos como una especie de control deslizante.
Con input
rangeno es importante el valor exacto que vamos a recibir.
<input type="range" name="" id="" min="0" max="100"/>
search
El input search simplemente se utiliza para especificar un campo de búsqueda, pero realmente se comporta igual a un input text, no hay mucho misterio con este input realmente.
<input type="search" name="" id="" />
tel
El input tel se utiliza para especificar un campo que debe de contener un número de teléfono, pero al igual que pasa con input search, este se comporta igual que un input text.
<input type="tel" name="" id="" />
time
El input time le permite al usuario seleccionar una hora en específico, ya sea a través del teclado o de las flechas se le presentan dentro del input.
<input type="time" name="" id="" />
url
El input url solo permite entradas de tipo url (sitios web), es decir, que si se introduce un valor que no sea una url, este no lo va a dejar continuar.
<input type="url" name="" id="" />
week
El input week le permite al usuario seleccionar una semana, a través una especie de calendario al igual que con el input date.
<input type="week" name="" id="" />
Como puedes ver, tenemos una gran variedad de diferentes tipos de entrada (input), lo cual nos garantiza que tenemos una solución para cada situación que se nos presente, además de que la experiencia de usuario es mucho mejor y nos hace la vida más fácil.