Etiqueta HTML <label>

La etiqueta HTML <label> define un título o leyenda para un control de formulario como un <input>, <select> o <textarea>. La etiqueta y el control están vinculados, por lo que el navegador sabe que el texto pertenece a ese campo específico.

Esta página cubre las dos formas de asociar una etiqueta con un control, por qué las etiquetas son importantes para la accesibilidad y la usabilidad, y cómo <label> se compara con los atributos de etiquetado ARIA y el placeholder.

Por qué las etiquetas son importantes

Una etiqueta no es solo texto visible junto a un campo — está vinculada programáticamente a un control. Esa asociación desbloquea tres beneficios concretos:

Accesibilidad. Cuando el control recibe el foco, un lector de pantalla anuncia su etiqueta, para que el usuario sepa qué escribir. Sin una etiqueta, el campo solo se anuncia por tipo (por ejemplo, "campo de texto") sin contexto.
Un área de clic más grande. Al hacer clic o tocar la etiqueta, se enfoca (y en el caso de casillas de verificación y botones de radio, se activa) el control. Esto es especialmente valioso para las pequeñas casillas de verificación y botones de radio, donde la caja en sí misma es difícil de pulsar con precisión en pantallas táctiles.
Mejor usabilidad. Los usuarios comprenden de inmediato qué título pertenece a qué campo, lo que reduce los errores en los formularios.

Las dos formas de asociar una etiqueta

Hay dos formas de conectar un <label> a su control: la asociación explícita mediante el atributo for, y la asociación implícita envolviendo el control.

Asociación explícita (`for` + `id`)

Asigna al control un id, luego establece el atributo for de la etiqueta con ese mismo valor. El valor de for debe coincidir exactamente con el id del control, y el id debe existir en el documento.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <label for="lfname">First name:</label>
      <input id="lfname" name="fname" type="text" />
    </form>
  </body>
</html>

Pruébalo tú mismo »

El etiquetado explícito es el enfoque más flexible: la etiqueta y el control pueden estar en cualquier parte del marcado, lo cual es útil cuando el diseño (por ejemplo, una cuadrícula CSS o una tabla) separa el título del campo.

Asociación implícita (envolviendo el control)

Coloca el control dentro del elemento <label>. No se necesita ningún par id/for — el anidamiento crea la asociación automáticamente.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <label>Name
        <input name="Name" type="text" />
      </label>
    </form>
  </body>
</html>

Pruébalo tú mismo »

Ambos métodos producen el mismo resultado. El envolvimiento es conciso y garantiza la asociación incluso si olvidaste un id; el for explícito es la opción cuando la estructura del marcado mantiene la etiqueta y el control separados.

Reglas y advertencias

Un control por etiqueta. Un único <label> está asociado con exactamente un control de formulario. Si envuelves dos inputs en una sola etiqueta, solo el primero queda asociado.
Un control puede tener varias etiquetas. El mismo input puede ser referenciado por más de un <label for="...">, y todos ellos enfocarán o activarán el control al hacer clic.
for debe apuntar a un id real. Si el valor de for no coincide con un id existente, la asociación falla silenciosamente — la etiqueta se convierte en texto simple.
Solo los controles de formulario pueden etiquetarse. <label> puede titular <input> (excepto type="hidden"), <button>, <meter>, <output>, <progress>, <select> y <textarea>. No etiqueta un <div>, <span> ni un encabezado.
Evita contenido interactivo dentro de una etiqueta. No pongas otro control (un segundo input, un botón o un enlace) dentro de un <label>, ya que compite con el control etiquetado por los clics.

Casillas de verificación y botones de radio

Las etiquetas importan más aquí, porque la caja en la que se puede hacer clic es pequeña. Con una etiqueta adecuada, todo el título se convierte en parte del área de toque.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <label for="barca">Barcelona</label>
      <input type="radio" name="team" id="barca" value="Barcelona" />
      <br />
      <label for="real">Real Madrid</label>
      <input type="radio" name="team" id="real" value="Real Madrid" />
      <br />
    </form>
  </body>
</html>

Pruébalo tú mismo »

Etiquetado sin un `<label>` visible: ARIA y `placeholder`

A veces una etiqueta visible no encaja en el diseño. Un <label> visible debe seguir siendo tu opción predeterminada — beneficia a todos los usuarios, no solo a los usuarios de lectores de pantalla — pero existen las siguientes opciones para los casos excepcionales.

`aria-label`

Usa aria-label para proporcionar un nombre accesible directamente en el control cuando no hay texto visible al que apuntar (por ejemplo, un campo de búsqueda con solo un icono de lupa).

<input type="search" aria-label="Search the site" />

`aria-labelledby`

Usa aria-labelledby cuando el texto de nombre ya existe en otro lugar de la página. Hace referencia a uno o más ids de elementos y, a diferencia de for, permite construir una etiqueta a partir de varias piezas de texto.

<span id="billing">Billing</span>
<span id="name">Name</span>
<input type="text" aria-labelledby="billing name" />

Cuando tanto un <label> como aria-labelledby están presentes, aria-labelledby tiene prioridad.

`placeholder` no es una etiqueta

Un placeholder es texto de ejemplo, no una etiqueta. Desaparece en cuanto el usuario escribe, ofrece un contraste de color deficiente en la mayoría de los navegadores y la tecnología de asistencia no lo anuncia de manera confiable como el nombre del campo. Siempre combina un input con un <label> real — nunca confíes solo en el placeholder.

<!-- Not accessible: no label, only a placeholder -->
<input type="email" placeholder="Email" />

<!-- Accessible: real label, placeholder is an optional hint -->
<label for="email">Email</label>
<input id="email" type="email" placeholder="[email protected]" />

Ejemplo de la etiqueta HTML `<label>` con propiedades de fuente CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
       padding: 20px;
      }
      label {
        font-size: 20px;
        font-weight: 700;
        color: #1c87c9;
      }
      input {
        width: 50%;
        height: 28px;
        padding: 4px 10px;
        border: 1px solid #666;
        background: #cce6ff;
        color: #1c87c9;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <form>
      <label for="user">Your Name:</label>
      <input id="user" name="Name" type="text" />
    </form>
  </body>
</html>

Pruébalo tú mismo »

Atributos

Atributo	Valor	Descripción
`accesskey`	`accesskey`	Define un atajo de teclado para enfocar el elemento de formulario asociado (no navega ni salta hacia él).
`for`	`element\_id`	Establece el ID del elemento al que debe vincularse la etiqueta.
`form`	`form\_id`	Especifica el(los) formulario(s) con el(los) que se asociará la etiqueta. Este atributo permite colocar etiquetas en cualquier lugar del documento, y no solo como descendiente del elemento `<form>`.

El elemento <label> también admite los Atributos Globales y los Atributos de Evento.

Ejemplo del atributo `form`:

El atributo form permite que la etiqueta se encuentre fuera del <form> al que pertenece. El control sigue usando la asociación normal for/id.

<form id="myForm">
  <input id="username" type="text" name="username" />
</form>
<label for="username" form="myForm">Username:</label>

Temas relacionados

Etiqueta HTML <input> — el control que se etiqueta con mayor frecuencia.
Etiqueta HTML <form> — el contenedor que agrupa etiquetas y controles.
Atributo HTML id — cómo se construye el enlace for/id.

Práctica

¿Qué método asocia correctamente una etiqueta con un input de texto llamado email?

Establecer el id del input en email y el atributo for de la etiqueta en email.Agregar un placeholder de Email al input en lugar de una etiqueta.Hacer coincidir el atributo for de la etiqueta con el atributo name del input.Dar a la etiqueta y al input el mismo nombre de clase.

Por qué las etiquetas son importantes

Las dos formas de asociar una etiqueta

Asociación explícita (for + id)

Asociación implícita (envolviendo el control)

Reglas y advertencias

Casillas de verificación y botones de radio

Etiquetado sin un <label> visible: ARIA y placeholder

aria-label

aria-labelledby

placeholder no es una etiqueta

Ejemplo de la etiqueta HTML <label> con propiedades de fuente CSS:

Atributos

Ejemplo del atributo form:

Temas relacionados

Práctica

Asociación explícita (`for` + `id`)

Etiquetado sin un `<label>` visible: ARIA y `placeholder`

`aria-label`

`aria-labelledby`

`placeholder` no es una etiqueta

Ejemplo de la etiqueta HTML `<label>` con propiedades de fuente CSS:

Ejemplo del atributo `form`: