Nuevos tipos de input en HTML5
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 searchque 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):
<input type=“search” name=“busqueda”>
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):
<input type=“tel” name=“telefono”>
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):
<input type=“url” name=“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):
<input type=“email” name=“correo”>
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):
<input type=“datetime” name=“fechahora”>
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):
<input type="date" name="fecha">
Si estamos usando Opera, el calendario es el mismo que el de la imagen anterior.
Mes (month):
<input type="month" name="mes">
El calendario aquí permite seleccionar el número de mes.
Semana (week):
<input type="week" name="semana">
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):
<input type="time" name="hora">
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):
<input type="number" name="num" min="0" max="50">
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):
<input type="range" name="rango" min="0" max="50">
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):
<input type="color" name="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! 
Comentarios
Publicar un comentario