Referencia rápida

Los formularios constituyen el principal medio de comunicación entre usuarios y aplicaciones web. HTML5 incorpora nuevos tipos para el elemento <input>, una API completa para validar y procesar formularios, y atributos para mejorar esta interface.

Tipos

Algunos de los nuevos tipos de campo introducidos por HTML5 tienen condiciones de validación implícitas. Otros solo declaran un propósito para el campo que ayudará a los navegadores a presentar el formulario en pantalla.

  • email: tipo de campo que valida la entrada como una dirección de email.
  • search: da información al navegador sobre el propósito del campo (búsqueda) para ayudar a presentar el formulario en plantilla.
  • url: este tipo de campo valida la entrada como una dirección web.
  • tel: este tipo de campo da información al navegador sobre el propósito del campo (número
    telefónico) para ayudar a presentar el formulario en pantalla.
  • number: este tipo de campo valida la entrada como un número. Puede ser combinado con
    otros atributos (como min, max y step) para limitar los números permitidos.
  • range: este tipo de campo genera un nuevo control en pantalla para la selección de números. La entrada es limitada por los atributos min, max y step. El atributo value establece el valor inicial para el elemento.
  • date: este tipo de campo valida la entrada como una fecha en el formato año-mes-día.
  • month: este tipo de campo valida la entrada como una fecha en el formato año-mes.
  • week: este tipo de campo valida la entrada como una fecha en el formato año-semana
    donde el segundo valor es representado por una letra W y el número de la semana.
  • time: este tipo de campo valida la entrada como una hora en el formato hora:minutos:segundos. También puede tomar otras sintaxis como hora:minutos.
  • datetime: este tipo de campo valida la entrada como fecha y hora completa, incluyendo
    zona horaria.
  • datetime-local: este tipo de campo valida la entrada como una fecha y hora completa, sin
    zona horaria.
  • color: este tipo de campo valida la entrada como un valor de color.

Atributos

Nuevos atributos fueron también agregados en HTML5 para mejorar la capacidad de los formularios y ayudar al control de validación.

  • autocomplete: este atributo especifica si los valores insertados serán almacenados para
    futura referencia. Puede tomar dos valores: on y off.
  • autofocus: este es un atributo booleano que enfoca el elemento en el que se encuentra
    cuando la página es cargada.
  • novalidate: este atributo es exclusivo para elementos <form>. Es un atributo booleano
    que establece si el formulario será validado por el navegador o no.
  • formnovalidate: este atributo es exclusivo para elementos de formulario individuales. Es un atributo booleano que establece si el elemento será validado por el navegador o no.
  • placeholder: este atributo ofrece información que orientará al usuario sobre la entrada
    esperada. Su valor puede ser una palabra simple o un texto corto, y será mostrado
    como una marca de agua dentro del campo hasta que el elemento es enfocado.
  • required: este atributo declara al elemento como requerido para validación. Es un atributo
    booleano que no dejará que el formulario sea enviado hasta que una entrada para el campo sea provista.
  • pattern: este atributo especifica una expresión regular contra la cual la entrada será
    validada.
  • multiple: este es un atributo booleano que permite ingresar múltiples valores en el mismo
    campo (como múltiples cuentas de email, por ejemplo). Los valores deben ser separados por coma.
  • form: este atributo asocia el elemento al formulario. El valor provisto debe ser el valor del
    atributo id del elemento <form>.
  • list: este atributo asocia el elemento con un elemento <datalist> para mostrar una lista
    de posibles valores para el campo. El valor provisto debe ser el valor del atributo id
    del elemento <datalist>.

Elementos

HTML5 también incluye nuevos elementos que ayudan a mejorar y expandir formularios.

  • <datalist>: este elemento hace posible incluir una lista de opciones predefinidas que será
    mostrada en un elemento <input> como valores sugeridos. La lista es construida con el
    elemento <option> y cada opción es declarada con los atributos value y label. Esta
    lista de opciones se relaciona con un elemento <input> por medio del atributo list.
  • <progress>: este elemento representa el estado en la evolución de una tarea (por ejemplo,
    una descarga).
  • <meter>: este elemento representa una medida, como el tráfico de un sitio web.
  • <output>: este elemento presenta un valor de salida para aplicaciones dinámicas.

Métodos

HTML5 incluye una API específica para formularios que provee métodos, eventos y propiedades. Algunos de los métodos son:

  • setCustomValidity(mensaje): este método nos permite declarar un error y proveer un mensaje de error para un proceso de validación personalizado. Para anular el error, debemos llamar al método con una cadena de texto vacía como atributo.
  • checkValidity(): este método solicita al navegador iniciar el proceso de validación. Activa el
    proceso de validación provisto por el navegador sin la necesidad de enviar el
    formulario. Este método retorna true (verdadero) si el elemento es válido.

Eventos

Los eventos incorporados para esta API son los siguientes:

  • invalid: este evento es disparado cuando un elemento inválido es detectado durante el
    proceso de validación.
  • forminput: este evento es disparado cuando un formulario recibe la entrada del usuario.
  • formchange: este evento es disparado cuando un cambio ocurre en el formulario.

Estado

API Forms provee un grupo de atributos para controlar estados en un proceso de validación personalizado.

  • valid: este estado es un estado de validación general. Retorna true (verdadero) cuando
    ninguno de los estados restantes es true (verdadero), lo que significa que el elemento
    es válido.
  • valueMissing: este estado es true (verdadero) cuando el atributo required fue incluido en el elemento y el campo está vacío.
  • typeMismatch: este estado es true (verdadero) cuando la entrada no es el valor esperado
    de acuerdo al tipo de campo (por ejemplo, cuando se espera un email o una URL).
  • patternMismatch: este estado es true (verdadero) cuando la entrada no es un valor admitido por la expresión regular especificada con el atributo pattern.
  • tooLong: este estado es true (verdadero) cuando el largo de la entrada es mayor que el
    valor especificado en el atributo maxlength.
  • rangeUnderflow: este estado es true (verdadero) cuando la entrada es menor que el valor
    declarado para el atributo min.
  • rangeOverflow: este estado es true (verdadero) cuando la entrada es mayor que el valor
    declarado para el atributo max.
  • stepMismatch: Este estado es true (verdadero) cuando el valor declarado para el atributo
    step no corresponde con los valores en los atributos min, max y value.
  • customError: este estado es true (verdadero) cuando un error personalizado fue
    declarado para el elemento.