Que fait l'attribut "for" dans les étiquettes ?

Question

Je me demande quelle est la différence entre ces deux codes :

<label for='theinput'>Input here : </label>
<input type='text' name='theinput' id='theinput'/>

et

<label>Input here : </label>
<input type='text' name='theinput' id='theinput'/>

Je suis sûr qu'il fait quelque chose lorsque vous utilisez une bibliothèque javascript spéciale, mais à part cela, est-ce qu'il valide le HTML ou est-il nécessaire pour une autre raison ?

La réponse courte est :

Si vous cliquez sur l'élément d'étiquette, l'élément d'entrée obtient le focus.

Answer 1

Le site <label> vous permet de cliquer sur l'étiquette, et cela sera traité comme un clic sur l'élément de saisie associé. Il existe deux façons de créer cette association :

Tout d'abord, vous pouvez enrouler l'élément label autour de l'élément input :

<label>Input here:
    <input type='text' name='theinput' id='theinput'>
</label>

L'autre moyen est d'utiliser le for attribut :

<label for="theinput">Input here:</label>
<input type='text' name='theinput' id='theinput'>

BTW, il n'y a pas besoin de </input> -- Les balises d'entrée se ferment automatiquement, car elles ne peuvent rien contenir.

C'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 de devoir toucher la case elle-même.

Pour en savoir plus sur cet élément, voir MDN

Answer 2

Le site for associe l'étiquette à un élément de contrôle, tel qu'il est défini dans la description de la norme label dans la spécification HTML 4.01. Cela implique, entre autres, que lorsque le label reçoit le focus (par exemple, lorsqu'on clique dessus), il transmet le focus à son contrôle associé. L'association entre une étiquette et un contrôle peut également être utilisée par les agents utilisateurs basés sur la parole, qui peuvent donner à l'utilisateur un moyen de demander quelle est l'étiquette associée, lorsqu'il s'agit d'un contrôle. (L'association peut ne pas être aussi évidente que dans le rendu visuel).

Dans le deuxième exemple de la question, l'utilisation de l'option label Le balisage n'a aucune implication logique ou fonctionnelle - il est inutile, sauf si vous en faites quelque chose en CSS ou en JavaScript.

Les spécifications HTML ne rendent pas obligatoire l'association d'étiquettes aux contrôles, mais les directives d'accessibilité au contenu Web (WCAG) 2.0 le font. Ceci est décrit dans le document technique H44 : Utiliser les éléments d'étiquette pour associer des étiquettes de texte aux contrôles de formulaires ce qui explique également que l'association implicite (par imbrication, par exemple) input à l'intérieur de label ) n'est pas aussi largement soutenue que l'association explicite via for et id attributs,

Answer 3

En bref, ce qu'il fait, c'est se référer à l'id de l'entrée, c'est tout :

<label for="the-id-of-the-input">Input here:</label>
<input type='text' name='theinput' id='theinput'>

Answer 4

L'attribut for de l'élément <label> doit être égal à l'attribut id de l'élément lié pour les lier ensemble.