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

382

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 JavaScript especial, pero aparte de eso, ¿valida el HTML o lo requiere por alguna otra razón?

html forms input label jeff
fuente

Respuestas:

578

La <label>etiqueta le 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:

Una forma es 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 foratributo, dándole la 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 presionar la casilla en sí.

Lea más sobre este elemento en MDN .

Barmar
fuente
107
Tenga en cuenta que el atributo for está vinculado a la entrada por el atributo id, y el atributo de nombre no tiene que coincidir. <label for = "theinput"> Ingrese aquí: </label> <input type = 'text' name = 'notmatching' id = 'theinput'> Seguirá funcionando
Glo
44
Un clic en la etiqueta no siempre se trata exactamente como hacer clic en el elemento asociado. En Chrome y Safari, por ejemplo, al hacer clic en una etiqueta asociada a un selectsolo se enfoca en la selección en lugar de expandir las opciones.
Emile Pels
2
@EmilePels En lo que respecta al modelo de eventos del navegador, son equivalentes. Lo que está describiendo es más acerca de la interfaz de usuario proporcionada por el manejo del sistema operativo de los menús desplegables, que está vinculada al mouse.
Barmar
3
Parece importante mencionar que es muy relevante para la accesibilidad y los lectores de pantalla, por qué usarlo activamente.
coyotte508
1
Estuve luchando las últimas dos horas con el clic del cuerpo elevado dos veces cada vez que hago clic en una etiqueta en un formulario con el atributo "for" en un campo de entrada. Finalmente entiendo por qué, incluso si uso stopPropagation en el clic de la etiqueta, por qué el clic del cuerpo todavía se levantó ... debido al clic hecho por el campo de entrada siguiendo el comportamiento que usted describió.
Samuel
53

El foratributo asocia la etiqueta con un elemento de control, como se define en la descripción de labella especificación HTML 4.01. Esto implica, entre otras cosas, que cuando el labelelemento recibe el foco (por ejemplo, al hacer clic en él), pasa el foco a su control asociado. La asociación entre una etiqueta y un control también puede ser utilizada por agentes de usuario basados ​​en voz, lo que puede proporcionar al usuario una forma de preguntar cuál 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 en la pregunta (sin el for), el uso del labelmarcado 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 hacen obligatorio asociar las etiquetas con los controles, pero las Pautas de Accesibilidad al Contenido en la Web (WCAG) 2.0 sí. Esto se describe en el documento técnico H44: el 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, inputdentro label) no es tan ampliamente compatible como la asociación explícita vía fory idatributos,

Jukka K. Korpela
fuente
10
+1 por hablar sobre la relación semántica y lo que significa más allá de la relación funcional de clics.
ulty4life
Hola, tengo dos elementos con la misma identificación pero en un div diferente, agregué un evento de enfoque usando la etiqueta pero en el segundo elemento se está enfocando en el primer elemento. <html> <body> <div id = "first_div"> <label for = "name"> Name </label> <input type = "text" id = "name"> </div> <div id = "second_div "> <label for =" name "> Name </label> <input type =" text "id =" name "> </div> </body> </html>
LoveToCode
14

En pocas palabras, lo que hace es referirse a idla 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">
Uwe Keim
fuente
66
Agregar un for es importante, incluso si son adyacentes. Me parece recordar haber escuchado que algunos lectores de pantalla para personas con discapacidad visual tienen problemas de otra manera. Entonces, si desea ser amigable con aquellos que tal vez estén usando navegadores / lectores de pantalla alternativos, use este método.
bean5
3

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

Rahul Tripathi
fuente
77
Sí, pero ¿qué quieres decir con "unirlos"? Ya son vecinos en la estructura HTML. Esto es lo que no entiendo.
Jeff
1
FOR Especifica a qué elemento de formulario está vinculada una etiqueta
Rahul Tripathi
2
@CengizFrostclaw jsfiddle.net/DmSGh --- intente hacer clic en los dos textos "Ingrese aquí" y vea qué sucede.
JJJ
1
@CengizFrostclaw: - Una etiqueta puede vincularse a un elemento mediante el atributo "for"
Rahul Tripathi
1
Hay algunas características interesantes, por ejemplo, cuando usa botones de radio. Al hacer clic en la etiqueta, se activará el botón de opción. Esta es una buena característica cuando intentas usar botones de radio con una interfaz de usuario personalizada.
Alex
0

El atributo for muestra que esta etiqueta significa campo de entrada relacionado, o casilla de verificación o botón de opción o cualquier otro campo de ingreso de datos asociado con él. por ejemplo

    <li>
<label>{translate:blindcopy}</label>
            <a class="" href="#" title="{translate:savetemplate}" onclick="" ><i class="fa fa-list" class="button" ></i></a> &nbsp 
            <input type="text" id="BlindCopy" name="BlindCopy" class="splitblindcopy" />
    </li>
Paz
fuente
0

Rotula cualquier entrada que sea el parámetro para el foratributo.

<input id='myInput' type='radio'>
<label for='myInput'>My 1st Radio Label</label>
<br>
<input id='input2' type='radio'>
<label for='input2'>My 2nd Radio Label</label>
<br>
<input id='input3' type='radio'>
<label for='input3'>My 3rd Radio Label</label>
Expandir fragmento

pythag0ras_
fuente