La Etiqueta LABEL

La etiqueta <label> se utiliza para asociar un texto descriptivo con un elemento de formulario (como <input>, <select>, o <textarea>). Esto mejora la accesibilidad (para lectores de pantalla) y la usabilidad, ya que al hacer clic en el texto de la etiqueta, el campo asociado se enfoca o activa.

Sintaxis básica

Hay dos formas de usar <label>:

Vinculación explícita con for e id

Asocia la etiqueta a un elemento usando el atributo for (que debe coincidir con el id del elemento).

<label for="nombre">Nombre:</label>
<input type="text" id="nombre">

Vinculación implícita (anidando el elemento)

El elemento de formulario se coloca dentro de la etiqueta:

<label>
  Edad: 
  <input type="number">
</label>

Beneficios clave

• Accesibilidad: Los lectores de pantalla anuncian el texto de la etiqueta al enfocar el campo.

• Usabilidad: El área clickeable se amplía (útil en móviles y checkboxes/radios).

• Claridad: Los usuarios saben qué dato deben ingresar.

Ejemplos prácticos

Ejemplo 1: Campo de texto básico

<label for="email">Correo electrónico:</label>
<input type="email" id="email" placeholder="ejemplo@email.com">

Resultado:
Al hacer clic en "Correo electrónico", el campo de texto se enfoca.

Ejemplo 2: Checkbox y Radio buttons

<!-- Checkbox -->
<label for="terminos">
  <input type="checkbox" id="terminos"> Acepto los términos
</label>

<!-- Radio buttons -->
<label for="hombre">
  <input type="radio" id="hombre" name="genero"> Hombre
</label>
<label for="mujer">
  <input type="radio" id="mujer" name="genero"> Mujer
</label>

Resultado:
Hacer clic en el texto activa el checkbox o radio button.

Ejemplo 3: Lista desplegable (<select>)

<label for="pais">País:</label>
<select id="pais">
  <option>México</option>
  <option>España</option>
</select>

Ejemplo 4: Textarea

<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" rows="4"></textarea>

Estilizar etiquetas con CSS

Puedes personalizar las etiquetas para que tus formularios se vean más profesionales:

label {
  display: block; /* Hace que cada label esté en una línea nueva */
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}

/* Estilo para checkboxes/radios (alineación horizontal) */
label input[type="checkbox"],
label input[type="radio"] {
  margin-right: 5px;
}

Errores comunes

No vincular for e id:
Si usas for, asegúrate de que el id del elemento coincida.

<!-- Incorrecto -->
<label for="edad">Edad:</label>
<input type="number" id="edades">

Etiquetas no descriptivas:
Evita textos genéricos como "Haz clic aquí".

<!-- Incorrecto -->
<label for="input1">Input 1:</label>
<!-- Correcto -->
<label for="direccion">Dirección:</label>

Mejores prácticas

Usa <label> siempre: Incluso si ocultas visualmente el texto (para accesibilidad).

Agrupa elementos relacionados: Con <fieldset> y <legend>:

<fieldset>
  <legend>Información de contacto</legend>
  <label for="telefono">Teléfono:</label>
  <input type="tel" id="telefono">
</fieldset>

Combina con ARIA: Para casos avanzados, usa aria-labelledby o aria-label.

¿Por qué es crucial en móviles?

En dispositivos táctiles, el área clickeable de checkboxes y radios es pequeña. Con <label>, el usuario puede tocar el texto para seleccionar la opción.

Prueba de accesibilidad

• Usa un lector de pantalla como NVDA o VoiceOver.

• Navega por el formulario usando la tecla <kbd>Tab</kbd>.

• Verifica que el texto de la etiqueta se anuncie claramente.

Con este tutorial, podrás crear formularios más accesibles, usables y profesionales. ¡Empieza a usar <label> en todos tus proyectos!