¿Qué hace el atributo " for " en la etiqueta HTML?
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 se utiliza una biblioteca JavaScript especial, pero aparte de eso, ¿valida el HTML o se requiere por alguna otra razón?
4 answers
La etiqueta <label> le permite hacer clic en la etiqueta, y se tratará como hacer clic en el elemento de entrada asociado. Hay dos maneras de crear esta asociación:
Primero, puede envolver el elemento label alrededor del elemento input:
<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 texto asociado en lugar de tener que golpear el cuadro en sí.
Lea más sobre este elemento en MDN.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-23 16:58:16
El atributo for asocia la etiqueta con un elemento de control, tal como se define en la descripción de label en la especificación HTML 4.01. Esto implica, entre otras cosas, que cuando el elemento label recibe el foco (por ejemplo, al hacer clic en), 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 dar al usuario una manera de preguntar qué es la etiqueta asociada, cuando se trata de un control. (El 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 marcado no tiene ninguna implicación lógica o funcional – es inútil, a menos que hagas 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 formulario , lo que también explica que la asociación implícita (anidando, por ejemplo, input dentro de label) no está tan ampliamente soportada como la asociación explícita a través de los atributos for y id,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-26 13:13:34
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">
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-29 14:06:10
El atributo for de la etiqueta <label> debe ser igual al atributo id del elemento relacionado para unirlos.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-08-25 18:42:50