MANUALES:

Validación - Los nuevos input HTML5 para formularios.

Ahorro considerable de código combinando los nuevos input y atributos pero no está estandarizado.

Elementos para formularios en HTML5:

• Datalist
• Keygen
• Output
• Number
• Range
• Tel
• Email
• Color
• Search
• Url
• Date
• Datetime
• Datetime-local
• Month
• Time
• Week

Explicación breve de cada elemento:

Datalist input HTML5

Aglutina varios valores predefinidos que facilitan el auto-completado de un campo tipo input.

Es decir, según el usuario va escribiendo, el navegador abre una lista desplegable con las diferentes opciones a seleccionar. Es muy parecido a un combo o lista.

keygen HTML5

Es un campo para enviar claves en el autentificado web.

Al enviarse el formulario se crean 2 claves, una pública que se envía al servidor y que posteriormente se usará para seguir auntentificándonos en el sistema, y otra privada que se almacena localmente en el navegador.

output HTML5

Esta nueva etiqueta representa el resultado de un cálculo entre los diferentes input de un formulario.

Tened en cuenta que solo representa y no se recoge dicho dato en el envío del formulario. 

number input HTML5

Este input valida automáticamente que los valores introducidos sean numéricos, con el consiguiente ahorro de código en la recepción o validación de los formularios.

range input HTML5

Este input es muy parecido al HTML5 number input, la diferencia radica en que en este caso la única manera de especificar el valor es mediante su slider con sus correspondientes límites.

tel input HTML5

Resulta muy últil en los dispositivos móviles actuales.

El dispositivo móvil detecta que el input es de tipo ‘tel’ y al pulsar en él automáticamente sale el teclado telefónico del móvil para insertar el número en cuestión.

email input HTML5

El elemento por defecto detecta que el campo debe ser rellenado con contenido válido de una cuenta de email, por lo que mostrará una @ en el teclado y hará las verificaciones pertinentes para cumplir los requisitos de una dirección de email.

color input HTML5

Representa una paleta (selector) de colores sin necesidad de añadir plugins ni códigos adicionales como veníamos haciendo hasta ahora. Así con un solo click podemos elegir facílmente un color.

search input HTML5

El campo contendrá valores de búsqueda, así el propio input nos proporciona un dato válido y el teclado del dispositivo móvil mostrará el botón ‘buscar’.

url input HTML5

Se parece bastante a el input tel de HTML5. Este campo cuando se visualiza en dispositivos móviles facilita en el teclado las teclas ‘.’, ‘/’, y ‘.com’.

date input HTML5

Este elemento vale para representar en nuestra web un datepicker o calendario, el formato de la fecha devuelto es ‘AAAA-MM-DD’.

datetime input HTML5

Input similar al anterior solo que este último además de la fecha envía también la hora. El formato de fecha y hora devuelto es el siguiente: ‘AAAA-MM-DDTHH:MMZ’.

Este elemento está sin implementar en casi todos los navegadores y solo funciona a medias en Safari.

datetime-local input HTML5

Más de lo mismo, elemento idéntico al datetime pero sin enviar la zona horaria. El formato devuelto es: ‘AAAA-MM-DDTHH:MM’.

Month input HTML5

Input para representar mes y año con formato ‘AAAA-MM’.

Time input HTML5

Con la inserción de este elemento en un formulario facilitaremos la entrada de datos para horas, el formato de la info enviada es: ‘HH:MM:SS’.

Week input HTML5

Inserción del número de la semana de un año en cuestión. Su formato es ‘YYYY-WNN’ –> ‘2014-W07’.

TOMADO DE: http://www.anerbarrena.com/nuevos-input-html5-3739/

Validacion - DE FORMULARIOS CON HTML5 Y EXPRESIONES REGULARES SIN USO DE JS.

Interesante es el atributo pattern que estudiaremos.

El atributo pattern permite en cualquier campo <input> de tipo texto y utilizando las sobradamente conocidas expresiones regulares delimitar exactamente la sintaxis de una cadena válida.

VALIDACIONES CON EXPRESIONES REGULARES

Según wikipedia: Una expresión regular, a menudo llamada también regex, es una secuencia de caracteres que forma un patrón de búsqueda, principalmente utilizada para la búsqueda de patrones de cadenas de caracteres u operaciones de sustituciones.

Pongamos una serie de condiciones previas para cada uno de los campos:

• Nombre: Admitiremos nombres de cualquier nacionalidad, incluyendo nombres compuestos y la mayoría de normas de acentuación. El número de caracteres será como mínimo 3 y como máximo 32. La verdad es que es una expresión regular ciertamente compleja, pero debemos de tener en cuenta la mayoría de las posibilidades. Esto nos dejaría un código similar a esto:

  <div> <label for="nombre">Nombre</label> <input type="text" name="nombre" id="nombre" pattern="[a-zA-ZàáâäãåąčćęèéêëėįìíîïłńòóôöõøùúûüųūÿýżźñçčšžÀÁÂÄÃÅĄĆČĖĘÈÉÊËÌÍÎÏĮŁŃÒÓÔÖÕØÙÚÛÜŲŪŸÝŻŹÑßÇŒÆČŠŽ∂ð ,.'-]{2,48}" required/> </div>

• Apellidos: Del mismo modo aceptaremos cualquier carácter independientemente de la nacionalidad, con una tamaño entre 2 y 64 caracteres.

  <div> <label for="apellidos">Apellidos</label> <input type="text" name="apellidos" id="apellidos" pattern="[a-zA-ZàáâäãåąčćęèéêëėįìíîïłńòóôöõøùúûüųūÿýżźñçčšžÀÁÂÄÃÅĄĆČĖĘÈÉÊËÌÍÎÏĮŁŃÒÓÔÖÕØÙÚÛÜŲŪŸÝŻŹÑßÇŒÆČŠŽ∂ð ,.'-]{2,64}" required/> </div>

• Email: HTML5 ya provee de un tipo de campo email, aunque su validación es bastante pobre. Podríamos complementarla con una expresión más compleja.

  <div> <label for="correo">Correo electrónico</label> <input type="email" name="correo" id="correo" pattern="^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" required/> </div>

• Usuario: Vamos a solicitar para el usuario de acceso al servicio una cadena de letras minúsculas, con un número opcional  de hasta dos dígitos al final. La cadena completa tendrá entre 5 y 12 caracteres.

  <div> <label for="usuario">Usuario</label> <input type="text" name="usuario" id="usuario" pattern="^([a-z]+[0-9]{0,2}){5,12}$" required/> </div>

Password: Por último vamos a solicitar una cadena como contraseña, la cual podrá contener letras mayúsculas, minúsculas, números y los caracteres !?-. Su tamaño: entre 8 y 12 caracteres.

<div> <label for="pass">Contraseña</label> <input type="password" name="pass" id="pass" pattern="[A-Za-z0-9!?-]{8,12}" required/> </div>

PSEUDOCLASES EN CSS PARA LA VALIDACIÓN

En CSS3 se añadieron dos pseudoclases relacionadas con la validez de los campos: :valid e :invalid que nos van a permitir dotar de mayor visibilidad a los errores y aciertos de los usuarios al completar los formularios. Por supuesto con un soporte desigual entre los distintos navegadores como verás en el siguiente gráfico:

Añadiendo un poco de CSS podemos hacer que sea un poco más vistoso el resultado válido al introducir un campo.

input:valid { background-color: #BBFFF0; }

Tomado de: 

https://oscargascon.es/validacion-de-formularios-con-html5-y-expresiones-regulares-sin-uso-de-js-utilizacion-de-css-y-fontawesome-para-mostrar-campos-validos-en-formularios/