Que fait l'attribut " for " dans la balise HTML?
je me demande Quelle est la différence entre les deux codes 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 qu'il fait quelque chose quand vous utilisez une bibliothèque JavaScript spéciale, mais en dehors de cela, est-ce qu'il valide le HTML ou requis pour une autre raison?
4 réponses
la balise <label> vous permet de cliquer sur l'étiquette, et elle sera traitée comme un clic sur l'élément d'entrée associé. Il y a deux façons de créer cette association:
tout d'abord, vous pouvez envelopper l'élément label autour de l'élément input:
<label>Input here:
<input type='text' name='theinput' id='theinput'>
</label>
l'autre façon est d'utiliser l'attribut for , 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 cases à cocher et boutons, car cela signifie que vous pouvez cocher la case en cliquant sur le texte associé au lieu d'avoir à frapper la case elle-même.
pour en savoir plus sur cet élément, lisez MDN .
l'attribut for associe l'étiquette à un élément de contrôle, tel que 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 la mise au point (par exemple en étant cliqué sur), il passe la mise au point à son contrôle associé. L'association entre une étiquette et un contrôle peut également être utilisée par des agents de parole, ce qui peut donner à l'utilisateur un moyen de demander ce que l'association l'étiquette est, quand il s'agit d'un contrôle. (L'association peut ne pas être aussi évidente qu'en rendu visuel.)
dans le premier exemple de la question (sans le for ), l'utilisation du balisage label n'a aucune implication logique ou fonctionnelle – il est inutile, à moins que vous ne fassiez quelque chose avec lui dans CSS ou JavaScript.
les spécifications HTML ne rendent pas obligatoire d'associer les étiquettes aux contrôles, mais les directives D'accessibilité du contenu Web (WCAG) 2.0 ne. Ceci est décrit dans le document technique H44: utiliser des éléments d'étiquette pour associer des étiquettes de texte avec les contrôles de forme , 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,
en un mot ce qu'il fait est de se référer au 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">
pour l'attribut de la <label> balise doit être égal à l'attribut id de l'élément à lier ensemble.