Curso HTML 8.3 Etiquetas label y atributo for

Etiqueta label y atributo for

La etiqueta label en HTML sirve para asociar un texto descriptivo con un elemento de formulario (generalmente inputs, selects o textareas). Gracias a esta asociación:

• Mejora la usabilidad: al hacer clic en la etiqueta, el foco se traslada automáticamente al control asociado.
• Mejora la accesibilidad: los lectores de pantalla identifican la relación entre texto y control de formulario.

1. Sintaxis básica

La forma más común de usar label es mediante el atributo for, que debe coincidir con el id del control:

Nombre completo:

  

for

Valor de texto que coincide con el id del elemento de formulario que describe.

id

Identificador único dentro del documento que se usa para enlazar la etiqueta.

2. Etiqueta envolvente (sin for)

Otra forma de asociar la etiqueta y el control es anidando el input dentro del label:

  Correo electrónico:
  

  

En este caso no es necesario usar for ni id, pero:

• La zona clicable incluye todo el contenido dentro del label.
• No podrás referenciar ese control desde otros elementos (por ejemplo, un aria-describedby).

3. Ventajas y buenas prácticas

• Usar siempre for + id para separar estructura (HTML) de contenido visual y facilitar estilos.
• Asignar id único a cada input.
• Evitar etiquetas label vacías o sin texto descriptivo.
• Mantener concatenación semántica: texto claro y legible.

4. Ejemplos avanzados

4.1. Agrupación de opciones con fieldset y legend

Para agrupar radio buttons o checkboxes y describirlos en conjunto:

  
Género
  Masculino
  
  Femenino
  
  Otro
  

  

4.2. Texto de ayuda enlazado con aria-describedby

Podemos usar una etiqueta label para el nombre y otra etiqueta (o elemento span) para descripción adicional:

Edad

Introduce tu edad en años completos (entre 0 y 120).
  

4.3. Formularios complejos con varias columnas

Podemos usar una tabla para alinear etiquetas y controles:

5. Errores comunes

1. Omitir el id en el control y usar for -> no funciona la asociación.
2. Duplicar id -> conflicto en el formulario y con scripts.
3. Dejar label sin texto o con texto genérico como ‘clic aquí’.

6. Recapitulación

La etiqueta label junto al atributo for son fundamentales para crear formularios accesibles y usables. Siempre que añadas un control de formulario, asegúrate de definir un label adecuado y asociarlo correctamente mediante for/ id o envolviendo el control en la propia etiqueta.