HTML
Elemento de etiqueta

Sintaxis

• <label>Example <input type="radio" name="r"></label> // Envolviendo un elemento de control
• <label for="rad1">Example</label> <input id="rad1" type="radio" name="r"> // Using for attribute

Parámetros

Uso básico

Forma simple con etiquetas ...

<form action="/login" method="POST">
    
    <label for="username">Username:</label>
    <input id="username" type="text" name="username" />

    <label for="pass">Password:</label>
    <input id="pass" type="password" name="pass" />

    <input type="submit" name="submit" />

</form>

<form id="my-form" action="/login" method="POST">
    
    <input id="username" type="text" name="username" />

    <label for="pass">Password:</label>
    <input id="pass" type="password" name="pass" />

    <input type="submit" name="submit" />

</form>

<label for="username" form="my-form">Username:</label>

Sobre la etiqueta

El elemento <label> se utiliza para hacer referencia a un elemento de acción de formulario.
En el ámbito de la Interfaz de usuario, se utiliza para facilitar el destino / la selección de elementos como la radio Tipo o la checkbox .

<label> como envoltorio

Puede encerrar el elemento de acción deseado.

<label>
    <input type="checkbox" name="Cats">
    I like Cats!
</label>

(Al hacer clic en el texto, la input destino cambiará su estado / valor)

<label> como referencia

Al usar el atributo for , no tiene que colocar el elemento de control como descendiente de la label , pero el valor for debe coincidir con su ID

<input id="cats" type="checkbox" name="Cats">
<label for="cats" >I like Cats!</label>

Nota
No utilice más de un elemento de control dentro de un elemento <label>