<label>

<label> es el elemento que le da nombre a un control de formulario. Sin él, un <input> es visualmente un campo vacío sin contexto: el usuario puede ver dónde tipear, pero el lector de pantalla anuncia “campo de texto — sin nombre”. Con <label>, el campo tiene un nombre accesible que el navegador y las tecnologías asistivas pueden comunicar al usuario.

Lo que hace <label> es crear una asociación semántica entre su texto y un control de formulario. Esta asociación tiene dos efectos concretos e inmediatos: primero, amplía el área de clic — clicar el texto del <label> activa el control asociado (enfoca el input, o marca/desmarca el checkbox). En dispositivos táctiles esto es especialmente valioso porque agranda el área táctil de controles pequeños como checkboxes y radio buttons. Segundo, los lectores de pantalla anuncian el texto del <label> cuando el foco llega al control asociado, dándole contexto al usuario que navega con teclado o lector de pantalla.

<label> no es solo una buena práctica de accesibilidad: es parte del contrato de usabilidad de cualquier formulario funcional. Un formulario sin labels visibles obliga al usuario a recordar qué campo estaba llenando, y hace imposible la navegación por teclado con contexto. La asociación for/id es el mecanismo principal; la forma envolvente es la alternativa cuando label e input están físicamente juntos en el markup.

Cómo funciona

La asociación entre <label> y su control se establece de dos maneras: con el atributo for que apunta al id del control, o de forma envolvente anidando el control dentro del <label>. En ambos casos, el resultado es el mismo: el navegador vincula los dos elementos en el árbol de accesibilidad.

Cuando el foco llega al control (por tabulación o clic), el lector de pantalla lee el texto del label como nombre del campo. Sin este nombre accesible, el campo queda anónimo — el lector dice “campo de texto” o el tipo del control, sin más contexto. Un formulario con todos los campos sin label es innavegable para alguien que usa tecnología asistiva.

Modelo de contenido

<label> acepta contenido en línea (texto, <strong>, <em>, <abbr>, etc.). No puede contener otro <label>, y si usa la forma envolvente solo puede contener un control de formulario como descendiente interactivo.

Display por defecto: inline.

Sintaxis

<!-- Forma con for/id: recomendada cuando label e input no son adyacentes -->
<label for="nombre">Nombre completo</label>
<input type="text" id="nombre" name="nombre">

<!-- Forma envolvente: vinculación implícita por anidado -->
<label>
  Correo electrónico
  <input type="email" name="correo">
</label>

Atributos

for — asociación explícita

El valor de for debe coincidir exactamente con el id del control asociado. Esta es la asociación explícita. Se usa cuando el <label> y el control no están anidados uno dentro del otro.

<label for="correo">Correo electrónico</label>
<input type="email" id="correo" name="correo">

for apunta al id, NO al name. Este es el error más frecuente: confundir for con name. El id identifica el elemento en el DOM; el name es la clave del dato enviado al servidor. En muchos ejemplos tienen el mismo valor (para simplificar), pero son atributos distintos con propósitos distintos.

Default: no presente (vinculación envolvente si el control está anidado).

La forma envolvente

Cuando el control está físicamente dentro del <label>, la vinculación es implícita y no se necesita for ni id:

<label>
  Contraseña
  <input type="password" name="clave" minlength="8">
</label>

Esta forma es conveniente para radio buttons y checkboxes, donde label e input suelen ir juntos:

<label>
  <input type="checkbox" name="newsletter" value="si">
  Suscribirme al newsletter
</label>

La forma envolvente y la forma con for/id son equivalentes en cuanto a accesibilidad. La forma con for/id es preferida cuando el layout separa visualmente el label del control (por ejemplo, un label arriba y el input abajo con CSS grid).

placeholder ≠ label

El placeholder no reemplaza al <label>. Esta es una confusión muy común:

<!-- ❌ Solo placeholder, sin label -->
<input type="text" placeholder="Tu nombre" name="nombre">

<!-- ✅ Label visible + placeholder de ayuda de formato -->
<label for="nombre">Nombre</label>
<input type="text" id="nombre" name="nombre" placeholder="Ej: María García">

El problema con usar solo placeholder: (1) desaparece al escribir, haciendo que el usuario no recuerde qué estaba llenando; (2) el lector de pantalla puede no anunciarlo al llegar al campo; (3) el placeholder suele tener bajo contraste respecto al fondo. El <label> visible es siempre necesario.

Accesibilidad

<label> es el mecanismo principal para dar nombre accesible a los controles de formulario. El rol implícito del <label> es label en el árbol de accesibilidad. La asociación for/id crea una relación labelledby que los lectores de pantalla leen al entrar al campo.

Para grupos de controles relacionados (radio buttons, checkboxes de un tema), el nombre del grupo no lo da <label> sino <fieldset> con <legend>. Los labels individuales dan el nombre de cada opción; el legend da el nombre del grupo.

<fieldset>
  <legend>Método de envío</legend>
  <label><input type="radio" name="envio" value="express"> Express (24h)</label>
  <label><input type="radio" name="envio" value="estandar"> Estándar (3-5 días)</label>
</fieldset>

Cuándo usar qué forma

Notas, gotchas e interacción

• for apunta al id, no al name. Error frecuentísimo. Si el input tiene id="correo" y name="email", el for debe valer "correo".
• Un <label> por control. Tecnicamente un control puede tener varios labels, pero en la práctica un label es suficiente y agregar más puede confundir a los lectores de pantalla.
• No omitir el label por razones de diseño. Si el diseño no quiere texto visible, usá aria-label en el input como alternativa: <input type="search" aria-label="Buscar en el sitio">. Esto preserva la accesibilidad sin label visible.
• El label amplía el área de clic. Clicar el texto del label hace exactamente lo mismo que clicar el input: para un checkbox o radio, lo marca/desmarca; para un input de texto, le da el foco. Esto es comportamiento del navegador, no requiere JS.

Vigente / legacy

<label> está completamente vigente. No hay atributos legacy relevantes. El atributo accesskey (para definir un atajo de teclado que activa el control asociado) está en el spec pero raramente se usa en la práctica.