Formularios

Etiquetas

El elemento <label> sirve para identificar los campos del formulario.

Cada etiqueta debe asociarse con su campo correspondiente mediante los atributos for y id usando el mismo valor.

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

Etiqueta oculta

Existen situaciones donde la función del campo del formulario es visualmente explícita, sin necesidad de añadir una etiqueta.

En estos casos, podemos ocultar la etiqueta visualmente, pero asegurándonos de que siga siendo accesible para las tecnologías de asistencia.

Un ejemplo típico es un formulario de búsqueda:

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

Atributos ARIA

En los casos donde no se pueda usar un <label> visual o accesible, podemos utilizar atributos ARIA para identificar el campo de formulario.

Ejemplo con aria-labelledby:

<form role="search">
  <input id="search" type="search" aria-labelledby="submit">
  <button type="submit" id="submit">Buscar</button>
</form>

Ejemplo con aria-label:

<form role="search">
  <input type="search" aria-label="Buscar">
  <button type="submit">Buscar</button>
</form>

Evita utilizar placeholder

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.

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

Aunque este atributo resulta práctico, 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.
• Si se cambia el color para mejorar el contraste, puede confundir al usuario, que podría creer que el campo ya está rellenado.

Por estos motivos no se recomienda usar placeholder, y si se hace nunca debería sustituir a la etiqueta del control de formulario.

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">

El elemento <button> es más flexible para aplicar estilos. Además, permite incluir más atributos de accesibilidad en su contenido que <input>.

Agrupar campos

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

Para agrupar campos utilizamos el elemento <fieldset>, junto al elemento <legend> que identifica o describe al grupo.

<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>

Los controles de tipo radio y checkbox deben agruparse siempre.

Instrucciones

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

Instrucciones generales

Estas instrucciones afectan a todo el formulario. Pueden indicar qué campos son obligatorios, el formato de los datos u otra información relevante.

El texto de las instrucciones debe incluirse antes de la etiqueta <form> porque algunos lectores de pantalla pueden ignorar los textos que no estén vinculados a elementos del formulario.

Instrucciones en línea

Son instrucciones relevantes que se incluyen junto al control del formulario. Puedes proporcionar instrucciones en línea usando el atributo aria-describedby.

<label for="password">Contraseña</label>
<input type="password" id="password" aria-describedby="pwd-reqs">
<div id="pwd-reqs">La contraseña debe tener al menos 12 caracteres.</div>

Validación de datos

Antes de enviar los datos de un formulario, debemos validarlos e informar al usuario si hay algún error.

Campos obligatorios

Los campos obligatorios deben identificarse tanto en la etiqueta como en el control del formulario.

Podemos indicarlo directamente en el texto de la etiqueta.

<label for="name">Nombre (obligatorio)</label>

O añadir un símbolo, generalmente un asterisco. En este caso, se recomienda explicar el significado del símbolo en las instrucciones del formulario.

<label for="name">Nombre <span aria-hidden="true">*</span></label>

Para indicar que un campo es obligatorio, se utiliza 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.

<input type="text" id="name" required>

En el caso de los botones de opción (radio), donde solo se puede seleccionar una alternativa, no se debe marcar cada uno como obligatorio, ya que esto puede resultar confuso para los usuarios de lectores de pantalla. En su lugar, se puede indicar que el grupo es obligatorio utilizando atributos ARIA en el contenedor.

<fieldset role="radiogroup" aria-required="true">
  ...
</fieldset>

Tipos de datos

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

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.

<input type="number" min="1" max="10">
<input type="text" minlength="3">
<input type="range" max="5" step="0.5">

Especificar un patrón

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

<label for="pwd">Contraseña</label>
<input
  type="text"
  id="pwd"
  aria-describedby="pwd-reqs"
  pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n]).*$"
  required
>
<div id="pwd-reqs">
  Debe contener al menos un número o un carácter especial y mínimo 8 caracteres.
</div>
<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.

Además de la validación en el lado del cliente, siempre debe realizarse la validación en el servidor.

Notificaciones de usuario

Tras enviar los datos del formulario, es importante informar al usuario si la operación se ha realizado correctamente o si ha ocurrido algún error.

Para ello podemos usar los siguientes elementos:

• Título de página: Es lo primero que lee un lector de pantalla.
• Encabezado principal: Suele ser el elemento más visible de la página.
• Lista de errores: Debe colocarse al principio de la página y conviene enlazar cada elemento con el campo del formulario al que se refiere.
• Mensajes de error: Marcar visualmente los campos con errores e incluir un mensaje debajo de cada uno explicando el motivo.