Etiqueta <label> de HTML

Definición y uso

<label> La etiqueta define una anotación (etiqueta) para el elemento input.

El elemento label no presenta efectos especiales al usuario. Sin embargo, mejora la accesibilidad para los usuarios de ratón. Si hace clic en el texto dentro del elemento label, se activará este control. Es decir, cuando el usuario selecciona esta etiqueta, el navegador se transferirá automáticamente el foco al control de formulario relacionado con la etiqueta.

<label> La etiqueta de Atributo for Debería ser idéntica a la propiedad id del elemento relacionado.

<label> La etiqueta puede definir etiquetas (marcas) para varios elementos:

El uso correcto de los elementos mencionados y la etiqueta beneficiará a los siguientes usuarios:

  • Usuarios de lector de pantalla (cuando el usuario se centra en un elemento, se lee la etiqueta)
  • es muy difícil hacer clic en áreas muy pequeñas (por ejemplo, casillas de verificación) - porque cuando el usuario hace clic <label> Los usuarios que tienen dificultades para hacer clic en áreas muy pequeñas (por ejemplo, casillas de verificación) - porque cuando el usuario hace clic

Véase también:

Manual de referencia de HTML DOM:Objeto Label

Ejemplo

Tres botones de opción con label:

<form action="/action_page.php">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Enviar">
</form>

Prueba por ti mismo

Consejos y comentarios

Consejo:<label> La propiedad for debe coincidir con la propiedad id del elemento relacionado para poder unirlos. También se puede lograr colocando el elemento en <label> El elemento coloca la etiqueta dentro del elemento.

Atributo

Atributo Valor Descripción
for ID del elemento Define a qué elemento del formulario se une el label.
form ID del formulario Define a qué campo de formulario pertenece el campo label.

Atributos globales

<label> La etiqueta también admite Atributos globales en HTML.

Atributos de eventos

<label> La etiqueta también admite Atributos de eventos en HTML.

Configuración CSS predeterminada

La mayoría de los navegadores mostrarán los siguientes valores predeterminados <label> Elemento:

label {
  cursor: default;
}

Prueba por ti mismo

Compatibilidad con navegadores

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte