Elemento label en HTML

Elemento label en HTML

El elemento label en HTML se utiliza para asociar texto descriptivo con controles de formulario, para mejorar la accesibilidad, aumentar el area de clickeo y dar contexto semantico a cada campo.

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

El atributo for se utiliza para asociar de forma explicita el label con el campo, este debe llevar el mismo valor del atributo id.

<label for="email">Correo electrónico:</label>
<input type="email" id="email">

Otra forma de asociar es mediante el anidamiento o contención implicita.

<label>
  Acepto los términos
  <input type="checkbox" name="terminos">
</label>

Tambien posee el atributo accesskey para indicar atajos en el teclado.

<label for="buscar" accesskey="B">Buscar (Alt+B):</label>
<input type="text" id="buscar">

Ejemplo practico

Subscripción a newsletter

<form>
  <div>
    <label for="nombre">Nombre completo:</label>
    <input type="text" id="nombre" required>
  </div>

  <div>
    <label for="clave">Contraseña:</label>
    <input type="password" id="clave" minlength="8" required>
  </div>

  <label>
    <input type="checkbox" name="newsletter">
    Suscribirse al newsletter
  </label>
</form>

Seleccionar metodos de pago

<fieldset>
  <legend>Método de pago</legend>
  
  <label>
    <input type="radio" name="pago" value="tarjeta" checked>
    Tarjeta de crédito
  </label>
  
  <label>
    <input type="radio" name="pago" value="paypal">
    PayPal
  </label>
</fieldset>