Formularios Html5 [I]

Html5 incorpora nuevos tipos de campos y atributos para formularios, si con los nuevos tags mencionados en entradas previas la idea era mejorar la estructura de un documento, con estos nuevos elementos la idea es poder crear formularios más amigables.

Los nuevos atributos para un formulario son:

• autofocus Sirve para indicar que un determinado campo es el que recibe el focus por defecto.
• placeholder Su función es mostrar una sugerencia o ejemplo para el contenido de un campo.
• required Indica que un campo es requerido, es decir obligatorio.
• pattern Indica un patrón con una expresion regular, su función validar el contenido del campo.

El atributo autofocus se indica en elementos para indicar al navegador que al cargar el formulario ese elemento en particular debe recibir el focus automaticamente, por ello este atributo solo se debe usar una vez, en un sólo campo por página. [Soporte: Chrome 3, Firefox 4, safari 4 y Opera 10]

El atributo placeholder se puede usar en elementos input o textarea para mostrar un ejemplo del tipo de contenido de ese campo, por ejemplo si tenemos un campo para la dirección del usuario podemos ejemplificarlo así
<input type="text" name="direcion" placeholder="Calle America #675">
y se verá:
Calle:
(Si tu navegador implementa placeholder veras "Calle America #675")
Esto puede ser útil para ayudar al usuario en el llenado de campos con contenidos que siguen formatos especiales como RFC, CURPS (en México) u otros.

Importante decir que placeholder sólo sirve para ejemplificar un formato o contenido pero no validará lo que escribe finalmente un usuario. [Soporte: Chrome 5, Firefox 4, safari 4 y Opera 11]

El atributo required se debe usar en campos que sean obligatorios o requeridos, con esto se le esta diciendo al navegador que no envie (submit) el formulario si un campo marcado como required esta vacío. [Soporte: Chrome 8, Firefox 4 y Opera 11]

Hablando de validar campos, el atributo pattern sirve para validar contenido de un campo mediante una expresión regular ejemplo:
<input name="telph" required pattern="[0-9]{10}" />

(Si tu navegador implementa pattern y required no te dejará enviar el formulario hasta que escribas un numero de diez digitos) [Soporte: Chrome 5, Firefox 5 y Opera 10.6]

Además de los nuevos atributos en Html5 tenemos los siguientes tipos de campo.

Los nuevos tipos de campos en un formulario son:

• number Control para elegir un valor numerico de entre un rango y con un tipo de inc/dec-remento especifico.
• range Control (slider) para elegir un valor de entre un rango dado.
• 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.

Para utilizar alguno de dichos elementos hay que declararlo en el type de un control input de un formulario.

number El uso de number es: <input type="number" min="2" max="28" step="2" name="mi_number" value="8"> Donde min es el valor mínimo y max el máximo, el atributo step sirve para indicar el valor de icremento o decremento deseado ya que este control se muestra como un selector donde se puede elegir entre un rango indicando saltos de 1, 2 3 o N, este N es el valor de step.
[Soporte Chrome 5, Opera 10.1 e IOS]

range El uso de range es así: <input type="range" min="0" max="35" name="mi_valor" value="7"> Donde min es el valor mínimo y max el máximo, respectivamente, de nuestro rango, value el valor por defecto. El control se muestra como un slider y para elegir un valor se debe posicionar la barra en el valor deseado. [Soporte Chrome 5, Safari 4 y Opera 10.1]

Dejo para una entrada posterior los elementos email, url, tel, date, datetime, color, list y search

Fuentes: HTML5 & CSS3, autor Brian P. Hogan, editorial Pragmatic Bookshelf.
http://html5tutorial.info/