Validaciones en HTML5

Hoy vamos a ver como se validan formularios solamente empleando html5, ya que entre sus bondades se encuentran esta opción con muchas facilidades para que nuestros formularios estén controlados desde el cliente.
Aun así no esta mal que haya otro control desde el servidor, como he explicado a lo largo del tema 6 de mi tutorial de PHP, donde se pueden tratar de muchas otras formas.
Pero vamos a lo importante en este articulo las validaciones en HTML5, supondremos que todos lo que nos encontramos leyendo estas líneas sabemos o tenemos nociones de html5.
Hasta la aparición de html5, la validación en cliente debía de hacer por código javascript, que da buenos resultados, pero ahora se puede hacer de forma mucho más sencilla directamente en el código html, con tan solo utilizar algunos atributos

type

Con este atributo podemos seleccionar que tipo de entrada queremos que realice el usuario e imponer un pequeño control inicial a nuestro formulario. Para ver una lista completa de los tipos que se pueden utilizar visita mi tabla periódica de los elementos html5 .

required

Este atributo puesto en los inputs es muy útil y de muy fácil uso. Con él se provoca que cuando se le da a enviar el formulario aparezca una nube diciendo el error que se ha cometido y además en Chrome aparece lo que hayamos colocado dentro de una etiqueta title, como información adicional.

En este ejemplo vemos su funcionamiento:

<form>
 <p> Introduzca su nombre
 <input title="introduzca su nombre" type="text"  required></p>
 <p>
 <input type="submit" value="enviar">
</form>

Que se ve así en los diferentes navegadores:

pattern

Con este atributo es donde ya podemos especificarle a html5 como tiene que ser la entrada, ya que en su valor ponemos la expresión regular que deseemos y de ese modo podemos forzar a que la entrada del tipo que deseamos.

Por ejemplo si queremos colocar un email que tenga su propia expresión regular (con solo poner una arroba se detecta como mail por defecto) debemos de hacer lo siguiente:

<form>
 <p> Introduzca su nombre
 <input title="introduzca su nombre" type="text"  required></p>
 <p>Introduzca su email
 <input title="nombre@servidor.dominio" type="email" pattern="/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([.]\w+)*/" required></p>
 <input type="submit" value="enviar">
</form>

Hay que tener en cuenta que cuando hay un patern, el title sí es tomado en los tres navegadores, pudiendo mostrar de este modo el patron de ejemplo del input:

Es más, incluso si se pasa el ratón por encima del input, aparece un pequeño dialogo en los tres navegadores con el title.

¿Donde conseguir expresiones regulares?

En un principio pensé en poner aquí una lista de expresiones regulares, pero cuando hacía la documentación para el articulo encontré esta gran web especializada en ellas, todas descritas para html5 y aumentando en número, por lo que os recomiendo que la utilicéis.

HTML5 PATTERN

Nota: el código del ejemplo solo muestra el formulario, pero esta dentro de un archivo html completo, enlazado a un archivo css.