Elemento label

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento label representa una etiqueta que puede ser asociada a un control de formulario, y que se supone provee una descripción corta para éste. Los navegadores pueden enlazar ambos elementos permitiendo que los usuarios establezcan el enfoque sobre el control al hacer clic en su etiqueta.

Existen dos formas de asociar a un elemento label con un control: insertando al texto de la etiqueta y al control dentro de label; o haciendo que coincidan los valores del atributo id en el control y del atributo for en label.

HTML5 ha introducido el atributo form, para ciertos elementos de formulario, permitiendo a los autores asociar explícitamente un control a un formulario. Sin embargo, este atributo ha sido recientemente removido del elemento label debido a su escasa utilidad.

Ejemplos

En el primer ejemplo, crearemos un formulario de acceso simple y asociaremos un par de etiquetas a ambos controles presentes (una entrada de texto y una entrada de contraseña). En este caso, haremos la asociación incluyendo a la etiquta y al control como contenido del elemento label.

Aquí podrás ver como tu navegador asocia ambos elementos por interacción: intenta hacer clic en la etiqueta y observa cómo el control asiciado obtiene automáticamente el enfoque.

<form action="../../form-result.php" method="post" target="_blank">
  <p><label>Nombre de usuario: <input type="text" name="usuario"></label></p>
  <p><label>Contraseña: <input type="password" name="pass"></label></p>
  <p><input type="submit" value="Enviar datos"></p>
</form>

Ahora, asociaremos etiquetas y controles con el segundo método: haciendo que los atributos id en el control y for en label, coincidan.

<form action="../../form-result.php" method="post" target="_blank">
  <p><label for="pensamiento_id">¿Qué estás pensando?:</label></p>
  <p><input type="text" name="pensamiento" id="pensamiento_id"></p>
  <p><input type="submit" value="Enviar datos"></p>
</form>

Atributos

for

Un identificador que coincide con el valor del atributo id del control con el que esta etiqueta está asociada.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p><label for="numpeliculas_id">¿Cuántas películas has visto este año?</label></p>
  <p><input type="number" name="numpeliculas" id="numpeliculas_id"></p>
  <p><input type="submit" value="Enviar datos"></p>
</form>

form

Un identificador que coincide con el valor del atributo id del formulario con el que esta etiqueta está asociada.

El atributo form ha sido recientemente removido del elemento label debido a su escasa utilidad.

Ejemplo

<p><label for="nombre_id" form="form1">Nombre:</label></p>
<form id="form1" action="../../form-result.php">
  <p><input type="text" name="nombre" id="nombre_id"></p>
  <p><input type="submit" value="Enviar datos"></p>
</form>

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.