¿Para qué sirve el atributo For en una etiqueta HTML?

Question

<label id="label1" for="txtTextBox"> 

¿cuál es el impacto de la etiqueta1 si coloco el atributo for allí?

Answer 1

Le permite crear una etiqueta que se adjunta a un elemento específico en el DOM. Cuando la etiqueta recibe un evento de mouse hacia abajo, enfoca el elemento al que está conectado.

<label for="username">Username:</label> 
<input type="text" id="username" name="username" /> 

Cuando el usuario hace clic en el texto "Nombre de usuario:" se enfocará en el cuadro de texto.

Esto también es bueno para la accesibilidad, ya que los lectores de pantalla leerán el código HTML interno de la etiqueta antes de leer el campo de entrada, independientemente del orden físico que aparezcan en el DOM.

Answer 2

Se refiere al id (no name!) Del elemento de formulario (entrada, seleccionar, texto, opción, etc.) que está etiquetando. La implicación de esto es que usar for permite hacer clic en la etiqueta y enfocar el elemento de formulario relacionado.

Answer 3

Según W3C,

El atributo se puede especificar para indicar un control de formulario con el que el subtítulo es para ser asociado. Si se especifica el atributo, el valor del atributo debe ser la ID de un elemento que se puede etiquetar en el mismo documento que el elemento de etiqueta.

Si se especifica el atributo y hay un elemento en el documento cuyo ID es igual al valor del atributo for, y el primer elemento es un elemento etiquetable, entonces ese elemento es el control etiquetado del elemento de etiqueta.

https://dev.w3.org/html5/spec-preview/the-label-element.html#attr-label-for

Una de sus ventajas es hacer clic en la etiqueta estará asociado elemento de entrada foco,

En caso de casilla de verificación o botón de radio, al hacer clic en la etiqueta será comprobar que la casilla de verificación/Radio pero no lo hace espacio de cubierta entre contenido de la etiqueta y la casilla de verificación/radio

<input type="radio" name="gender" id="male" value="male"> 
<label for="male">Male</label> 

<input type="radio" name="gender" id="female" value="female"> 
<label for="female">Female</label> 

yo u puede lograr lo mismo, haciendo de esta manera:

<label><input type="radio" name="gender" id="male" value="male"> Male </label> 
    <label><input type="radio" name="gender" id="female" value="female"> Female</label> 

pero esta práctica es discutible, prefiero la segunda casilla de verificación para los/Radio puesto que también cubre el espacio entre la etiqueta y la casilla de verificación/radio.

Answer 4

Parece realmente HTML5 specs deffines 2 maneras de < label> uso de la etiqueta y todos los principales navegadores soporta tanto extendiendo el área se puede hacer clic a la etiqueta y enfocar el control.

a) de control está anidado dentro de la etiqueta de

b) Label está vinculada de controlar con para & Identificación del atributos

<!-- Method a: nested --> 
 
<p> 
 
    <label> 
 
     Username1: 
 
     <input type="text" id="name_user" name="nameuser" /> 
 
    </label> 
 
</p> 
 

 
<!-- Method b: linked --> 
 
<p> 
 
    <label for="user_name">Username2: </label> 
 
    <input type="text" id="user_name" name="username" /> 
 
</p>

La única diferencia que he encontrado entre ambos métodos es que Vincular etiqueta a control (Método b) te permite separar la etiqueta y el control en tu diseño, por ejemplo, en 2 celdas de tabla diferentes.