Formularios Html5 [II]

Continuacion de Formularios Html5 [I] En la entrada I de este tema comente sobre atributos para elementos de formularios y los campos number y range, continuemos...

Tipos de campos Html5 en un formulario:

• email Control para capturar direcciones de correo electrónico.
• url Control para capturar URLs.
• tel Control para capturar numeros telefonicos.
• date Control para elegir fechas, segun la definición soporta día, mes o semana.
• datetime Control para elegir fecha y hora, segun la definición soporta día y hora, DyH local o sólo hora.
• color Control para especificar un color.
• list Control tipo combobox, combinación entre cuadro de texto y lista desplegable.
• search Control para buscar palabras claves. 

Veamos.

email un campo para direcciones de correo electrónico, la especificacion dice que puede ser para una o varias direcciones. Se declara:
<input type="email" name="correoe">, los dispositivos mobiles son los que más provecho tienen al reconocer este tipo de campo ya que ante ello el teclado cambiará para facilitar la introducción de una direccion de correo electrónico.

E-mail:

[Soporte Firefox 5, Chrome 5, Opera 10.1 e IOS]

url un campo para direciones URL, se declara:
<input type="url" name="theurl">

Personal Web:

[Soporte Firefox 5, Chrome 5, Opera 10.1 e IOS] Similar al caso del tipo email los dispositivos mobiles pueden configurar su teclado virtual al reconocer este tipo de campo.

tel un campo para un numero telefonico, se declara:
<input type="tel" name="yourtel"> [Soporte Opera 10.1 e IOS]

date se declara: <input type="date" name="fecha"> Idealmente el control se mostrara como un date picker, pero directamente implementado por el navegador, sin JS ni otras tecnologias. [Soporte Chrome 5, Safari 5, Opera 10.1 e IOS] Se supone que dichos navegadores reconocen el type="date" pero hasta este momento solo Opera muestra el control como un date picker, así se ve en Opera 10.62

datetime como uno de los tipos de columna en bases de datos, se declara: <input type="datetime" name="fecha_y_hora"> Similar al date con el extra del dato de hora o tiempo. [Soporte Chrome 5, Safari 5, Opera 10.1] Al igual que con el type="date" hasta este momento unicamente Opera muestra el control como un date picker, así es como se ve en Opera 10.62

Otras formas de uso del control son:
<input type="week" name="semana"> Para manejar el dato como semana.
<input type="month" name="mes"> Para manejar el dato como mes.
<input type="time" name="hora"> Para manejar el dato como hora.
<input type="datetime-local" name="hora"> Para manejar el dato como fecha y hora local.
En opera se ve muy nice la implementación de cada caso. Además de lo anterior se pueden usar los atributos min y max para indicar la fecha (o tiempo) mínimo y máximo respectivamente.

color ideado para campos donde se han de especificar colores, se declara: <input type="color" name="one_color"> [Soporte Chrome 5 y Safari 5] Al decir del soporte mencionado es unicamente que los navegadores reconocen color como tipo, más no muestran un control especial para seleccionar un color de una paleta.

list se puede decir que es como un select pero editable, se declara en dos partes, el input y su datalist, ejemplo:
<input type="list" list="algunos_leng" name="lenguajes">
<datalist id="algunos_leng">
<option value="Cpp">
<option value="Java">
<option value="Php">
<option value="Sql">
</datalist>
Y se ve así [Soporte Firefox 5 y Opera 10]

search ideado para campos de busqueda, se declara:
<input type="search" name="busqueda"> opcionalmente se puede indicar el atributo results, el cual sirve para indicar un numero de historicos que se desea sea mostrado. [Soporte Chrome 8 y Safari 5]
Busqueda:
Busqueda: (Muestra un historico con los ultimos 4 busquedas, pruebalo en el navegador Safari)

Fuentes: HTML5 & CSS3, autor Brian P. Hogan, editorial Pragmatic Bookshelf.
http://html5tutorial.info
http://www.genbetadev.com/desarrollo-web/introduccion-a-los-formularios-de-html5-ii