En lo referente a los formularios Web, HTML 5 nos dota de nuevas y muy potentes herramientas para su presentación y programación. Pero la diferencia fundamental estriba en que donde antes deberíamos echar mano de JavaScript para la codificación de las validaciones y respuestas, ahora HTML 5 contiene funciones internas que obvian mucha de la programación adicional necesaria con anterioridad.

En el presente artículo trataremos los nuevos elementos para formularios, con especial atención a los Input types, como los Date pickers, selección de colores, range y number, con sus acotaciones de valores, introducción de email y direcciones URL, así como envíos por e-mail, utilización de placeholder, required y pattern, para validación de entradas de usuario. Además hablaremos de agrupaciones de campos de formulario, listas de selección (select y list), botones decorados y más.

Los nuevos elementos para formularios

En la Tabla 1 recogemos todos los nuevos elementos de formulario que han aparecido con HTML 5. De entre todas las novedades destacan las referentes a los Input types y sus atributos. En la Tabla 2 recogemos las definiciones resumen de todos los elementos input válidos en HTML 5, valga sin más cómo punto de referencia.

Por ellos comenzaremos el artículo y para empezar trataremos, muy someramente, la maqueta de un breve formulario.

Uno de los formularios más simples, que ya hemos utilizado, pero no comentado, se refiere a las búsquedas mediante Google. Si nos fijamos en el Listado 1, podemos observar los elementos básicos de un formulario de éste tipo:

• Etiqueta de apertura y cierre form. En la apertura se define cómo se enviarán los datos del formulario y quién los tratará en destino (action)

• Un Input type encargado de recoger la entrada de texto del usuario.

• Un Input type de tipo botón de envío de datos al destino.

• Un Input type oculto (hidden) que contiene datos adicionales ocultos, necesarios para tratar los datos enviados al destino. En nuestro caso se indica que la búsqueda será realizada en un site de Internet que se indica en value.

Listado 1: Formulario de búsqueda en Google de la maqueta de un blog

<form method=”get” action=”http://www.google.com/search”>

<input type=”text” name=”q” size=”15” maxlength=”255”

value=”” placeholder=”Escribir aquí”/>

<input type=”submit” value=”Buscar en IDG”/>

<input type=”hidden” name=”sitesearch” value=”www.idg.es”/>

</form>

Los nuevos HTML 5 Input Types

Con HTML 5 disponemos de trece nuevos tipos, muchos de ellos con validación de datos nativa (véase más adelante), que se recogen en la Tabla 1. En la que sigue se indica brevemente su descripción, agrupándose los referentes a fecha y hora (Date pickers) que trataremos posteriormente.

ipo Descripción

email Espera la entrada de una dirección email correctamente formateada

url Espera la entrada de una dirección URL correctamente formateada

number Espera la entrada de un valor numérico

range Espera la entrada de un valor numérico, dentro de un rango especificado

date pickers Esperan la entrada de un valor de fecha y/u hora correctamente formateadas

search Se puede introducir un texto para realizar búsquedas en una dirección URL, similarmente a lo que se realiza en los buscadores de Internet

color Espera la entrada de un código de color válido

tel Se puede introducir una cadena de caracteres, supuestamente referente a un teléfono. No hay restricciones y su soporte actual es escaso

En lo que resta de artículo intercalaremos y aun trataremos detalladamente ejemplos de su uso. Para empezar comenzaremos con el tipo de entrada email. Si nos fijamos en el Listado 2, se declara como se haría con un campo de texto, pero debe recibir una dirección e-mail sintácticamente correcta, al estilo [email protected]. de lo contrarío se evaluará como un campo incorrecto y se pedirá de forma automática que sea corregida. Al menos se pedirá que conste de [email protected], dependiendo del navegador.

Si ejecuta el ejemplo en un navegador compatible, al hacer clic sobre el botón de envío (submit), que será automáticamente etiquetado en el navegador, sin que sea preciso darle previamente nombre alguno, se enviará para que sea procesada la respuesta en el servidor mediante la página respuesta.asp, tal como se desprende del atributo (la propiedad) action en la etiqueta form.

Listado 2:

Entrada tipo email

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” lang=”es-es”>

<title>Input Type email</title>

</head>

<body>

<form action=”respuesta.asp” method=”get”>

E-mail: <input type=”email” name=”user_email” /><br />

<input type=”submit” />

</form>

</body>

</html>

En este tipo de entrada se comprueba automáticamente el tipo en muchos navegadores, véase más adelante, y alguno, como Safari en el iPhone, transforman la entrada en el teclado para la introducción fácil de @ y .com.

Las etiquetas fieldset y legend y los atributos placeholder y required

En lo referente a las etiquetas fielset y legend, su finalidad es acotar un grupo de entradas en un formulario. Entre la etiqueta de apertura y la de cierre se creará un reborde y si se incluye una etiqueta legend, en el propio reborde se insertará dicho texto. Normalmente se tratará de una leyenda alusiva al grupo de entradas que se acotan.

La sintaxis es la recogida seguidamente y un ejemplo de uso se puede ver en el Listado 3, que amplía sustancialmente el uso de un formulario base enviado por e-mail.

<form>

<fieldset style=”…”>

<legend>Leyenda o título:</legend>

</fieldset>

</form>

Respecto al atributo de la etiqueta input denominado placeholder, mostrará, en aquellos navegadores compatibles, un texto ejemplo o de sugerencia del tipo de entrada esperada en ese campo. Se hace en una forma agrisada y desaparece cuando el control toma el foco de entrada, como estamos acostumbrados a ver en múltiples formularios. La diferencia estriba en que ahora no se precisa de ninguna programación adicional para ello; simplemente es otra de las nuevas posibilidades que nos brinda HTML 5.

Listado 3:

Un ejemplo con entrada de un tipo email, con un fieldset y un envío del formulario mediante un e-mail

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” lang=”es-es”>

<title>Formulario enviado por e-mail</title>

</head>

<body>

<h2>Enviar por e-mail el formulario:</h2>

<form action=”MAILTO:[email protected] method=”post” enctype=”text/plain”>

<fieldset style=”color:darkred;width: 500px;background: #eeee00”>

<legend>Datos personales:</legend>

Nombre:

<input type=”text” name=”name” placeholder=”Nombre completo” /><br />

E-mail:

<input type=”email” name=”mail” placeholder=”Dirección email” /><br />

Comentarios:

<input type=”text” name=”comment” placeholder=”¿Algún comentario?” size=”50” />

</fieldset>

<br />

<input type=”submit”>

<input type=”reset”>

</form>

</body>

</html>

Si modificamos el Listado 3, de manera que sea:

E-mail:

<input type=”email” name=”mail” placeholder=”Dirección email” required /><br />

La introducción de un atributo required fuerza que la entrada input correspondiente, del email en nuestro ejemplo, sea obligada antes de poder enviarse el formulario. Caso de no ser rellenada se nos mostrará una advertencia de la obligatoriedad de ser contestada, como se recoge en la figura adjunta.

Campos (input types) de tipo fecha y hora (Date pickers)

Con HTML 5 se dispone de Input type específico para recoger campos de fecha y hora: son los denominados Date pickers. Cuando se incluyen en un formulario, en los navegadores compatibles con HTML 5, se desplegará un calendario y, en su caso, un selector de hora, para la introducción de los datos. Si el navegador no es compatible, aparecerán simples cajas de entrada de datos de texto.

Los Date pickers disponibles, como decimos, a partir de HTML 5 son:

• date: selecciona una fecha (día, mes y año)

• month: selecciona un mes y año

• week: selecciona una semana concreta de un año

• time: selecciona una hora y minuto (reloj de 24 horas)

• datetime: selecciona la hora, minuto, día, mes y año (horario UTC)

• datetime-local: selecciona la hora, minuto, día, mes y año (horario local)

Listado 4:

Ejemplo base de uso de Date pickers; sustitúyase date por cada uno de ellos y véase cómo se muestra en el navegador y qué tipo de resultado es una selección.

<!DOCTYPE HTML>

<html>

<body>

<form action=”respuesta.cgi” method=”get”>

Date picker: <input type=”date” name=”user_date_picker”

onchange=”myOutput.value=this.value”/>

<label>...Valor seleccionado: </label>

<output name=”myOutput”> 0 </output>

</form>

</body>

</html>

Listado 5:

Parte de un formulario, con una entrada

de tipo week

<!DOCTYPE html>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” lang=”es-es”>

<title>Week</title>

</head>

<body>

<form>

<fieldset style=”color:darkred;width: 500px;background: #eeee00”>

<legend>Personal:</legend>

Nombre: <input type=”text” /><br />

E-mail: <input type=”email” /><br />

Semana de inicio: <input type=”week” />

</fieldset>

<input type=”button” value=”Salir” onClick=”window.close()”/>

</form>

</body>

</html>

Listado 6:

Listado completo de un formulario con uso de los input type del tipo date y remisión mediante un e-mail

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” lang=”es-es”>

<title>Date</title>

</head>

<body>

<h2>Enviar por e-mail el formulario:</h2>

NOTA: Los campos marcados con <em style=”color:red;”>*</em> son obligatorios.

<form action=”MAILTO:[email protected] method=”post” enctype=”text/plain”>

<fieldset style=”color:darkred;width: 500px;background: #eeee00”>

<legend>Fecha de nacimiento:</legend>

<input type=”date” required />

<em style=”color:red;”>*</em><br />

</fieldset>

<br />

<input type=”submit” value=”Enviar formulario”>

<input type=”reset” value=”Borrar todo/Reiniciar”></p>

</form>

</body>

</html>

Validación automática de controles del formulario y atributo pattern

Ya con anterioridad nos hemos referido a este hecho. Aquellos controles de formulario que se refieran a entradas de un formato específico, como fechas, direcciones URL, direcciones e-mail, códigos de color, números… son validados automáticamente por el navegador, antes de ser enviados al servidor y, en su caso, se advertirá de que la sintaxis es incorrecta.

Pero HTML 5 aun nos proporciona otro nivel de control de entrada, mediante el atributo pattern. Mediante él, expresado como una cadena de caracteres, se puede especificar un código de una expresión que denote los caracteres admitidos en la entrada, así cómo su número, su posición o su mayuscularización. Todo ello de conformidad con los estándares de una expresión regular definidos para el lenguaje ECMAScript. En nuestro ejemplo, del Listado 7, se pide la entrada del código postal, para lo cual se indica en pattern que deben ser cinco números. Para detalles acerca de otras entradas particulares y cómo codificarlas consúltese la página de Internet recogida en el recuadro adjunto.

El contenido de value especificado en el atributo pattern es una cadena de texto que debe cumplir las especificaciones de una expresión regular, tal como es definida en el estándar ECMA-262 (ECMAScript o JavaScript estandarizado por la ECMA)

Véase al respecto:

www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf

Listado 7: Empleo del atributo (propiedad) pattern

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>

<title>Pattern</title>

</head>

<body>

<h2>Enviar por e-mail el formulario:</h2>

<form action=”MAILTO:[email protected] method=”post” enctype=”text/plain”>

<fieldset style=”color:darkred;width: 500px;background: #eeee00”>

<legend>Código postal:</legend>

<input type=”text” name=”postal_code” pattern=”[0-9]{5}”

title=”Código postal de 5 dígitos” />

</fieldset>

<br />

<input type=”submit” value=”Enviar formulario”>

<input type=”reset” value=”Borrar todo/Reiniciar”></p>

</form>

</body>

</html>

Entradas de tipo select

Un input type del tipo select mostrará una lista desplegable de opciones seleccionables, que son declaradas mediante las etiquetas option; las sintaxis se muestra seguidamente. Obsérvese que select actúa como un contenedor de opciones y es la etiqueta que contiene el nombre del elemento remitido por el formulario.

<select name=”nombre”>

<option value=”valor1”>Opción 1</option>

<option value=”valor2”>Opción 2</option>

<option value=”valorN”>Opción N</option>

</select>

Si a alguno de los elementos option se le asigna la propiedad selected, esto marcará la opción que será mostrada en la caja por defecto (opción preseleccionada). Por otra parte, cabe la posibilidad de hacer agrupaciones visualmente orientativas (no formalmente significativas) de las opciones seleccionables, mediante la etiqueta optgroup. Actúa cómo se observaría en un menú con opciones (no seleccionables) que dan paso a entradas organizadas en grupos. Véase el Listado 9 a modo de ejemplo.

Listado 8:

Uso de las etiquetas select y option, con opciones de rangos de edad y envío por e-mail.

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” lang=”es-es”>

<title>Select</title>

</head>

<body>

<h2>Enviar por e-mail el formulario:</h2>

<form action=”MAILTO:[email protected] method=”post” enctype=”text/plain”>

<fieldset style=”color:darkred;width: 500px;background: #eeee00”>

<legend>Rango de edad:</legend>

<select name=”edad”>

<option value=”menor_12”>Menor de 12</option>

<option value=”12_18”>12 - 18</option>

<option value=”19_25” selected>19 - 25</option>

<option value=”26_40”>26 - 40</option>

<option value=”41_60”>41 - 60</option>

<option value=”61_100”>61 - 100</option>

<option value=”Mayor_100”>Mayor de 100</option>

</select>

</fieldset>

<br />

<input type=”submit” value=”Enviar formulario”>

<input type=”reset” value=”Borrar todo/Reiniciar”></p>

</form>

</body>

</html>

Listado 9:

Ejemplo de uso de select con optgroup

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” lang=”es-es”>

<title>Select</title>

</head>

<body>

<h2>Enviar por e-mail el formulario:</h2>

<form action=”MAILTO:[email protected] method=”post” enctype=”text/plain”>

<fieldset style=”color:darkred;width: 500px;background: #eeee00”>

<legend>Seleccionar destino:</legend>

<select>

<optgroup label=”España”>

<option value=”bar”>Barcelona</option>

<option value=”mad”>Madrid</option>

</optgroup>

<optgroup label=”Alemania”>

<option value=”ber”>Berlín</option>

<option value=”mun”>Munich</option>

</optgroup>

<optgroup label=”Francia”>

<option value=”mar”>Marsella</option>

<option value=”par”>París</option>

</optgroup>

</select>

</fieldset>

<br />

<input type=”submit” value=”Enviar formulario”>

<input type=”reset” value=”Borrar todo/Reiniciar”></p>

</form>

</body>

</html>

Entradas de tipo range y number

Tanto una como la otra gestionan entradas de tipo numérico, aunque el modo de operar es sustancialmente diferente. Mientras la primera muestra una barra de desplazamiento para la selección del valor, la segunda muestra una caja de entrada similar a las de entradas de textos, en las que deberemos escribir el valor numérico o seleccionarlo de un botón lateral de flecha arriba/flecha abajo (según el grado de compatibilidad del navegador). En el Listado 10 y el Listado 11 se muestran dos ejemplos equivalentes, programados, respectivamente, con etiquetas range y number.

Tanto una como otra tienen las siguientes etiquetas o propiedades, que permiten acotar los valores válidos de entrada, en valor incremental de cada pulsación sobre la barra o el botón y el valor inicial por defecto:

Atributo Descripción del valor numérico

max Máximo valor posible del rango

min Mínimo valor posible del rango

step Valor incremental al pulsar sobre el botón de flecha arriba/flecha abajo que aparece en

los navegadores compatibles

value Valor que aparece inicialmente (propuesto)

Más concretamente, en el Listado 10 que sigue se ejemplifica una selección del usuario, en un formulario que será enviado por e-mail, sobre una barra de desplazamiento, entre los valores 1 y 10, proponiéndose inicialmente el valor de 9. A la vez, se ha programado un breve código para que se actualice una etiqueta que recoge el valor actualmente seleccionado en forma de número visualmente así expresado.

Listado 10:

Una barra de desplazamiento con el input type range

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” lang=”es-es”>

<title>Range</title>

</head>

<body>

<h2>Enviar por e-mail el formulario:</h2>

<form action=”MAILTO:[email protected] method=”post” enctype=”text/plain”>

<fieldset style=”color:darkred;width: 500px;background: #eeee00”>

<legend>Valoración general:</legend>

<input type=”range” min=”1” max=”10” step=”1” value=”9”

onchange=”myOutput.value=this.value”/>

<label>Valor seleccionado: </label>

<output name=”myOutput”> 9 </output>

</fieldset>

<br />

<input type=”submit” value=”Enviar formulario”>

<input type=”reset” value=”Borrar todo/Reiniciar”></p>

</form>

</body>

</html>

Listado 11:

Equivalente al Listado 10 anterior, pero con una entrada tipo number

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>

<title>Number</title>

</head>

<body>

<h2>Enviar por e-mail el formulario:</h2>

<form action=”MAILTO:[email protected] method=”post” enctype=”text/plain”>

<fieldset style=”color:darkred;width: 500px;background: #eeee00”>

<legend>Valoración general:</legend>

<input type=”number” min=”1” max=”10” step=”1” value=”9”

onchange=”myOutput.value=this.value”/>

<label>Valor seleccionado: </label>

<output name=”myOutput”> 9 </output>

</fieldset>

<br />

<input type=”submit” value=”Enviar formulario”>

<input type=”reset” value=”Borrar todo/Reiniciar”></p>

</form>

</body>

</html>

Otros tipos de etiquetas input de HTML 5

De entre las restantes etiquetas nuevas, una de las más versátiles es color. Mediante ella se facilita enormemente la selección de colores para textos, fondos, pinceles de dibujo y muchas otras posibilidades que ahora se abren con HTML 5. El proceso será totalmente visual, dado que en los navegadores compatibles se mostrará una caja de diálogo con muestras de colores básicos, que se puede ampliar para ver la paleta de colores completa y seleccionar el deseado mediante el ratón, el dedo o un puntero. En el Listado 12 se codifica un ejemplo.

En ese mismo Listado 12 también hemos codificado etiquetas password, que como su nombre nos indica, serán muy adecuadas para la introducción de contraseñas. Se trata simplemente de cajas de texto, pero que, como estamos acostumbrados a manejar, ocultan lo que se introduce en ellas mostrando asteriscos u otros caracteres (dependiendo del navegador) en vez de la propia contraseña.

Además y como un pequeño recordatorio, también se codifican etiquetas date, fieldset y legend, atributos required con una indicación mediante un asterisco en rojo y el envío del formulario mediante un e-mail.

Listado 12:

Uso de los input type del tipo date con color y password

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” lang=”es-es”>

<title>Date, password y color</title>

</head>

<body>

<h2>Enviar por e-mail el formulario:</h2>

NOTA: Los campos marcados con <em style=”color:red;”>*</em> son obligatorios.

<form action=”MAILTO:[email protected] method=”post” enctype=”text/plain”>

<fieldset style=”color:darkred;width: 500px;background: #eeee00”>

<legend>Formulario, parte 2</legend>

Fecha de nacimiento:<input type=”date” required />

<em style=”color:red;”>*</em><br />

Color preferido: <input type=”color” /><br />

Contraseña: <input type=”password” required />

<em style=”color:red;”>*</em><br />

Repetir contraseña: <input type=”password” required />

<em style=”color:red;”>*</em>

</fieldset>

<br />

<input type=”submit” value=”Enviar formulario”>

<input type=”reset” value=”Borrar todo/Reiniciar”></p>

</form>

</body>

</html>

Por último, la etiqueta text con el atributo list despliega una lista de opciones, de manera bastante similar a select, pero que se encuentran recogidas en un datalist mediante entradas option, según una sintaxis como:

<input type=”text” list=”colores” id=”colorfavorito” name=”colorfavorito”>

<datalist id=”colores”>

<option value=”Rojo”>

<option value=”Anaranjado”>

<option value=”Amarillo”>

<option value=”Verde”>

<option value=”Azul”>

<option value=”Añil”>

<option value=”Violeta”>

</datalist>

Como característica particular, al escribir el primer y sucesivos caracteres, la lista sólo mostrará aquellas entradas que sean acordes a estos; por ejemplo en el código del Listado 13, si se comienza pulsando la letra ‘v’, la lista quedará reducida a ‘Verde’ y ‘Violeta’.

Listado 13:

Input type text con un atributo list asociado

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>

<title>List</title>

</head>

<body>

<h2>Enviar por e-mail el formulario:</h2>

<form action=”MAILTO:[email protected] method=”post” enctype=”text/plain”>

<fieldset style=”color:darkred;width: 500px;background: #eeee00”>

<legend>Color del arcoiris:</legend>

<input type=”text” list=”colores” id=”colorfavorito” name=”colorfavorito”>

<datalist id=”colores”>

<option value=”Rojo”>

<option value=”Anaranjado”>

<option value=”Amarillo”>

<option value=”Verde”>

<option value=”Azul”>

<option value=”Añil”>

<option value=”Violeta”>

</datalist>

</fieldset>

<br />

<input type=”submit” value=”Enviar formulario”>

<input type=”reset” value=”Borrar todo/Reiniciar”></p>

</form>

</body>

</html>

Botones decorados con imágenes (iconos)

Para mejorar todavía más el aspecto de nuestros formularios, podemos utilizar botones con imágenes incrustadas. Muy habitualmente nos interesarán que sean iconos con el texto del botón, como por ejemplo iconos acompañando a los botones de enviar y restaurar. Eso mismo es lo que se codifica en el Listado 14 que, como vemos, se trata sin más de incluir la referencia de la imagen junto con el texto que queramos que acompañe al botón.

Listado 14:

Codificación de botones decorados con imágenes

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” lang=”es-es”>

<title>Botones decorados con iconos</title>

</head>

<body>

<h2>Enviar por e-mail el formulario:</h2>

<form action=”MAILTO:[email protected] method=”post” enctype=”text/plain”>

<fieldset style=”color:darkred;width: 500px;background: #eeee00”>

<legend>Rango de edad:</legend>

<select name=”edad”>

<option value=”menor_12”>Menor de 12</option>

<option value=”12_18”>12 - 18</option>

<option value=”19_25” selected>19 - 25</option>

<option value=”26_40”>26 - 40</option>

<option value=”41_60”>41 - 60</option>

<option value=”61_100”>61 - 100</option>

<option value=”Mayor_100”>Mayor de 100</option>

</select>

</fieldset>

<br />

<button type=”submit” name=”submitButton”>

<img src=”tick.png” width=”16” height=”16” /> Enviar formulario</button>

<button type=”reset” name=”resetButton”>

<img src=”refresh.png” width=”16” height=”16” /> Borrar todo/Reiniciar</button>

</p>

</form>

</body>

</html>

Keyword State Data type Control type

------------------------------------------------------------------------------------------------------------------------------

hidden Hidden An arbitrary string n/a

text Text Text with no line breaks Text field

search Search Text with no line breaks Search field

tel Telephone Text with no line breaks A text field

url URL An absolute IRI A text field

emai l E-mail An e-mail address or list of e-mail addresses A text field

password Password Text with no line breaks (sensitive information) Text field that

obscures data entry

datetime Date and Time A date and time (year, month, day, hour, A date and time

minute, second, fraction of a second) with the control

time zone set to UTC

date Date A date (year, month, day) with no time zone A date control

month Month A date consisting of a year and a month with A month control

no time zone

week Week A date consisting of a week-year number and A week control

a week number with no time zone

time Time A time (hour, minute, seconds, fractional seconds) A time control

with no time zone

datetime-local Local Date A date and time (year, month, day, hour, minute, A date and time

and Time second, fraction of a second) with no time zone control

number Number A numerical value A text field or spinner

control

range Range A numerical value, with the extra semantic that A slider control or

the exact value is not important similar

color Color An sRGB color with 8-bit red, green, and blue A color well

components

checkbox Checkbox A set of zero or more values from a predefined list A checkbox

radio Radio Button An enumerated value A radio button

file File Upload Zero or more files each with a MIME type and A label and a button

optionally a file name

submit Submit Button An enumerated value, with the extra semantic A button

that it must be the last value selected and initiates

form submission

image Image Button A coordinate, relative to a particular image's size, Either a clickable

with the extra semantic that it must be the last image, or a button

value selected and initiates form submission

reset Reset Button n/a A button

button Button n/a A button

NOTE: The missing value default is the Text state.

Tabla 2: Todos los Input type soportados en HTML 5.

(Fuente: http://dev.w3.org/html5/spec/Overview.html#the-input-element)

Nuevos Input Types:

-----------------------------

• email

• url

• number

• range

• Date pickers:

o date

o month

o week

o time

o datetime

o datetime-local

• search

• color

• tel

Nuevos elementos Form:

• datalist

• keygen

• output

Nuevos atributos para <form> e <input>:

a) New form attributes:

• autocomplete

• novalidate

b) New input attributes:

• autocomplete

• autofocus

• form

• form overrides:

o formaction

o formenctype

o formmethod

o formnovalidate

o formtarget

• height and width

• list

• min, max and step

• multiple

• pattern (regexp)

• placeholder

• required