Que fait l'attribut "for" dans la balise HTML <label>?
Je me demande quelle est la différence entre les deux extraits de code suivants:
<label>Input here : </label>
<input type='text' name='theinput' id='theinput'/>
et
<label for='theinput'>Input here : </label>
<input type='text' name='theinput' id='theinput'/>
Je suis sûr que cela fonctionne lorsque vous utilisez une bibliothèque JavaScript spéciale, mais cela mis à part, valide-t-il le code HTML ou est-il requis pour une autre raison?
La balise <label> vous permet de cliquer sur l'étiquette et celle-ci sera traitée comme si vous cliquez sur l'élément d'entrée associé. Il y a deux façons de créer cette association:
Une solution consiste à envelopper l'élément label autour de l'élément input:
<label>Input here:
<input type='text' name='theinput' id='theinput'>
</label>
L’autre méthode consiste à utiliser l’attribut for, en lui donnant l’ID de l’entrée associée:
<label for="theinput">Input here:</label>
<input type='text' name='whatever' id='theinput'>
Ceci est particulièrement utile pour les cases à cocher et les boutons, car cela signifie que vous pouvez cocher la case en cliquant sur le texte associé au lieu d’avoir à taper la case elle-même.
En savoir plus sur cet élément dans MDN .
L'attribut for associe le libellé à un élément de contrôle, comme défini dans la description de label dans la spécification HTML 4.01. Cela implique, entre autres choses, que lorsque l'élément label reçoit le focus (par exemple, en cliquant dessus), il passe le focus à son contrôle associé. L'association entre une étiquette et une commande peut également être utilisée par des agents utilisateurs basés sur la parole, ce qui peut donner à l'utilisateur un moyen de demander quelle est l'étiquette associée, lorsqu'il s'agit d'une commande. (L'association peut ne pas être aussi évidente que dans le rendu visuel.)
Dans le premier exemple de la question (sans le for), l’utilisation du balisage label n’a aucune implication logique ou fonctionnelle - elle est inutile, à moins d’en faire quelque chose en CSS ou en JavaScript.
Les spécifications HTML n'obligent pas à associer des étiquettes à des contrôles, contrairement aux directives pour l'accessibilité au contenu Web (WCAG) 2.0. Ceci est décrit dans le document technique H44: Utilisation d’éléments de libellé pour associer des libellés de texte à des contrôles de formulaire , ce qui explique également que l’association implicite (en imbriquant, par exemple, input dans label) n’est pas aussi largement prise en charge que l’explicite association via les attributs for et id,
En un mot, il fait référence à la id de l'entrée, c'est tout:
<label for="the-id-of-the-input">Input here:</label>
<input type="text" name="the-name-of-input" id="the-id-of-the-input">
L'attribut for de la balise <label> doit être égal à l'attribut id de l'élément associé pour les lier.