Docs ejecutables de HTML: Label en HTML

Q: ¿Qué es el atributo for de un label?

for contiene el id del campo al que pertenece la etiqueta: Email . Debe coincidir exactamente con el id, no con el name.

Q: ¿Cómo oculto un label pero lo mantengo para los lectores de pantalla?

Mantén el y ocúltalo visualmente con una clase que lo reduzca a 1 píxel y lo recorte, en lugar de display: none, que también lo oculta a los lectores de pantalla. Para un campo sin sitio para ninguna etiqueta, la alternativa es aria-label en el campo.

Qué hace el elemento label

<label> le da nombre a un campo de formulario. Conéctalo con for, con el valor del id del campo, y pasan dos cosas: los lectores de pantalla anuncian la etiqueta cuando el campo recibe el foco, y al pulsar el texto de la etiqueta el foco pasa al campo. Pulsa los dos textos de abajo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Label</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    p { margin: 0 0 12px; }
  </style>
</head>
<body>
  <p>
    <label for="city">City (a label)</label>
    <input id="city" name="city">
  </p>
  <p>
    <span>Country (plain text)</span>
    <input name="country">
  </p>
</body>
</html>

Pulsar "City" pone el cursor en su campo. Pulsar "Country" no hace nada, y un lector de pantalla que llega a ese segundo campo solo oye "editar texto", sin nombre. Los dos se ven idénticos; solo uno está etiquetado.

Dos formas de conectar una etiqueta

Usa for e id, o pon el campo dentro de la etiqueta:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>for vs wrapping</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { margin-bottom: 12px; }
    label { font-weight: 600; }
  </style>
</head>
<body>
  <form>
    <!-- 1. for + id: label and field can be anywhere -->
    <div class="row">
      <label for="email">Email</label><br>
      <input type="email" id="email" name="email">
    </div>

    <!-- 2. wrapping: no id needed -->
    <div class="row">
      <label>Phone <input type="tel" name="phone"></label>
    </div>

    <button type="submit">Save</button>
  </form>
</body>
</html>

	`for` e `id`	Envolver
Necesita un `id`	Sí, único en la página	No
Etiqueta y campo pueden estar separados	Sí (una celda de tabla, una cuadrícula)	No, el campo está dentro
Fácil de romper	Por una errata o un `id` duplicado	Por poner dos campos en una etiqueta

for debe coincidir con el id del campo, no con su name. A menudo los dos son la misma palabra, lo que oculta el error hasta que alguien cambia uno. Hacer las dos cosas (envolver y for) está bien y es habitual.

Una etiqueta se puede conectar a <input> (salvo type="hidden"), <select>, <textarea>, <button>, <meter>, <output> y <progress>. Una etiqueta da nombre a un campo. Un campo puede tener más de una etiqueta, aunque una etiqueta clara es más fácil para todos.

Una zona de clic más grande para checkboxes y radios

En los controles pequeños es donde más importa la etiqueta: pulsar en cualquier punto de ella alterna la casilla, así que la zona de clic es toda la línea de texto, no un cuadrado de 13 píxeles. Dar estilo a la etiqueta puede agrandarla aún más:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Click target</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .option {
      display: flex;
      align-items: center;
      gap: 10px;
      max-width: 320px;
      padding: 12px;
      margin-bottom: 8px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      cursor: pointer;
    }
    .option:hover { border-color: #2563eb; }
  </style>
</head>
<body>
  <form>
    <label class="option">
      <input type="checkbox" name="alerts" value="email"> Email me about new courses
    </label>
    <span class="option">
      <input type="checkbox" name="alerts" value="sms"> Not a label: only the box works
    </span>
    <button type="submit">Save</button>
  </form>
</body>
</html>

Pulsa en el padding de cada fila, lejos de la casilla. La primera fila se alterna; la segunda no hace nada salvo que aciertes en la propia casilla. Más sobre checkboxes en checkbox en HTML.

Pistas y mensajes de error

Una etiqueta debe ser corta: el nombre del campo. Las instrucciones extra y los mensajes de error van en elementos aparte, conectados con aria-describedby, para que los lectores de pantalla lean primero la etiqueta y después la descripción:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hints and errors</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; font-weight: 600; }
    .hint { display: block; color: #4b5563; font-size: 14px; margin: 2px 0 6px; }
    .error { color: #b91c1c; font-size: 14px; margin: 4px 0 0; }
    input { font: inherit; padding: 4px 8px; }
    .req { color: #b91c1c; }
  </style>
</head>
<body>
  <form novalidate>
    <label for="user">Username <span class="req" aria-hidden="true">*</span></label>
    <span class="hint" id="user-hint">3 to 16 lowercase letters or digits</span>
    <input id="user" name="username" required pattern="[a-z0-9]{3,16}"
      aria-describedby="user-hint user-error">
    <p class="error" id="user-error"></p>
    <button type="submit">Create</button>
  </form>

  <script>
    const form = document.querySelector('form');
    const user = document.querySelector('#user');
    form.addEventListener('submit', (event) => {
      const error = document.querySelector('#user-error');
      if (!user.checkValidity()) {
        event.preventDefault();
        error.textContent = user.value ? 'Use 3 to 16 lowercase letters or digits.' : 'Enter a username.';
        user.setAttribute('aria-invalid', 'true');
        user.focus();
      } else {
        error.textContent = '';
        user.removeAttribute('aria-invalid');
      }
    });
  </script>
</body>
</html>

Pulsa Create con el campo vacío, luego con AB y luego con ada99. Con aria-describedby, un lector de pantalla anuncia algo como "Username, obligatorio, editar texto, 3 to 16 lowercase letters or digits, Enter a username." El asterisco lleva aria-hidden porque el atributo required ya dice "obligatorio"; oír "asterisco" no aporta nada.

Etiquetas ocultas

Algunos campos tienen una pista visible distinta de una etiqueta de texto, como un cuadro de búsqueda junto a un botón Search. La etiqueta sigue siendo necesaria; ocúltala visualmente pero mantenla en la página para los lectores de pantalla:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hidden label</title>
  <style>
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    input, button { font: inherit; padding: 6px 10px; }
  </style>
</head>
<body>
  <form role="search">
    <label for="q" class="visually-hidden">Search courses</label>
    <input type="search" id="q" name="q" placeholder="e.g. Python">
    <button type="submit">Search</button>
  </form>
</body>
</html>

No la ocultes con display: none ni visibility: hidden: también la ocultan a los lectores de pantalla, y no todos los navegadores y lectores de pantalla siguen usando una etiqueta oculta como nombre. La otra opción es aria-label="Search courses" en el input, que le da nombre sin ningún elemento label. Una etiqueta visible sigue siendo la mejor opción siempre que haya sitio: a todo el mundo le sirve ver para qué es un campo.

Errores comunes

for apuntando al name en lugar del id. No se conecta nada.
Ids duplicados. for se conecta al primer elemento con ese id, que puede ser un campo de otro formulario de la página.
Placeholder en lugar de una etiqueta. Desaparece al escribir y no es un nombre fiable.
Dos campos dentro de una etiqueta. Una etiqueta da nombre a un campo; el segundo queda sin etiqueta.
Un enlace dentro de la etiqueta de un checkbox, como "Acepto las condiciones" con "condiciones" como enlace. Parte de la línea alterna la casilla y parte abre una página, lo que es fácil de pulsar por error. Pon el enlace fuera de la etiqueta.
Ocultar la etiqueta con display: none. Usa una clase de ocultación visual.
Texto junto a un campo que no es un <label>. Se ve igual y no hace nada. Para el formulario que rodea a tus campos, consulta formularios HTML.

Preguntas frecuentes

¿Qué hace la etiqueta label en HTML?

Da nombre a un campo de formulario. Los lectores de pantalla leen la etiqueta cuando el campo recibe el foco, y al pulsar la etiqueta el foco pasa al campo, o se alterna si es un checkbox o un radio button.

¿Qué es el atributo for de un label?

for contiene el id del campo al que pertenece la etiqueta: <label for="email">Email</label> <input id="email">. Debe coincidir exactamente con el id, no con el name.

¿Pongo el input dentro del label o uso for?

Las dos formas funcionan en los navegadores y lectores de pantalla actuales. Envolver no necesita ids; for e id permiten que la etiqueta y el campo estén en sitios distintos del marcado, como celdas de tabla separadas. Muchos equipos envuelven y además añaden for.

¿Un placeholder puede sustituir a un label?

No. El placeholder desaparece en cuanto el lector escribe, suele tener poco contraste y no siempre se anuncia como nombre del campo. Usa un <label> visible y deja el placeholder para un valor de ejemplo, si acaso.

¿Cómo oculto un label pero lo mantengo para los lectores de pantalla?

Mantén el <label> y ocúltalo visualmente con una clase que lo reduzca a 1 píxel y lo recorte, en lugar de display: none, que también lo oculta a los lectores de pantalla. Para un campo sin sitio para ninguna etiqueta, la alternativa es aria-label en el campo.

Conceptos relacionados