HTML label

La etiqueta <label> en HTML es utilizada para asociar una descripción con un elemento de formulario específico. Por ejemplo, si tiene una entrada de texto en su formulario, puede usar una etiqueta de etiqueta para describir el propósito de ese campo de entrada.

Ejemplo de uso

La forma más común de utilizar la etiqueta <label> es mediante el atributo for, el cual se refiere al id del elemento de formulario al cual se está asociando la etiqueta. Por ejemplo:


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

Lenguaje del código: HTML, XML (xml)

Además, también se puede usar como un contenedor para el elemento de formulario, en cuyo caso se debe agregar el atributo form al elemento de formulario correspondiente, ejemplo:


<form>
  <label>
    Nombre:
    <input type="text" id="name" name="name" form="form1">
  </label>
</form>
Lenguaje del código: HTML, XML (xml)

Atributos

Los atributos más comunes de la etiqueta <label> en HTML5 son:

  1. for: Especifica el id del elemento de formulario al cual se está asociando la etiqueta.
  • form: Define el id del formulario al cual pertenece el elemento de formulario al cual se está asociando la etiqueta.
  • accesskey: Especifica una tecla de acceso rápido para la etiqueta.
  • class: Especifica una o varias clases para estilizar la etiqueta mediante CSS.
  • id: Especifica un identificador único para la etiqueta, que puede ser usado para estilizar la etiqueta mediante CSS o para enlazar con scripts.
  • style: Especifica un estilo en línea para la etiqueta.
  • title: Especifica un título o una descripción adicional para la etiqueta.
  • onclick: Especifica un script que se ejecuta cuando se hace clic en la etiqueta.

Algunos de estos atributos son opcionales y pueden ser utilizados dependiendo del contexto o necesidad.

Ejemplo

Aquí tienes un ejemplo de cómo utilizar la etiqueta <label> junto con algunos de sus atributos en HTML5:


<form id="form1">
  <label for="nombre" accesskey="n" class="required">Nombre:</label>
  <input type="text" id="nombre" name="nombre" required>
  <br>
  <label for="email" form="form1">Email:</label>
  <input type="email" id="email" name="email">
  <br>
  <input type="submit" value="Enviar">
</form>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, se está utilizando la etiqueta <label> para describir los campos de formulario “Nombre” y “Email”. El atributo for se utiliza para asociar la etiqueta con el campo de formulario correspondiente, utilizando el valor del atributo id del campo.

El atributo accesskey se utiliza para asignar una tecla de acceso rápido para la etiqueta “Nombre” y el atributo form se utiliza para asociar la etiqueta “Email” con el formulario cuyo id es “form1”.