Formularios

img

Los formularios son una forma de interacci贸n con el usuario muy importante, ya que se utilizan para registros, inicios de sesi贸n, o el envio de cualquier tipo de informaci贸n.

  • Todos los campos 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)
  • Ofrece espacio suficiente entre campos y zonas clickables amplias.
  • Ofrece tiempo suficiente para completar un formulario (caducidad de sesi贸n).
  • Usa autocompletado en campos de b煤squeda.
  • 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.

Foco

Debemos resaltar los elementos cuando se haga foco sobre estos.

/* Ejemplo, al hacer foco con el teclado mostrar谩 una linea 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 de un elemento de control de formulario.

Asociar 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

A帽adimos 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, por eso te recomendamos la asociaci贸n impl铆cita en formularios con muchos campos.

Asociaci贸n con aria-label

Debemos usar aria-label como 煤ltimo recurso

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

Instrucciones adicionales

Es aconsejable proporcionar ayuda en los campos que puedan ofrecer dudas de introducci贸n.

Placeholder

Con los placeholder mostraremos un texto dentro de los campos input o textarea, recuerda que no debe reemplazar 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 */
}

Dentro del label

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

Fuera del label

Podemos hacer uso del atributo WAI-ARIA aria-labelledby o aria-describedby.

<!-- 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">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 lo usaremos como 煤ltima opci贸n:

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

Los switch o toggles, deben incluir el atributo role="switch" y aria-pressed 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></span>
</button>
<label for="toggle_label">Recordar sesi贸n</label>
</div>

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 de por defecto no es suficiente.