Formularios

Crea formularios bien organizados y etiquetados para que sean accesibles.

Contenido

Etiquetas de formulario
Agrupar controles
Instrucciones
Validación de datos
Notificaciones de usuario

Etiquetas de formulario

Las etiquetas sirven para identificar los controles del formulario. Siempre debemos incluir la etiqueta, aunque en algunos casos puede ocultarse para que únicamente sea accesible a los lectores de pantalla.

Etiqueta visible

Utiliza el elemento label para asociar la etiqueta con el control del formulario, usando los atributos for y id con el mismo valor.

Ejemplo: Formulario con etiqueta visible

<label for="name">Nombre</label>
<input type="text" id="name">

Etiqueta oculta

Existen situaciones donde la función del control del formulario es visualmente explícita, sin necesidad de añadir una etiqueta. En ese caso podemos ocultar el elemento label o no incluirlo, pero debemos ofrecer una alternativa para las tecnologías de apoyo.

En el siguiente ejemplo, la función del formulario se intuye claramente con el texto del botón y, por tanto, podemos ocultar visualmente la etiqueta.

Ejemplo: Formulario con etiqueta oculta

<label for="search" class="visually-hidden">Buscar: </label>
<input type="text" id="search">
<button type="submit">Buscar</button>

Una alternativa es incluir el atributo aria-label en lugar de la etiqueta label.

Ejemplo: Formulario con aria-label

<input type="text" aria-label="Buscar">
<button type="submit">Buscar</button>

Etiqueta en botones

Si usamos el elemento button la etiqueta es el texto del botón.

<button type="submit">Enviar</button>

Y si usamos el elemento input la etiqueta es el texto del atributo value.

<input type="submit" value="Enviar">

Agrupar controles

Agrupar los controles relacionados facilita la comprensión y la interacción con el formulario.

Para agrupar controles podemos utilizar el elemento fieldset, junto al elemento legend que identifica o describe al grupo.

Ejemplo: Agrupar controles con fieldset

<fieldset>
  <legend>Datos de envío</legend>
  <label for="name">Nombre</label>
  <input type="text" id="name">
  <label for="address">Dirección</label>
  <input type="text" id="address">
  <label for="city">Ciudad</label>
  <input type="text" id="city">
</fieldset>

Nota: Los controles de tipo radio y checkbox deberían agruparse siempre para ser tratados semánticamente como un único grupo.

Una alternativa a fieldset y legend para agrupar controles relacionados es utilizar WAI-ARIA. Para ello agrupamos los controles con role=group y etiquetamos el grupo usando aria-labelledby con un id.

Ejemplo: Agrupar controles con WAI-ARIA

<div role="group" aria-labelledby="shipping-info">
  <h3 id="shipping-info">Datos de envío</h3>
  <label for="name">Nombre</label>
  <input type="text" id="name">
  <label for="address">Dirección</label>
  <input type="text" id="address">
  <label for="city">Ciudad</label>
  <input type="text" id="city">
</div>

Instrucciones

Proporciona instrucciones para ayudar a los usuarios a rellenar los formularios.

Instrucciones generales

Son instrucciones que afectan a todo el formulario. Pueden indicar qué entradas son obligatorias, el formato de datos, o cualquier otra información adicional.

El texto de las instrucciones debe incluirse antes de la etiqueta <form> debido a que algunos lectores de pantalla no leen los textos que no formen parte de elementos de formulario, cuando están dentro de <form>.

Instrucciones en línea

Son instrucciones relevantes que se incluyen junto al control del formulario.

La forma más simple de proporcionar instrucciones en línea es incluirlas dentro de la etiqueta label.

Ejemplo: Instrucciones dentro de label

<label for="email">Email (obligatorio)</label>
<input type="email" id="email">

Otra forma de proporcionar instrucciones es usando el atributo aria-labelledby.

Ejemplo: Instrucciones usando WAI-ARIA

<label for="email">Email</label>
<input type="email" id="email" aria-labelledby="emailLabel">
<span id="emailLabel">(obligatorio)</span>

El atributo placeholder nos permite incluir un texto dentro del campo de formulario que desaparece al empezar a escribir o, en algunos navegadores, al enfocar el campo.

Ejemplo: Instrucciones usando placeholder

<label for="email">Email</label>
<input type="email" id="email" placeholder="usuario@empresa.com">

Este atributo es muy práctico pero presenta algunos problemas de accesibilidad:

Los lectores de pantalla no tratan placeholder como una etiqueta.
Al desaparecer la información puede que el usuario no recuerde las instrucciones proporcionadas.
Los navegadores suelen usar un tono más claro para el texto que no suele cumplir los requisitos mínimos de contraste (aunque esto se puede solucionar cambiando el color con CSS).

Nota: El atributo placeholder no debería sustituir a la etiqueta del control de formulario. Para evitar información redundante se puede ocultar la etiqueta visualmente.

Validación de datos

Antes de enviar los datos de un formulario debemos validarlos y, si existe algún error, notificarlo al usuario.

Los campos obligatorios deben identificarse claramente mediante etiquetas.

En cuanto a código, podemos indicar que el campo es obligatorio añadiendo el atributo required. Si el campo queda vacío, al pulsar el botón de envío el navegador presentará un mensaje de aviso indicando que debe completarse.

Ejemplo: Validar campos obligatorios

<label for="name">Nombre (obligatorio)</label>
<input type="text" id="name" required>
<button type="submit">Enviar</button>

Nota: Existe un atributo WAI-ARIA para indicar que un control es obligatorio: aria-required. En teoría no es necesario si ya existe el atributo required.

HTML proporciona atributos para los tipos de datos más comunes de un formulario (email, fecha, url, números etc.). Estos atributos permiten validar el formato de los datos insertados y, en algunos casos, presentan controles específicos.

Ejemplo: Validar tipos de datos

<label for="email">Email</label>
<input type="email" id="email">

<label for="date">Fecha</label>
<input type="date" id="date">

<label for="num">Número</label>
<input type="number" id="num">

Algunos tipos de datos pueden incluir parámetros adicionales como valores mínimo y máximo, longitud máxima de caracteres o el rango de aumento o disminución de un valor.

El atributo de HTML pattern permite validar los datos de un campo de entrada usando expresiones regulares.

Ejemplo: Validar patrones de datos

<label for="contrs">Contraseña<br>
<span>(Debe contener al menos un número o un carácter
especial y mínimo 8 caracteres).</span>
</label>
<input type="text" id="contrs"
pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n]).*$" required>
<button type="submit">Enviar</button>>

En el ejemplo anterior, si la contraseña no cumple los requisitos, el navegador muestra un mensaje indicando que el formato utilizado debe coincidir con el solicitado.

Nota: Además de la validación en el lado del cliente, siempre debe realizarse la validación en el servidor. Si el navegador no soporta alguna técnica utilizada o si los datos se modifican antes de enviarlos es fácil que se produzcan errores. La validación en el servidor se trata además de una medida de seguridad necesaria.

Notificaciones de usuario

Una vez enviados los datos del formulario, hay que informar al usuario de forma clara de si todo ha ido bien o de si se ha producido algún error. Para ello podemos usar los siguientes elementos:

El título de página: es lo primero que suele leer un lector de pantalla, así el usuario se percata del error de forma inmediata.
El encabezado principal: suele ser el elemento más visible de la página.
Una lista de errores: debe colocarse al principio de la página, antes del formulario y conviene enlazar cada elemento de la lista con el control correspondiente donde se encuentra el error.

Puedes ver más información en WAI - Forms Tutorial.