Índice

Etiquetado de los campos de formulario

La etiqueta <label> asocia explícitamente el título a un campo de formulario particular. Es como si pegáramos una etiqueta (label) delante de un elemento del formulario. 

En un primer momento, la etiqueta <label> mejora en gran medida la ergonomía de los formularios permitiendo activar un elemento del grupo, por ejemplo un botón de radio, haciendo clic en el botón de radio o en el título, indiferentemente.

No obstante, las etiquetas <label> son particularmente útiles en el dominio de la accesibilidad de los sitios web por parte de personas invidentes. Estas "etiquetas" se tienen en cuenta en las ayudas técnicas (intérpretes de braille o programas de síntesis vocal) y facilitan en gran medida el uso de los formularios por parte de personas visualmente deficientes.

En primer lugar, el texto asignado a un elemento de formulario debe situarse entre las etiquetas <label> ... </label>.

<label>Nombre</label>: 
<input type="text"><br>

A continuación, es preciso asociar esta etiqueta label al control del formulario correspondiente. Para ello, el elemento de formulario tiene que definirse mediante un identificador de tipo id.

<label>Nombre</label>: 
<input type="text" id="f1"><br>

El atributo for="..." dentro de la etiqueta <label> permite asociar directamente la etiqueta al campo haciendo referencia a este identificador. ...