Aparecen nuevos tipos de elemento INPUT:

Tipo de INPUT		Código HTML
Búsqueda		<input type="search">
Numérico		<input type="number">
Intervalo		<input type="range">
Selección de color		<input type="color">
Teléfono		<input type="tel">
URL		<input type="url">
E-mail		<input type="email">
Tiempo y fechas	Fecha	<input type="date">
	Mes	<input type="month">
	Semana	<input type="week">
	Hora	<input type="time">
	Fecha y hora	<input type="datetime">
	Fecha y hora (local)	<input type="datetime-local">

En navegadores antiguos sin soporte de HTML 5 estos nuevos tipos degradan a tipo texto.

No se especifica como deben mostrarse dichos campos en los navegadores, ni tampoco como deben hacer el reporte de errores.

Campo para e-mail

Debe rellenarse con una dirección de correo electrónico correctamente construida.

<input type="email">

Mediante el atributo multiple se permite la introducción de varias direcciones separadas por comas.

<input type="email" multiple>

Posible comportamiento: extracción de los datos desde una libreta de direcciones o desde información de usuario en el dispositivo con el que se accede.

Saber más: input type=email – e-mail address input control (enlace externo, en inglés).

Campo para URL

Debe rellenarse con una URL, que no tiene que ser necesariamente HTTP o HTTPS, también puede ser un ‘mailto:’, ‘tel:’, etc.

<input type="url">

Posible comportamiento: Autocompletado con las direcciones almacenadas en el historial de páginas visitadas del navegador.

Saber más: input type=url – URL input control (enlace externo, en inglés).

Campo para teléfono

Campo para introducción de teléfonos.

<input type="tel">

Posible comportamiento: extracción de los datos desde una libreta de direcciones o desde información de usuario en el dispositivo con el que se accede.

Saber más: input type=tel – telephone-number-input field (enlace externo, en inglés).

Campos de tiempo y fechas

Campo de fecha

Permite la inserción de fechas en formato AAAA-MM-DD.

<input type="date">

Comportamiento del navegador:

• Opera 11 muestra un calendario para seleccionar la fecha:
• Chrome 8 muestra flechas que varían el día de uno en uno:

Campo de prueba de fecha:

El comportamiento que muestra Opera es similar a muchas soluciones existentes mediante Javascript.

Saber más: input type=date – date input control (enlace externo, en inglés).

Campo de hora

Permite la inserción de la hora en formato HH:MM (horas, minutos). No se incluye información de zona horaria.

<input type="time">

Comportamiento en Opera 11 y Chrome 8: Campo con controles que permiten la variación de la hora.

Campo de prueba de hora:

Saber más: input type=time – time input control (enlace externo, en inglés).

Campo de fecha y hora

Permite la inserción de fecha y hora en un solo campo (une las funcionalidades de los tipos ‘date’ y ‘time’). Debe permitir la especificación de zona horaria.

<input type="datetime">

Existe un tipo ‘datetime-local’ que permite introducir fecha y hora local, sin especificar la zona horaria.

<input type="datetime-local">

Comportamiento del navegador:

• Opera 11 muestra la zona horaria en el tipo ‘datetime’, pero no deja cambiarla (se define como hora UTC):
• Chrome 8 permite la modificación de la zona horaria en el tipo ‘datetime’:

Campo de prueba de fecha y hora:

Campo de prueba de fecha y hora local:

Campo de mes

Permite la inserción de mes y año en formato AAAA-MM (año, mes).

Resulta de utilidad para especificar caducidad de tarjetas bancarias.

<input type="month">
<input type="month" value="2010-10">

Comportamiento del navegador:

• Opera 11 muestra un calendario en el que seleccionar el mes:
• Chrome 8 muestra flechas que varían el mes de uno en uno:

Campo de prueba de mes:

Saber más: input type=month – year-and-month input control (enlace externo, en inglés).

Campo de semana

Permite la inserción de año y semana en el formato AAAA-WSS (año, semana):

• Semana 50 del año 2010: 2010-W50
• Semana 2 del año 2011 (si el número de semana es menor de 10, llevará un cero delante): 2011-W02

<input type="week">
<input type="week" value="2011-W02">

Comportamiento del navegador:

• Opera 11 muestra un calendario en el que seleccionar la semana:
• Chrome 8 muestra flechas que varían la semana de uno en uno:

Campo de prueba de semana:

Saber más: input type=week – year-and-week input control (enlace externo, en inglés).

Campo de número

Solo acepta valores numéricos, incluyendo números negativos y con decimales, separando los decimales con punto.

<input type="number">
<input type="number" value="30.8">

Comportamiento en Opera 11 y Chrome 8: Campo con controles que permiten la variación del número, de modo predeterminado en intervalos de 1.

Campo de prueba de número:

Saber más: input type=number – number input control (enlace externo, en inglés).

Campo de intervalo

El funcionamiento es el mismo que el campo de número (type="number"), pero con apariencia de slider.

Evitará el uso de Javascript para dar esta apariencia a los campos.

<input type="range">
<input type="range" value="30" max="100" min="0">

• Opera 11 muestra un slider para seleccionar el número:
• Chrome 8 similar a Opera 11:

Campo de prueba de intervalo:

Saber más: input type=range – imprecise number-input control (enlace externo, en inglés).

Otros tipos de campo

Campo para búsqueda

Es similar al campo de tipo texto, con la diferencia de poder ser presentado de modo distinto por el navegador.

<input type="search">

Comportamiento en Safari 5 y Chrome 8: al comenzar a rellenar el campo, aparece un control a la derecha del mismo que permite borrar la búsqueda.

Campo de prueba de búsqueda:

Saber más: input type=search – search field (enlace externo, en inglés).

Campo para selección de color

Permite seleccionar un color mediante un cuadro de selección de colores.

El valor del campo deberá ser un color expresado en formato hexadecimal, del mismo modo que en CSS, como puede verse en el ejemplo:

<input type="color">
<input type="color" value="#00a2e8">

Comportamiento en Opera 11: se muestra un cuadro de selección de colores.

Campo de prueba de selección de color:

Saber más: input type=color – color-well control (enlace externo, en inglés).