HTML5: Nuevos tipos de input

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

Ver soporte

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="" />

input-color

Paleta de colores usando Chrome en OS X.

date

Ver soporte

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="" />

input-date

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 min y max aseguran que el usuario solo pueda elegir entre un rango de fechas, ordenado por Año/Mes/Día.

datetime-local

Ver soporte

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="" />

input-datetime-local

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.

email

Ver soporte

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="" />

input-email

month

Ver soporte

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="" />

input-month

number

Ver soporte

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="" />

input-number

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" />  

input-number-error

range

Ver soporte

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 range no es importante el valor exacto que vamos a recibir.

<input type="range" name="" id="" min="0" max="100"/>

input-range

Ver soporte

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

Ver soporte

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

Ver soporte

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="" /> 

input-time

url

Ver soporte

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="" />

input-url

week

Ver soporte

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="" />

input-week

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.

Se parte de mi newsletter

Compartiré contigo las últimas novedades del sitio y otros recursos sobre desarrollo web que no te puedes perder.