¿Qué hace el atributo “for” en un HTML? ¿etiqueta?

10 minutos de lectura

avatar de usuario
jeff

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?

  • Publicación relacionada: ¿es necesario el atributo “para” en la etiqueta HTML si la entrada de destino está anidada dentro de la etiqueta?

    – RBT

    22 de mayo de 2021 a las 5:17

avatar de usuario
Barmar

los <label> La etiqueta le permite hacer clic en la etiqueta y se tratará como si hiciera 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 for atributo, 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 presionar la casilla en sí.

Leer más sobre el <label> elemento en MDN.

Asociar texto con una entrada es muy importante para la accesibilidad, ya que proporciona una nombre accesible por la entrada, para que la tecnología de asistencia pueda proporcionarla a los usuarios con discapacidades. Un lector de pantalla leería el texto de la etiqueta cuando el usuario enfoca la entrada. También puede decirle a su software de comando de voz que enfoque esa entrada, pero necesita un nombre (visible) para eso.

Leer más sobre Accesibilidad

  • Tenga en cuenta que el atributo for está vinculado a la entrada por el atributo id y el atributo name no tiene que coincidir. Seguirá funcionando

    – Glo

    15 de enero de 2015 a las 14:35


  • 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 con un select solo se enfoca en la selección en lugar de expandir las opciones.

    – Émile Pels

    08/02/2016 a las 13:30

  • @EmilePels En lo que respecta al modelo de eventos del navegador, son equivalentes. Lo que está describiendo es más sobre la interfaz de usuario proporcionada por el manejo de los menús desplegables por parte del sistema operativo, que está vinculado al mouse.

    – Barmar

    8 de febrero de 2016 a las 15:06

  • Me parece importante mencionar que es muy relevante para la accesibilidad y los lectores de pantalla, por qué usarlo activamente.

    – coyotte508

    6 de junio de 2016 a las 2:15

  • Estuve luchando las últimas dos horas con el clic del cuerpo levantado dos veces cada vez que hago clic en una etiqueta en un formulario con el atributo “para” en un campo de entrada. Finalmente entiendo por qué, incluso si uso stopPropagation en el clic de la etiqueta, el clic del cuerpo todavía se generó… debido al clic generado por el campo de entrada siguiendo el comportamiento que describiste.

    – Samuel

    8 de marzo de 2017 a las 16:25

avatar de usuario
Jukka K. Korpela

los for atributo asocia la etiqueta con un elemento de control, como se define en la descripción de label en la especificación HTML 4.01. Esto implica, entre otras cosas, que cuando el label elemento 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 brindar 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 de la pregunta (sin el for), el uso de label el marcado no tiene una implicación lógica o funcional: 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 las Pautas de accesibilidad al contenido web (WCAG) 2.0 sí lo hacen. Esto se describe en el documento técnico. H44: uso de elementos de etiqueta para asociar etiquetas de texto con controles de formulariolo que también explica que la asociación implícita (anidando, por ejemplo, input en el interior label) no es tan ampliamente compatible como la asociación explícita a través de for y id atributos,

  • +1 por hablar sobre la relación semántica y lo que significa más allá de la relación de clic funcional.

    – ulty4life

    13/08/2015 a las 19:00

  • Hola, tengo dos elementos con la misma identificación pero en diferentes div, agregué el evento de enfoque usando la etiqueta pero en el segundo elemento se enfoca en el primer elemento.

    Nombre
    Nombre

    – LoveToCode

    1 de agosto de 2019 a las 6:19

  • La especificación HTML dicta que los identificadores deben ser únicos. No se admite tener identificaciones duplicadas y tendrá consecuencias no deseadas como las que está experimentando.

    – ciberconte

    16 de abril de 2021 a las 5:46

En pocas palabras lo que hace es referirse a la 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">

  • 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 otros problemas. Entonces, si desea ser amigable con aquellos que quizás estén usando navegadores/lectores de pantalla alternativos, use este método.

    – frijol5

    14/04/2015 a las 21:22

avatar de usuario
F. Hauri – Abandonar GitHub

Usando label for= en formato html

Esto podría permitir disociar visualmente la(s) etiqueta(s) y el objeto mientras se mantienen vinculados.

Muestra: hay un caja y dos etiquetas.

  • Puede marcar/desmarcar la casilla haciendo clic en indiferentemente en

    • cualquier etiqueta o
    • en casillas de verificación,

    pero no en el texto ni en el contenido de entrada

<label for="demo1"> There is a label </label>
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sem velit, ultrices et, fermentum auctor, rhoncus ut, ligula. Phasellus at purus sed purus cursus iaculis. Suspendisse fermentum. Pellentesque et arcu. Maecenas viverra. In consectetuer, lorem eu lobortis egestas, velit odio imperdiet eros, sit amet sagittis nunc mi ac neque. Sed non ipsum. Nullam venenatis gravida orci.
<br />
<label for="demo1"> There is a 2nd label </label>
<input id="demo1" type="checkbox">Demo 1</input>

Algunos trucos útiles

La misma muestra, pero con dos casillas de verificación y algunos efectos CSS diferentes (como escribir en texto: Select this o Deselect this reflejando el estado de la casilla de verificación.).

Mediante el uso de la hoja de estilo CSS poder puedes hacer muchas cosas interesantes…

body { background: #DDD; } 
.button:before { content: 'S'; }
.box:before { content: '☐'; }
label.button   { background: #BBB;
    border-top: solid 2px white;border-left: solid 2px white;
    border-right: solid 2px black;border-bottom: solid black 2px; }

#demo2:checked ~ .but2:before { content: 'Des'; }
#demo2:checked ~ .but2  { background: #CCC;
    border-top: solid 2px black;border-left: solid 2px black;
    border-right: solid 2px white;border-bottom: solid white 2px; }
#demo2:checked ~ .box2:before { content: '☒'; }

#demo1:checked ~ .but1  { background: #CCC;
    border-top: solid 2px black;border-left: solid 2px black;
    border-right: solid 2px white;border-bottom: solid white 2px; }

#demo1:checked ~ .but1:before { content: 'Des'; }
#demo1:checked ~ .box1:before { content: '☒'; }
<input id="demo1" type="checkbox">Demo 1</input>
<input id="demo2" type="checkbox">Demo 2</input>
<br />
<label for="demo1" class="button but1">elect 1</label> - 
<label for="demo2" class="button but2">elect 2</label>
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sem velit, ultrices et, fermentum auctor, rhoncus ut, ligula. Phasellus at purus sed purus cursus iaculis. Suspendisse fermentum. Pellentesque et arcu. Maecenas viverra. In consectetuer, lorem eu lobortis ...
<br />
<label for="demo1" class="but1 button">elect this 2nd label for box 1</label> - 
<label class="but2 button" for="demo2">elect this other 2nd label for box 2</label>
<br /><br />
<label for="demo1" class="box box1"> check 1</label>
<label for="demo2" class="box2 box"> check 2</label>

Ejemplo de uso: alternar la barra lateral solo con CSS (segundo fragmento).

En esta respuesta, solo uso CSS y label for para agregar una barra lateral que podría alternarse sin el uso de ningún código javascript.

avatar de usuario
Raúl Tripathi

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

  • Sí, pero ¿qué quieres decir con “unirlos”? Ya son vecinos en la estructura HTML. Esto es lo que no entiendo.

    – jeff

    25 de agosto de 2013 a las 18:43

  • FOR Especifica a qué elemento de formulario está vinculada una etiqueta

    – Raúl Tripathi

    25 de agosto de 2013 a las 18:44

  • @CengizFrostclaw jsfiddle.net/DmSGh — Intente hacer clic en los dos textos “Ingresar aquí” y vea qué sucede.

    – JJJ

    25 de agosto de 2013 a las 18:45

  • @CengizFrostclaw: – Una etiqueta se puede vincular a un elemento utilizando el atributo “para”

    – Raúl Tripathi

    25 de agosto de 2013 a las 18:46

  • Hay algunas características agradables, por ejemplo, cuando usa botones de opción. Al hacer clic en la etiqueta, se activará el botón de opción. Esta es una buena característica cuando intenta usar botones de opción con una interfaz de usuario personalizada.

    – Alex

    25 de agosto de 2013 a las 18:46

avatar de usuario
Andrés Truckle

los for El atributo muestra que esta etiqueta representa un campo de entrada relacionado, una casilla de verificación o un botón de radio o cualquier otro campo de entrada 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>

  • Sí, pero ¿qué quieres decir con “unirlos”? Ya son vecinos en la estructura HTML. Esto es lo que no entiendo.

    – jeff

    25 de agosto de 2013 a las 18:43

  • FOR Especifica a qué elemento de formulario está vinculada una etiqueta

    – Raúl Tripathi

    25 de agosto de 2013 a las 18:44

  • @CengizFrostclaw jsfiddle.net/DmSGh — Intente hacer clic en los dos textos “Ingresar aquí” y vea qué sucede.

    – JJJ

    25 de agosto de 2013 a las 18:45

  • @CengizFrostclaw: – Una etiqueta se puede vincular a un elemento utilizando el atributo “para”

    – Raúl Tripathi

    25 de agosto de 2013 a las 18:46

  • Hay algunas características agradables, por ejemplo, cuando usa botones de opción. Al hacer clic en la etiqueta, se activará el botón de opción. Esta es una buena característica cuando intenta usar botones de opción con una interfaz de usuario personalizada.

    – Alex

    25 de agosto de 2013 a las 18:46

avatar de usuario
pitag0ras_

Etiqueta cualquier entrada que sea el parámetro para el for atributo.

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

¿Ha sido útil esta solución?