Manual Formularios en HTML5



Formularios en HTML5


Requisitos
Antes de empezar, debemos aclarar que, al igual que otras nuevas funcionalidades de HTML5, los nuevos tipos, atributos o elementos, no están soportados por todos los navegadores.

Segundo punto a considerar, todos los elementos que vamos a ver son exclusivos de HTML5, asi que asegurate de colocar en la primera linea de tu documento, 

LoNuevo
HTML5 viene al rescate de los desarrolladores web, trayendo nuevos tipos de campos, con opciones de validación automática según el tipo. Nuevos atributos, para definir campos como obligatorios, activar placeholders o especificar acciones distintas para distintos botones. Nuevos elementos para incluir en los formularios, como barras de porcentaje entre otros elementos.

Tipos
Email
Quizá uno delos campos más usados en los formularios, ahora tiene su propio tipo y una validación realizada automáticamente por el navegador. Me voy a adelantar y voy a agregar también un nuevo atributo llamado required



Con una sola línea de código tenemos un formulario con un campo obligatorio que envía al servidor una dirección de correo electrónico con un formato valido.Final del formulario
URL

El mismo concepto que para el tipo email, el tipo url verifica que la entrada sea un Universal Resource Locator valido. En el caso de chrome, valida que el URL empiece especificando el protocolo. Me voy a adelantar nuevamente y voy a agregar un atributo llamado placeholder.


En este ejemplo,el placeholder ayuda al usuario a entender el formato de entrada que se espera.



Final del formulario
Tel

Este nuevo tipo hace referencia a los números de teléfono. En realidad no hay ningún tipo de validación asociada a este campo, ya que los números de teléfono tienen distintos patrones en distintos países. En algunos navegadores parasmartphones, al seleccionar este campo, el teléfono despliega un tecladonumérico. Vamos a adelantarnos y mostrar el atributo pattern para hacer nuestras propias validaciones y maxlength para forzar el numero de caracteres.





En este ejemplo, vamos a validar números de teléfono móvil de España, estos deben empezar por el numero 6 y tienen en total 9 dígitos. Podemos incluso separar el numero en varios trozos, y forzar el código de país, el número de dígitos que puedes escribir en cada campo esta truncado gracias a maxlength. La expresión regular lo que quieredecir es que "cod" debe empezar con un 6 y le siguen 2 dígitos entre 0 y 9. En el caso de "num", son 6 dígitos entre 0 y 9.






Final del formulario
Search

Este nuevo tipo se inspira en los buscadores, agregando estilos para mostrar una lupa, o una X para cancelar la búsqueda. Permite también guardar un historial de los valores utilizados y mostrarlos en una lista. El atributo result indicacuantas 'ayudas' vamos a mostrar mientras el usuario escribe.



Cada vez que haces una búsqueda esta queda almacenada y el navegador la mostrará luego como sugerencia.


Final del formulario
Number

Este tipo permite controlar campos en los que vamos a introducir números. Permite especificar un rango con min y max y un nivel de incremento con step. Otroaspecto interesante de este campo, es que si introducimos números muy grandes, los redondea y envía el número expresado en notación científica. Podemos aumentar o disminuir el valor con las teclas arriba/abajo o con la rueda del mouse.