Aprovechando las bondades del tag LABEL podemos mejorar tanto la accesibilidad como la usabilidad de los formularios en las interfaces web.
LABEL se encarga de asociar la etiqueta textual a un control determinado (input, radio, select, etc.) proporcionando información acerca del control.
Cabe destacar que LABEL cuando recibe el foco, automáticamente se lo cede al control asociado.
Dos formas de usar este tag
Mediante la asociación explicita:
<input name="terms" id="terms" type="checkbox" value="1" /> <label for="terms">He leído y acepto las <a href="/terms">condiciones del servicio</a></label>
Mediante la asociación implicita:
<label for="terms">
<input name="terms" id="terms" type="checkbox" value="1" />
<span>He leído y acepto las <a href="/terms">condiciones del servicio</a></span>
</label>
El uso es muy simple, basta con indicar el atributo for con el identificador al que se quiera asociar la etiqueta. Por lo tanto los atributos for (del LABEL) e id (de INPUT) han de ser iguales.
También podemos incorporar el atributo title en un LABEL.
Recordar por último que esta etiqueta con sus controles asociados deben ser contenidos por otra etiqueta en bloque. Yo suelo usar listas, o si se trata de una sola opción un simple párrafo.
Respecto a las dos opciones de uso siempre me he inclinado por la segunda (asociación implícita).
- Algunas plataformas de navegación anticuadas (muy anticuadas) no reconocen la asociación
foreid. Con esta forma obligamos a estas plataformas a realizar dicha asociación. - La manipulación de estilo permite hacer prácticamente lo que quieras con esta estructura. En el ejemplo he puesto la cadena de texto contenida por la etiqueta SPAN a la que podemos incorporar estilos CSS (display: block, float, font-size, etc).
- Simplemente esta forma me resulta más lógica.
Emmanuelle de la fundación SIDAR nos da su opinión al respecto en este comentario.
Simples ventajas
Aparte de las consideraciones de accesibilidad (que las hay 🙂 ). No me digan que no resulta comodisimo hacer click en la etiqueta textual y que el foco se traslade al input donde vamos a introducir texto, o hacer click en un texto para que se marque el radio/check sin falta de atinar con el puntero en el cuadradito de turno.
Una vez más la usabilidad vuelve a estar en los pequeños detalles como este, y todo debido a que nos estamos aprovechando de la ya comentada ley de fitts.
Algunas dudas
Si todo es tan bueno, bonito y fácil ¿cuál es la razón por la que esta etiqueta es «poco» usada?.
A mi entender debería ser tan conocida como P y en parte por eso estoy escribiendo este post.
Por mencionar un ejemplo, last.fm en su formulario de registro usa la etiqueta en todos los campos asociados a inputs menos en el último (el radio con la nota legal). Ejemplos como este y algunos muy descabellados hay a centenares.
