La etiqueta HTML <label> representa un título para un control de la interfaz de usuario (generalmente un control de formulario, aunque podría servir como etiqueta para cualquier elemento que interactúe con el usuario, como botones, listas desplegables, barras de desplazamiento, etc).
La etiqueta <label> te permite adjuntar un título/etiqueta a un control para que el usuario sepa para qué sirve el control. Por ejemplo, un campo de entrada que acepta el nombre del usuario podría tener una label que diga “Nombre: “.
Algunos navegadores permiten a los usuarios seleccionar una opción de botón de radio o casilla de verificación haciendo clic en su elemento <label>.
Sintaxis
La etiqueta <label> se escribe como <label></label> con el texto de la etiqueta insertado entre las etiquetas de inicio y fin.
Puedes usar la etiqueta <label> de dos maneras. Puedes incluir el control asociado dentro de las etiquetas de apertura y cierre del elemento <label>. O puedes hacer referencia al elemento asociado por su ID usando el atributo for.
Como esto:
<label>Nombre: <input type="text" id="fname"></label>O esto:
<label for="fname">Nombre: </label>
<input type="text" id="fname">Ejemplos
Uso básico de la etiqueta
En este ejemplo, la etiqueta <label> rodea un control de formulario de botón de opción (botón de radio) (elemento <input>).
<p>¿Qué premio prefieres?</p>
<form>
<label><input type="radio" name="prize" value="house">Casa</label>
<label><input type="radio" name="prize" value="money">$1 millón</label>
<label><input type="radio" name="prize" value="none">No quiero premio gracias, ya estoy feliz :)</label>
</form>El atributo for
Este ejemplo tiene el mismo resultado que el ejemplo anterior. La diferencia es que, en este ejemplo, el elemento <label> no incluye el control del formulario (el control del formulario no está anidado dentro de la etiqueta <label>, como en el ejemplo anterior). En cambio, usa el atributo for para asociar la etiqueta <label> con un control.
<p>¿Qué premio prefieres?</p>
<form>
<input type="radio" name="prize" value="house" id="house">
<label for="house">Casa</label>
<input type="radio" name="prize" value="money" id="money">
<label for="money">$1 millón</label>
<input type="radio" name="prize" value="none" id="none">
<label for="none">No quiero premio gracias, ya estoy feliz :)</label>
</form>Atributos
Los atributos se pueden agregar a un elemento HTML para proporcionar más información sobre cómo debe aparecer o comportarse el elemento.
El elemento <label> acepta los siguientes atributos.Atributo Descripción forEspecifica el control de entrada para el que es esta etiqueta. Este valor debe ser el mismo que el valor en el atributo “id” del control de entrada. formEspecifica el ID de un formulario al que pertenece este control.
Posibles valores:
[ID de un elemento de formulario que se encuentra en el mismo documento HTML.]
Atributos globales
Los siguientes atributos son estándar en todos los elementos HTML. Por lo tanto, puedes usar estos atributos con la etiqueta <label>, así como con todas las demás etiquetas HTML.
accesskeyautocapitalizeclasscontenteditabledata-*dirdraggablehiddenidinputmodeisitemiditempropitemrefitemscopeitemtypelangpartslotspellcheckstyletabindextitletranslate
Para una explicación completa de estos atributos, consulta los atributos globales de HTML 5.
