¿Cómo se usa la etiqueta «label» para asociar texto con campos de formulario?

La etiqueta <label> es fundamental en los formularios HTML para asociar un texto descriptivo con un control de formulario específico (como <input>, <textarea> o <select>). Esta asociación mejora tanto la usabilidad como la accesibilidad de tus formularios.

Hay dos maneras principales de usar la etiqueta <label>:

1. Asociación explícita (método recomendado):
   Este método utiliza el atributo for en la etiqueta <label> y el atributo id en el control del formulario. El valor del atributo for debe coincidir exactamente con el valor del atributo id del campo al que está asociado.
   Ventajas:
   • Funciona de manera fiable en todas las combinaciones de navegadores y tecnologías de asistencia.Permite mayor flexibilidad en la maquetación, ya que la etiqueta y el control no necesitan estar uno dentro del otro.Al hacer clic en el texto de la etiqueta, el foco se traslada automáticamente al control de formulario asociado, y si es un «checkbox» o «radio button», se marca/desmarca.Los lectores de pantalla anuncian la etiqueta cuando el usuario navega al control asociado.
   <div>
<label for="nombre_usuario">Nombre de usuario:</label>
<input type="text" id="nombre_usuario" name="username">
</div>
<div>
<input type="checkbox" id="acepto_terminos" name="terminos">
<label for="acepto_terminos">Acepto los términos y condiciones</label>
</div>
2. Asociación implícita:
   En este método, el control del formulario se anida directamente dentro de la etiqueta <label>. No necesitas los atributos for ni id para la asociación, aunque sigue siendo buena práctica incluir un id en el control para otros propósitos (como JavaScript o CSS).
   Ventajas:
   • Es más conciso en términos de código.También activa el control al hacer clic en la etiqueta.
   Desventajas:
   • Algunas combinaciones de tecnologías de asistencia y navegadores podrían no interpretarlo tan robustamente como la asociación explícita.
   • Menos flexible para la maquetación.
   <label>
Correo electrónico:
<input type="email" name="email_usuario">
</label>
<label>
<input type="radio" name="opcion" value="si"> Sí
</label>

Aunque ambas formas son válidas, generalmente se prefiere la asociación explícita con for e id por su robustez y flexibilidad.

Usar <label> correctamente es un paso sencillo pero muy importante para crear formularios accesibles y fáciles de usar.