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.
Tabla de contenidos
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
.
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.