HTML label: conectar for e id y ampliar la zona de clic

HTML <label> asocia el nombre de un control de formulario con su texto visible y tecnologías de asistencia. Conecta el atributo for de la etiqueta con el atributo id del control, o coloca el control dentro de la etiqueta. Hacer clic en el texto asociado puede enfocar un campo de entrada o alternar una casilla de verificación.

Conectar controles explícitamente con for e id

El atributo for toma el id del control de destino en el mismo documento, no su name. Un id debe ser único dentro del documento, mientras que name identifica un campo en los datos enviados. Incluso si el diseño separa label y input, su relación de nombres puede permanecer intacta cuando el for y el id coinciden.

Guarda el siguiente documento como labels.html y ábrelo en un navegador. La entrada de texto usa for; la casilla de verificación usa una etiqueta envolvente. Este es un ejercicio de interfaz que no envía datos a un servidor.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparar asociaciones de label</title>
</head>
<body>
  <h1>Nombres de los controles de formulario</h1>
  <p>
    <label for="reader-name">Nombre visible</label>
    <input id="reader-name" name="reader" type="text"
           aria-describedby="name-help" placeholder="p. ej., Cielo">
  </p>
  <p id="name-help">Introduce el apodo que se mostrará en pantalla.</p>
  <p>
    <label>
      <input type="checkbox" name="tips" value="yes">
      Recibir novedades de aprendizaje
    </label>
  </p>
</body>
</html>

1. Haz clic en Nombre visible para colocar el cursor en la entrada. Después de escribir, el marcador de posición desaparece, pero la etiqueta sigue siendo visible.
2. Haz clic en el texto Recibir novedades de aprendizaje para seleccionar la casilla de verificación, luego haz clic de nuevo para desmarcarla. No necesitas presionar la pequeña casilla de verificación con precisión.
3. Usa Tab para moverse entre los controles y Espacio para alternar la casilla de verificación, comprobando también la interacción con el teclado.

Las etiquetas envolventes y las descripciones suplementarias cumplen diferentes funciones

Colocar un input dentro de un label crea una asociación implícita sin for. Incluye solo el control asociado dentro de una etiqueta y no anides otra etiqueta dentro de ella. También puedes usar id y for con una etiqueta envolvente, pero for debe referirse al control contenido. Vale la pena considerar una asociación explícita for/id para la compatibilidad con tecnología asistiva y herramientas externas.

La etiqueta es el nombre que indica a los lectores qué ingresar. Coloca instrucciones complementarias o mensajes de error en un párrafo separado y asócialos a aria-describedby. En el ejemplo, Introduce el apodo que se mostrará en pantalla. complementa el nombre; el marcador de posición no se usa como sustituto de la etiqueta.

Cuando la asociación o el clic no funcionan

Comprueba errores tipográficos y diferencias de mayúsculas y minúsculas en for, valores duplicados de id y el tipo del elemento objetivo. Apuntar for a un elemento que no se puede etiquetar, como una entrada hidden, no hará que funcione como una entrada normal. Las etiquetas también funcionan con select y textarea; nombra grupos de opciones relacionadas con fieldset y legend.

Colocar enlaces o botones separados dentro de una etiqueta puede hacer que no esté claro si al hacer clic se debe navegar o seleccionar un control. Coloca enlaces adicionales fuera y explica primero el contexto. Aplica estilos a la etiqueta con CSS en lugar de insertar un elemento de encabezado solo para agrandarla. La referencia de etiqueta referencia de label en MDN describe los controles compatibles y los requisitos de autoría.