Saltar al contenido principal

Formularios

img

Los formularios son una forma de interacci贸n con el usuario muy importante, como registros, inicios de sesi贸n, o el env铆o de cualquier otro tipo de informaci贸n.

  • Todos los campos activos deben ser accesibles mediante tabulaci贸n.
  • Todo los los controles de formulario (input, textarea, select) deben tener asociado un label, o en su defecto, el atributo aria-label.
  • Resalta los campos cuando se haga foco sobre ellos.
  • Los campos obligatorios deben quedar claramente marcados (asterisco, texto descriptivo, etc) y tener el atributo aria-required.
  • Ofrece espacio suficiente entre campos y zonas clickables amplias. (m铆nimo 44px por 44px Enlace criterio 2.5.5)
  • Ofrece tiempo suficiente para completar un formulario (caducidad de sesi贸n).
  • Usa autocompletado en campos de b煤squeda, con el atributo autocomplete.
  • Cuando se env铆e los datos de un formulario, informa al usuario de la acci贸n realizada, para formularios complejos, es 煤til mostrar una p谩gina de confirmaci贸n de la informaci贸n facilitada antes de enviarla.
  • Ofrece ayuda e informaci贸n complementaria para rellenar campos que puedan ser complejos, utiliza el atributo aria-describedby.
  • No uses el bot贸n reset.
  • Utiliza los elementos fieldset y legend para describir grupos de controles de formulario.

Foco

Debemos resaltar los elementos cuando se haga foco sobre estos.

/* Ejemplo, al hacer foco con el teclado mostrar谩 una l铆nea punteada negra. */
button:focus-visible {
outline: 4px dashed black;
}

/* Ejemplo, si hacemos foco con el puntero muestra un sombreado. */
button:focus:not(:focus-visible) {
outline: none;
box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}

Label

La etiqueta <label> representa el t铆tulo del elemento de control asociado.

Asociando el label

Las etiquetas <label> deben asociarse de forma impl铆cita o expl铆cita a los distintos controladores de formulario (input, textarea, select).

Asociaci贸n impl铆cita

La etiqueta <label> engloba a su control asociado.

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

Asociaci贸n expl铆cita

Debemos a帽adir el atributo for='' con el id del control asociado a la etiqueta <label>.

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

Recuerda que el id debe ser 煤nico en cada p谩gina, si el formulario es din谩mico y no puedes controlar sus identificadores, utiliza la asociaci贸n impl铆cita.

Asociaci贸n con aria-label

Podemos reemplazar la etiqueta <label> por un atributo aria-label.

<input type="text" aria-label="Nombre" id="nombre" name="nombre" />
tip

No es aconsejable prescindir de label ya que aporta informaci贸n una informaci贸n visual.

Asociaci贸n con aria-labeledby

En ciertos casos, como un buscador, podemos prescindir del label y asociar el bot贸n de b煤squeda mediante aria-labeledby

<input type="text" name="buscar" aria-labelledby="boton-buscar">
<button id="boton-buscar" type="submit">Buscar</button>

Diferencias entre aria-label y aria-labelledby

Con aria-label est谩s definiendo un label al elemento.

Con aria-labelledby est谩s definiendo un label mediante una id que enlaza un texto/campo visible fuera del elemento.

Ayuda / descripci贸n de campos de formulario

Se recomienda proporcionar ayuda/informaci贸n en los campos que puedan ofrecer dudas o restricciones de formato.

Placeholder

Con los placeholder mostraremos un texto dentro de los campos input o textarea, recuerda que un placeholder no reemplaza a un label.

<label for="name">Nombre completo: </label>
<input
type="text"
name="name"
id="name"
placeholder="Escriba su nombre y apellidos"
/>

Con css es posible modificar el estilo del placeholder:

::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: red;
opacity: 1; /* Firefox */
}

Ayuda dentro del label

Otra opci贸n es ofrecer ayuda dentro de nuestro label, por ejemplo el formato requerido:

<label for="expire">Fecha de caducidad (MM/AAAA): </label>
<input type="text" name="expire" id="expire" />

Ayuda fuera del label, aria-describedby

Podemos hacer uso del atributo WAI-ARIA aria-labelledby o aria-describedby, para ofrecer informaci贸n complementaria del campo.

<!-- aria-labelledby -->
<label id="expLabel" for="expire" tabindex="-1">Fecha de caducidad:</label>
<span>
<input
type="text"
name="expire"
id="expire"
aria-labelledby="expLabel expDesc"
/>
<span id="expDesc" tabindex="-1">MM/AAAA</span>
</span>

<!-- aria-describedby -->
<label id="expLabel" for="expire">Fecha de caducidad:</label>
<span>
<input
type="text"
name="expire"
id="expire"
aria-labelledby="expLabel"
aria-describedby="expDesc"
/>
<span id="expDesc">Usa el formato MM/AAAA</span>
</span>

Input y textarea

Los elementos input deben llevar su type correspondiente.

<input type="button" />
<input type="checkbox" />
<input type="color" />
<input type="date" />
<input type="datetime-local" />
<input type="email" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="month" />
<input type="number" />
<input type="password" />
<input type="radio" />
<input type="range" />
<input type="reset" />
<input type="search" />
<input type="submit" />
<input type="tel" />
<input type="text" />
<input type="time" />
<input type="url" />
<input type="week" />

Emulando con WAI-ARIA

Tanto los input y los textarea se pueden emular mediante WAI-ARIA, aunque siempre es recomendable usar el elemento nativo.

<!-- campo input simple -->
<div id="txtboxLabel">C贸digo postal:</div>
<div
role="textbox"
contenteditable="true"
aria-placeholder="5-digit zipcode"
aria-labelledby="txtboxLabel"
></div>

<!-- campo textarea -->
<div id="txtboxMultilineLabel">Comentarios:</div>
<div
role="textbox"
contenteditable="true"
aria-multiline="true"
aria-labelledby="txtboxMultilineLabel"
aria-required="true"
></div>

Fieldset y legend

Usa la etiqueta <fieldset> para englobar los distintos apartados, y a su vez la etiqueta <legend> para a帽adir un t铆tulo.

<fieldset>
<legend>Informaci贸n personal</legend>
<!-- campos de informaci贸n personal -->
</fieldset>

Checkbox y radio button

  • Agrupa los radiobutton o checkbox dentro de un fieldset.
  • A帽ade un legend para proporcionar una descripci贸n para la agrupaci贸n, esta debe ser corta y descriptiva.
<fieldset>
<legend>驴Cu谩l es tu color preferido?</legend>
<div class="checkbox column">
<input id="rojo" type="checkbox" name="color" value="rojo" />
<label for="rojo">Rojo</label>
<input id="azul" type="checkbox" name="color" value="azul" />
<label for="azul">Azul</label>
<input id="verde" type="checkbox" name="color" value="verde" />
<label for="verde">Verde</label>
</div>
</fieldset>
  • Como alternativa al fieldset, podemos usar WAI-ARIA, a帽adiendo al div contenedor los atributos role="group" y aria-labelledby.
<div role="group" aria-labelledby="color_head">
<h4 id="color_head" class="bold">驴Cu谩l es tu color favorito</h4>
<div class="row">
<input id="rojo" type="checkbox" name="color" value="rojo" />
<label for="rojo">Rojo</label>
<input id="azul" type="checkbox" name="color" value="azul" />
<label for="azul">Azul</label>
<input id="verde" type="checkbox" name="color" value="verde" />
<label for="verde">Verde</label>
</div>
</div>

Switch

Switch con botones

En el caso de crear un switch con la etiqueta <button>, debemos incluir el atributo role="switch" y aria-checked con el valor "true, false o mixed", dependiendo de su estado.

  <div>
<button type="button" id="toggle_label" aria-labelledby="toggle_label" aria-checked="false" role="switch">
<span>Modo oscuro</span>
</button>
<label for="toggle_label">Moso oscuro</label>
</div>

Switch con input

Si usamos un <input> del tipo checkbox, debemos a帽adir una etiqueta <label>

<label for="toggle">
<input type="checkbox" name="toggle" id="toggle" />
Modo oscuro
</label>

Select

  • Utiliza el atributo title para proporcionar ayuda contextual en los controles del formulario.
  • Proporciona un orden de tabulaci贸n l贸gico mediante tabindex cuando el orden por defecto no es suficiente.
  • A帽ade el atributo optgroup para agrupar elementos option dentro de un elemento select.

Bot贸n reset

El uso de este bot贸n era muy com煤n hace a帽os. Con el tiempo se renunci贸 a su uso debido a la facilidad de pulsarlo por error y vaciar todos los campos (en formularios grandes esto es una aut茅ntica pesadilla 馃拃).

Eso s铆, debemos dar la opci贸n a que el usuario pueda restablecer el valor por defecto de campos de opci贸n como radiobutton o checkbox.