Ver más en http://www.francescperez.net/templates/original/html/si/articulos/art_5_formularios.html

1. API Formularios
Francesc Pérez Fdez
1.
Formularios en HTML
•
La Web 2.0 está enfocada hacia el usuario. Los formularios web permiten a los usuarios insertar datos, tomar
decisiones, comunicar información y cambiar el comportamiento de una aplicación.
•
El elemento <form> permite crear la estructura del cuestionario. Este elemento admite otros dos atributos
nuevos:
Ø Autocomplete: puede tomar dos valores, on (defecto) y off. Cuando está en off los usuarios tendrán la
función de autocompletar desactivada, sin mostrar entradas previas. Puede ser insertado en cualquier
elemento input.
Ø Novalidate: los formularios en HTML5 son autovalidados. Para evitar este comportamiento podemos
usar este atributo. Para lograr lo mismo con los elemento input existe otro atributo llamado
formnovalidate. Ambos son atributos booleanos.
•
El elemento input permite al usuario introducir datos en la web. El atributo type determina qué clase de
entrada es esperada desde el usuario: text, password, submit, search, url, tel, number, range, date, week,
month, time, datetime, datetime-local, color.
•
Además de los elementos y atributos mencionados, HTML5 incorpora otros nuevos. Los atributos más
relevantes son: required, multiple, autofoucs, placeholder, pattern, y form. Los elementos más relevantes son:
datalist, progress, meter, output.

2. API Formularios
2.
Francesc Pérez Fdez
Elemento Type
Autovalidación
Autocompletar
Formulario.html

3. API Formularios
3.
Francesc Pérez Fdez
Nuevos atributos
Solo admite un nombre de 8 letras compuesto por
letras minúsculas del abecedario. Case-sensitive.
Podemos introducir múltiples direcciones electrónicas separadas
por una coma.

4. API Formularios
4.
Francesc Pérez Fdez
Nuevos elementos

5. API Formularios
Francesc Pérez Fdez
5.
API Forms: librerías JS para formularios
•
Los formularios de HTML5 cuentan con su propia API para personalizar todos los aspectos de procesamiento
y validación. Podemos crear campos especiales como pattern, pero cuando se trata de aplicar mecanismos
complejos de validación (combinando campos o comprobando los resultados de un cálculo) deberemos
recurrir a esta API.
•
Mecanismos de validación complejos:
Ø Método setCustomValidity(mensaje): con este método podemos personalizar el mensaje que se
mostrará por pantalla cuando un formulario es enviado.
El código comienza a funcionar cuando el evento load
es disparado. La función iniciar es llamada para
responder al evento. Esta función crea dos escuchas
para ambos elementos input y llama a la función
validación. El mensaje declarado para el error con este
método será visible sólo cuando el usuario intente
enviar el formulario.

6. API Formularios
5.
Francesc Pérez Fdez
API Forms: librerías JS para formularios
Ø
Evento invalid: cuando el usuario hace clic sobre el botón ingresar, un evento invalid será disparado
desde cada campo inválido y el color de fondo de esos campos será cambiado a rojo por la función
validacion().
Evento disparado
Método que solicita
Método tradicional
cuando el contenido al navegador que
de envío de
de los campos es
realice el proceso
formularios
modificado
de validación.
Letras de la A a la Z
Letras de la a a la z
Mínimo tres letras
Retorna una
referencia al
elemento input
inválido y cambia el
color de fondo
Longitud max. 10
letras

7. API Formularios
5.
Francesc Pérez Fdez
API Forms: librerías JS para formularios
Ø
En tiempo real: hasta el momento los campos son solo validados cuando el botón ingresar es
presionado. Una nueva escucha fue agregada para el evento input sobre el formulario. Cada vez que
el usuario modifica un campo, escribiendo o cambiando su contenido, la función controlar() es
ejecutada para responder a este evento.

8. API Formularios
Francesc Pérez Fdez
5.
API Forms: librerías JS para formularios
•
El objeto ValidityState retorna el estado de un elemento considerando cada uno de sus posibles estados de
validación. Existen ocho posibles estados de validación: elemento.validity.estado
Ø valueMissing: true cuando el atributo required fue declaro y el campo está vacío
Ø typeMissingmatch: true cuando la sintaxis utilizada en el campo no es la correcta
Ø paterrnMismatch: true cuando la entrada no corresponde con el patrón provisto por el atributo pattern
Ø tooLong: true cuando el maxlength fue declarado y el tamaño del campo excede dicho valor
Ø rangeUnderflow: true cuando el min fue declarado y el tamaño del campo es inferior a dicho valor
Ø rangeOverflow: true cuando el max fue declarado y el tamaño del campo es superior a dicho valor
Ø stepMismatch: true cuando el step fue declarado y su valor no corresponde con atributos como min,
max, lenth.
Ø customError: true cuando declaramos un error personalizado usando el método setCustomValidity()
Ø Valid: true cuando el resto de estados de validación son false.
•
Ampliando el código anterior con las siguientes líneas en la función enviar podemos ver el uso de los
diferentes estados de validación.