Nuevos tipos de input en HTML5
Dentro de la gran cantidad de novedades que nos ofrece el HTML5, una muy interesante son los nuevos valores para el atributo type del elemento input.
Estos nuevos tipos de campos hacen que los navegadores adopten distintos comportamientos que, sin dudas, nos van a hacer la vida más fácil a los desarrolladores de sitios web.
Así como actualmente tenemos el conocido password que oculta la contraseña con asteriscos o círculos (dependiendo del navegador); ahora contamos con el nuevo search que presenta una pequeña cruz para poder borrar su contenido; o también el nuevo campo numérico number que muestra dos flechas (hacia arriba y hacia abajo) para aumentar o disminuir el valor del número.
Algo muy importante a tener en cuenta es que si bien estos elementos todavía no son soportados por todos los navegadores modernos, el uso de los mismos no afectará de ningún modo en los navegadores que no los soporten, actuarán simplemente como si fuesen del tipo text.
Ejemplos de los nuevos atributos
A continuación los distintos valores, recuerda que solo verás los nuevos comportamientos si estás utilizando algún navegador moderno (últimas versiones de Chrome, Firefox, Safari, Opera o IE).
Búsqueda (search):
Al ingresar texto en el campo, el navegador muestra una cruz a la derecha para borrar todo lo que hemos escrito.
En Chrome, el campo de búsqueda de htmlcinco.com
Teléfono (tel):
A la hora de completar un input de tipo tel, un smartphone como el iPhone convierte su teclado a números de teléfono.
El teclado del iPhone se adapta para completar un input de tipo tel.
Dirección url (url):
En este campo, el teclado del iPhone es qwerty pero en modo “url”, ya que ofrece teclas fundamentales para escribir una dirección web como son el punto, la barra “/” o la tecla “.com”.
El teclado del iPhone para completar un campo de tipo url.
Correo electrónico (email):
Esta vez, el teclado del smartphone es qwerty pero también tenemos la tecla “@”.
Teclado para escribir una dirección de correo electrónico.
Fecha y hora (datetime):
Si estás viendo esta página con la última versión de Opera, al cliquear en el campo verás un calendario muy completo que el navegador dispone de forma totalmente nativa.
El campo de tipo fecha y hora en Opera
Fecha (date):
Si estamos usando Opera, el calendario es el mismo que el de la imagen anterior.
Mes (month):
El calendario aquí permite seleccionar el número de mes.
Semana (week):
El calendario que nos muestra Opera para el campo de semana, nos permite elegir el número de semana del año.
El input de tipo week en Opera.
Hora (time):
Aquí el input está con el formato de hora, con los dos puntos “:” correspondientes y las flechas para subir o bajar el horario.
El input de tipo hora.
Número (number):
Para este input tenemos los atributos min y max para establecer el máximo y el mínimo que acepta el campo.
En un smartphone vemos el teclado numérico:
Teclado numérico del iPhone.
Rango (range):
El input de tipo range se presenta como un control para arrastrar con el mouse (o con el dedo en un móvil con pantalla táctil). Este campo también acepta los atributos min y max.
Input de tipo range.
Color (color):
Si estás viendo este campo con la última versión de Opera te vas a sorprender, porque el navegador presenta de forma nativa un selector de color… otra funcionalidad que comunmente tendríamos que hacer con javascript.
Primer ventana para seleccionar un color en Opera.
Pero algo que sorprende aún más, es que al cliquear en “otros…” de la ventana anterior, Opera muestra una ventana con un selector de color mucho más avanzado como el de la siguiente captura de pantalla:
Un opción más avanzada para seleccionar color en Opera.
Conclusión
No hay nada que nos detenga de utilizar estos campos en la actualidad, como dije anteriormente, si el usuario está usando un navegador que no soporte dichos valores, se interpretarán los mismos como un input de tipo text. En htmlcinco.com ya estamos usando los mismos en el cuadro de búsqueda y en los campos del formulario de comentarios. Así que ahora es tu turno! 
No sabía que los teclados del iphone dependían de eso, pensé que el iphone de alguna manera “mágica” los detectaba, je
Muy interesante el post… cuánto faltará para que Chrome o Firefox muestren funcionalidades nuevas como Opera para las fechas y colores?!?! Por ie ni pregunto…
[...] Nuevos tipos de input en HTML5 Dentro de la gran cantidad de novedades que nos ofrece el HTML5, una muy interesante son los nuevos valores para el atributo type del elemento input. Source: http://www.htmlcinco.com [...]
Esto me sorprende cada vez más. El selector de color de Opera es genial.
Gabo, no solo el selector de color y los calendarioss?! Veo el futuro mucho mais fácil jejeje!!
Que bueno sería que todo el mundo usara Opera
Para qué está la tecla de espacio en el teclado de rellenar emails?
Mariela, buena pregunta! yo me pregunto lo mismo, no nos sería mucho más útil una tecla “.com”??
Jaime V.
Excelente aporte justo en el momento que veo esto me encuetro desarrollando una aplicación web para smartphone y esto me a sido de gran ayuda
[...] Aquí un artículo bastante completo que se publicó aquí hace unos meses: Nuevos tipos de inputs en HTML5. [...]
:O
lo malo es que el explorador tiene que estar actualizado en la ultima versión.. por ejemplo yo quiero usar el tipo date en chrome genial pero en firefox no lo reconoce a pesar que esta en la version 14 que es la ultima.. en chrome y safari funcionan muy bien
Gracias muy bueno
[...] Ejemplos de INPUTS [...]
Muy bueno, muchas gracias
MUCHAS GRACIAS
Me parece excelente, pero me gustaría saber si al INPUT del tipo NUMBER se le puede ocultar el SPINNER?
Ya conseguí la manera de hacerlo, la comparto…
Hay que hacerlo a través de los estilos CSS
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{
-webkit-appearance: none;
margin: 0px;
}
Genial
Muchas gracias por el post, y gracias a HTML5 por ahorrarnos la mitad del curso básico. Habrá que cambiar los programas de estudios.