Etiqueta HTML <label>
La etiqueta <label> define una etiqueta de texto para la etiqueta <input>. Al hacer clic en la etiqueta, se enfoca o activa el elemento de formulario asociado. Mejora la usabilidad de los formularios, ya que no siempre es conveniente apuntar con precisión a controles de formulario pequeños con el cursor.
La etiqueta <label> también se usa para definir atajos de teclado para enfocar el elemento asociado.
Un input puede asociarse con varias etiquetas. Si haces clic o tocas una <label> que está asociada con un control de formulario, el evento de clic resultante se activará para el control asociado.
Asociar una <label> con un elemento <input> tiene algunas ventajas:
- El texto de la etiqueta está asociado tanto visualmente como de forma programática con el campo de texto.
- Puedes hacer clic en la etiqueta asociada para enfocar o activar el input, así como en el propio input.
Sintaxis
La etiqueta <label> viene en pares. El contenido se escribe entre las etiquetas de apertura (<label>) y cierre (</label>).
Hay dos formas de asociar una etiqueta de texto con el control de formulario al que pertenece:
- Establece el identificador (
id) dentro del elemento<input>y especifica su nombre como atributoforpara la etiqueta<label>.
Ejemplo de la etiqueta HTML <label>:
Ejemplo de la etiqueta HTML <label>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<label for="lfname">First name:</label>
<input id="lfname" name="fname" type="text" />
</form>
</body>
</html>Resultado
- Inserta el
<input>dentro del elemento<label>. Nota: generalmente se prefiere anidar el input dentro de la etiqueta por accesibilidad y simplicidad del código.
Ejemplo de la etiqueta HTML <label> con un elemento <input> dentro:
Un ejemplo de la etiqueta HTML <label> que incluye la etiqueta HTML <input>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<label>Name
<input id="User" name="Name" type="text" />
</label>
</form>
</body>
</html>Ejemplo de HTML <form> con una etiqueta <label> usada con un tipo radio de una etiqueta <input>:
Ejemplo de la etiqueta HTML <label> con un tipo radio de la etiqueta HTML <input>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<label for="barca">Barcelona</label>
<input type="radio" name="team" id="barca" value="Barcelona" />
<br />
<label for="real">Real Madrid</label>
<input type="radio" name="team" id="real" value="Real Madrid" />
<br />
</form>
</body>
</html>Ejemplo de la etiqueta HTML <label> con propiedades de fuente CSS:
Ejemplo de la etiqueta HTML <label> con propiedades de fuente CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
padding: 20px;
}
label {
font-size: 20px;
font-weight: 700;
color: #1c87c9;
}
input {
width: 50%;
height: 28px;
padding: 4px 10px;
border: 1px solid #666;
background: #cce6ff;
color: #1c87c9;
font-size: 16px;
}
</style>
</head>
<body>
<form>
<label>Your Name:</label>
<input id="User" name="Name" type="text"/>
</form>
</body>
</html>Atributos
| Attribute | Value | Description |
|---|---|---|
accesskey | accesskey | Define un atajo de teclado para enfocar el elemento de formulario asociado (no navega ni salta hasta él). |
for | element\_id | Establece el ID del elemento al que debe vincularse la etiqueta. |
form | form\_id | Especifica el/los formulario(s) con los que se asociará la etiqueta. Este atributo te permite colocar etiquetas en una ubicación arbitraria del documento, y no solo como descendiente del elemento <form>. |
El elemento <label> también admite los atributos globales y los atributos de eventos.
Ejemplo del atributo form:
<form id="myForm">
<input type="text" name="username" />
</form>
<label for="username" form="myForm">Username:</label>Cómo dar estilo a una etiqueta HTML <label>
{
"tag_name": "label"
}Practice
What is the purpose of the HTML <label> tag?