Que fait l'attribut «for» dans la balise HTML <label>?

382

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 fait quelque chose lorsque vous utilisez une bibliothèque JavaScript spéciale, mais à part cela, cela valide-t-il le code HTML ou requis pour une autre raison?

html forms input label Jeff
la source

Réponses:

578

La <label>balise vous permet de cliquer sur l'étiquette et elle sera traitée comme un clic sur l'élément d'entrée associé. Il existe deux façons de créer cette association:

Une façon consiste à envelopper l'élément d'étiquette autour de l'élément d'entrée:

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

L'autre façon consiste à utiliser l' forattribut, 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 une utilisation avec des cases à cocher et des boutons, car cela signifie que vous pouvez cocher la case en cliquant sur le texte associé au lieu d'avoir à cocher la case elle-même.

En savoir plus sur cet élément dans MDN .

Barmar
la source
107
Notez que l'attribut for est lié à l'entrée par l'attribut id, et l'attribut name n'a pas à correspondre. <label for = "theinput"> Entrez ici: </label> <input type = 'text' name = 'notmatching' id = 'theinput'> Fonctionnera toujours
Glo
4
Un clic sur l'étiquette n'est pas toujours traité exactement comme un clic sur l'élément associé. Dans Chrome et Safari, par exemple, cliquer sur une étiquette associée à un selectmet uniquement l'accent sur la sélection plutôt que sur l'extension des options.
Emile Pels, le
2
@EmilePels En ce qui concerne le modèle d'événement du navigateur, ils sont équivalents. Ce que vous décrivez concerne davantage l'interface utilisateur fournie par la gestion des menus déroulants par le système d'exploitation, qui est liée à la souris elle-même.
Barmar
3
Il semble important de mentionner qu'il est très pertinent pour l'accessibilité et les lecteurs d'écran, pourquoi l'utiliser activement.
coyotte508
1
J'ai eu du mal ces deux dernières heures avec le clic du corps soulevé deux fois à chaque fois que je clique sur une étiquette dans un formulaire avec l'attribut "for" d'un champ de saisie. Je comprends enfin pourquoi même si j'utilise stopPropagation sur le clic de l'étiquette pourquoi le clic du corps était toujours levé ... à cause du clic levé par le champ de saisie suivant le comportement que vous avez décrit.
Samuel
53

L' forattribut associe l'étiquette à un élément de contrôle, comme défini dans la description de labella spécification HTML 4.01. Cela implique, entre autres, que lorsque l' labelélément reçoit le focus (par exemple en cliquant dessus), il passe le focus à son contrôle associé. L'association entre une étiquette et un contrôle peut également être utilisée par des agents utilisateurs basés sur la parole, qui peuvent donner à l'utilisateur un moyen de demander ce qu'est l'étiquette associée, lorsqu'il traite un contrôle. (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 labelbalisage n'a aucune implication logique ou fonctionnelle - il est inutile, sauf si vous faites quelque chose avec en CSS ou JavaScript.

Les spécifications HTML ne rendent pas obligatoire d'associer des étiquettes aux contrôles, contrairement aux directives d'accessibilité du contenu Web (WCAG) 2.0. Ceci est décrit dans le document technique H44: Utiliser des éléments d'étiquette pour associer des étiquettes de texte à des contrôles de formulaire , ce qui explique également que l'association implicite (par imbrication par exemple à l' inputintérieur label) n'est pas aussi largement prise en charge que l'association explicite via foret les idattributs,

Jukka K. Korpela
la source
10
+1 pour parler de la relation sémantique et de ce qu'elle signifie au-delà de la relation de clic fonctionnel.
ulty4life
Salut, j'ai deux éléments avec le même identifiant mais dans une div différente, j'ai ajouté l'événement focus en utilisant l'étiquette pour mais dans le deuxième élément, il se concentre sur le premier élément. <html> <body> <div id = "first_div"> <label for = "name"> Nom </label> <input type = "text" id = "name"> </div> <div id = "second_div "> <label for =" name "> Nom </label> <input type =" text "id =" name "> </div> </body> </html>
LoveToCode
14

En résumé, cela se réfère à idl'entrée de, 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">
Uwe Keim
la source
6
L'ajout d'un for est important, même s'ils sont adjacents. Je semble me souvenir d'avoir entendu dire que certains lecteurs d'écran pour les malvoyants ont des problèmes autrement. Donc, si vous voulez être sympathique avec ceux qui utilisent peut-être d'autres navigateurs / lecteurs d'écran, utilisez cette méthode.
bean5
3

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

Rahul Tripathi
la source
7
Oui, mais que voulez-vous dire par «les lier ensemble»? Ils sont déjà voisins dans la structure HTML. Voilà ce que je ne comprends pas.
jeff
1
FOR Spécifie à quel élément de formulaire une étiquette est liée
Rahul Tripathi
2
@CengizFrostclaw jsfiddle.net/DmSGh --- essayez de cliquer sur les deux textes "Input here" et voyez ce qui se passe.
JJJ
1
@CengizFrostclaw: - Une étiquette peut être liée à un élément en utilisant l'attribut "for"
Rahul Tripathi
1
Il y a quelques fonctionnalités intéressantes par exemple lorsque vous utilisez des boutons radio. Cliquer sur l'étiquette fera basculer le bouton radio. C'est une fonctionnalité intéressante lorsque vous essayez d'utiliser des boutons radio avec une interface utilisateur personnalisée.
Alex
0

L'attribut for indique que cette étiquette signifie champ de saisie associé, ou case à cocher ou bouton radio ou tout autre champ de saisie de données qui lui est associé. par exemple

    <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>
Pax
la source
0

Il étiquette quelle que soit l'entrée est le paramètre de l' forattribut.

<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>
Développer l'extrait

pythag0ras_
la source