Lección 15. Labels.

La etiqueta label se utiliza para describir o asociar un texto con un elemento de formulario como input, textarea o select.

Su uso es muy importante en la accesibilidad y mejora la experiencia del usuario, ya que permite seleccionar el campo haciendo click directamente en el label.

¿Qué es un label?_

Un label es un texto que describe la función del campo que acompaña.

Por ejemplo:

Copiar código
<label>Nombre:</label>
<input type="text">

Nota: En este caso el label no está asociado directamente al input, solo está colocado encima. Para una asociación correcta, se usa el atributo for.

Asociar label con for e id._

Para vincular un label a un input se utiliza el atributo for, cuyo valor debe ser exactamente igual al id del input.

Copiar código
<label for="nombre">Nombre:</label>
<input type="text" id="nombre">

Ahora, cuando el usuario hace click en el label, el input automáticamente obtiene el foco.

Nota: Esto es especialmente útil para mejorar la accesibilidad.

Label en checkbox y radio._

El uso del label es aún más común en los inputs como checkbox y radio, donde el texto funciona como parte del mismo botón seleccionable.

Copiar código
<input type="checkbox" id="terminos">
<label for="terminos">Acepto los términos y condiciones</label>

Nota: Esto permite que el usuario haga click en el label para activar el checkbox, lo cual mejora muchísimo la usabilidad.

Label con textarea y select._

También se pueden asociar labels con otros elementos de formulario como textarea y select.

Copiar código
<label for="descripcion">Descripción:</label>
<textarea id="descripcion"></textarea>

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

El uso del atributo for siempre debe apuntar al id correcto.

Buenas prácticas._