form - label text html

¿Qué hace el atributo "for" en la etiqueta HTML<label>?

Question

Me pregunto cuál es la diferencia entre los siguientes dos fragmentos de código:

<label>Input here : </label>
<input type=''text'' name=''theinput'' id=''theinput''/>

y

<label for=''theinput''>Input here : </label>
<input type=''text'' name=''theinput'' id=''theinput''/>

Estoy seguro de que hace algo cuando usa una biblioteca especial de JavaScript, pero aparte de eso, ¿valida el HTML o es necesario por alguna otra razón?

Answer 1

El atributo for asocia la etiqueta con un elemento de control, como se define en la descripción de la label en la especificación HTML 4.01. Esto implica, entre otras cosas, que cuando el elemento de la label recibe el enfoque (por ejemplo, al hacer clic en él), pasa el enfoque a su control asociado. La asociación entre una etiqueta y un control también puede ser utilizada por agentes de usuario basados ​​en el habla, lo que le da al usuario una forma de preguntar qué es la etiqueta asociada, cuando se trata de un control. (La asociación puede no ser tan obvia como en la representación visual).

En el primer ejemplo de la pregunta (sin el for ), el uso del marcado de label no tiene implicaciones lógicas o funcionales; es inútil, a menos que haga algo con él en CSS o JavaScript.

Las especificaciones HTML no obligan a asociar etiquetas con controles, pero sí lo hacen las Pautas de Accesibilidad al Contenido Web (WCAG) 2.0. Esto se describe en el documento técnico H44: Uso de elementos de etiqueta para asociar etiquetas de texto con controles de formulario , que también explica que la asociación implícita (anidando, por ejemplo, input dentro de la label ) no es tan ampliamente compatible como la asociación explícita a través for atributos for e id .

Answer 2

El atributo for de la <label> debe ser igual al atributo id del elemento relacionado para unirlos.

Answer 3

En pocas palabras, lo que hace es referirse al id de la entrada, eso es todo:

<label for="the-id-of-the-input">Input here:</label>
<input type="text" name="the-name-of-input" id="the-id-of-the-input">

Answer 4

La <label> permite hacer clic en la etiqueta, y se tratará como hacer clic en el elemento de entrada asociado. Hay dos formas de crear esta asociación:

Primero, puedes envolver el elemento de etiqueta alrededor del elemento de entrada:

<label>Input here:
    <input type=''text'' name=''theinput'' id=''theinput''>
</label>

La otra forma es usar el atributo for , dándole el ID de la entrada asociada:

<label for="theinput">Input here:</label>
<input type=''text'' name=''whatever'' id=''theinput''>

Esto es especialmente útil para usar con casillas de verificación y botones, ya que significa que puede marcar la casilla haciendo clic en el texto asociado en lugar de tener que golpear la casilla en sí.

Lea más sobre este elemento en MDN .