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.

Les comento en los siguientes puntos algunas de las particularidades de la etiqueta:

• El formato de fecha devuelto por defecto es AAAA-MM-DD.
• Se puede configurar un mínimo de fecha a seleccionar con el atributo ‘min‘:
  min=”2013-10-08″.
• Se puede configurar un máximo de fecha a seleccionar con el atributo ‘max‘:
  max=”2014-10-08″.
• Con el atributo ‘value‘ se puede poner el calendario con una fecha concreta por defecto:
  value=”2013-10-08″.
• Con el atributo ‘step‘ puedes establecer el avance o retroceso de días con las flechas del calendario.

Quizás todavía haya aspectos en los que podría mejorar el datepicker, por ejemplo no se pueden seleccionar intervalos de fechas o días sueltos. Esperamos que sigan mejorándolo.

Algunos atributos

• ‘min‘: He puesto que la fecha mínima sea el 1 de enero 2013.
• ‘max‘: He puesto que la fecha máxima sea el 31 de diciembre 2013.
• ‘value‘: Fecha por defecto el 1 de enero 2013.
• ‘step‘: Que avance el intervalo de días de 1 en 1.

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.