Atributo label / formularios html

 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. 

Dicho elemento no muestra absolutamente nada en pantalla y, sin embargo, es una etiqueta que mejora la usabilidad y accesibilidad de los formularios. Es fundamental para usuarios que utilicen algún tipo de ayuda a la navegación.

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

Ejemplo Nº1:

<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>

Nombre de usuario:
Contraseña:

Ejemplo Nº2:

<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>

¿Qué estás pensando?:



Nota importante: No hay que confundir la etiqueta label del atributo optgroup con la etiqueta label del elemento. Son cosas muy diferentes.

Fuentes: Activate, Google España
htmlquick

accesibilidadweb