Validación de un formulario web

En ejemplo te mostraré como crear la validación de un formulario, con etiquetas de html5 y sus nuevos atributos y como manipular estos atributos con ayuda de CSS3.

Como se aprecia en la imagen, el formulario indica cuales son los campos requeridos, el formato que deben de llevar cada uno de ellos, para poder ser aceptados, veamos como hacer cada uno de los campos.

todas la etiquetas para el ingreso de datos que se utilizan en este ejemplo son de tipo <input/>.

"Ingresa tu Nombre"

Esta etiqueta es de tipo text y mediante el atributo autofocus indicamos que el cursor debe de iniciar por defecto en ese campo al cargar la pagina, al poner la palabra required dentro de las etiquetas input forzamos al formulario a no ser enviado mientras este campo no se encuentra debidamente rellenado, con el atributo title, generamos una texto que aparecerá cuando acerquemos el puntero del ratón al campo, con el atributo pattern establecemos el patrón con el que deberá cumplir el texto que ingresemos para que este sea aceptado y por último con el atributo autocomplete y el valor off, se le indica al navegador que no guarde los valores que se ingresen en este campo, para que no aparezcan en usos consecutivos del mismo como texto auxiliares.

A continuación vemos una etiqueta label, la cual solo tiene el texto ::after, esto lo dejaremos por el momento hasta llegar a la hoja de estilos, en la cual igual se muestra como poner el icono de usuario dentro de la etiqueta input.

"Ingresa tus Apellidos"

Este campo no tiene mayor relevancia al ser de tipo opcional, para lo cual utilizamos en atributo placeholder para hacerle esta indicación al usuario.

"Contraseña"

En este campo utilizamos el tipo password, para indicarle al navegador que no muestre el texto que estamos escribiendo dentro, mediante el atributo pattern, indicamos que solo va aceptar una cadena de diez valores numéricos para poder ser aceptado.
A continuación vemos una etiqueta label, la cual solo tiene el texto ::after, esto lo dejaremos por el momento hasta llegar a la hoja de estilos.

"Teléfono"

Esta etiqueta es de tipo tel, y mediante el atributo pattern indicamos con que formato debe cumplir el teléfono ingresado, para ser aceptado.
A continuación vemos una etiqueta label, la cual solo tiene el texto ::after, esto lo dejaremos por el momento hasta llegar a la hoja de estilos.

Omitiré los dos siguientes campos ya que son muy parecidos a los ya explicados.

"e-mail"

"Fecha de Nacimiento"

"Menciona un País"

Esta etiqueta se vuelve un tanto especial al utilizar el atributo list, ya que esta etiqueta se basa de la etiqueta auxiliar datalist, para obtener la fuente de datos que será mostrada dentro del campo de texto.
Al utilizar el atributo list, hacemos que el campo de texto sea capaz de mostrar una lista de datos por defecto que ira empatando su contenido conforme vamos escribiendo dentro, en el valor de este atributo indicamos el nombre de la lista donde se tendrán que buscar los datos, en la etiqueta datalist en su atributo id debemos de asignar el mismo nombre que dimos como valor en el atributo list.

"Elige un Color"

En este apartado del formulario utilizamos un formulario interno, que se encarga de modificar el valor de una etiqueta de tipo output, la cual presenta el código de color que se selecciona, para hacer esto en la etiqueta form, indicamos el atributo oninput mediante el cual podemos asignar un comportamiento, que responderá de manera automática al modificar un valor en este caso al seleccionar un color de la etiqueta input de tipo color.

El formato de del atributo oninput del form es el siguiente:

[nombre de la etiqueta output].valor = [nombre del campo disparador].valor

"Ingreso de Archivos"
                                             (Solo PDF)

En este campo utilizamos tipo file, para hacer que nuestro campo permita seleccionas mas de un archivo, esto lo logramos con el atributo multiple, y mediante el atributo accept, le indicamos a buscador de archivos que solo muestre los archivos con extensión .pdf, que se encuentren dentro del sistema.

"Tabla de Multiplicar"
etiqueta <output/>

La tabla de multiplicar es muy parecida al selector de color, así que omitiré la explicación de este campo.

Botones del Formulario

Hoja de Estilos

Ejemplo de Formulario Valido 

Sí deseas descargar este ejemplo da clic aquí.