Cet article vous présente une analyse détaillée de l'attribut for de la balise
Dans la section Create a Set of Radio Buttons
du tutoriel HTML sur freecodecamp, j'ai vu ce passage,
Il est considéré comme une bonne pratique de définir un attribut for sur l'élément label, avec une valeur qui correspond la valeur de l'attribut id de l'élément d'entrée. Cela permet aux technologies d'assistance de créer une relation liée entre l'étiquette et l'élément d'entrée enfant.
Signifie probablement : La meilleure pratique consiste à donner label
label, ajouter l'attribut for
avec la même valeur que l'attribut input
de la balise id
pour créer une association entre l'étiquette et l'entrée.
Parallèlement, un exemple de code est donné, comme suit :
<!-- Code 1 --> <label> <input>Indoor </label>
Dans le code, le pour la valeur de l'attribut de l'étiquette est la même que celle de l'entrée. La valeur de l'attribut id est la même. À partir de ce code, il n'est pas clair où se trouve la connexion.
La définition de l'attribut for de l'étiquette est la suivante :
L'attribut for spécifie à quel élément de formulaire une étiquette est liée.Exemple de code :
<!-- Code 2 -->
En comparant les deux morceaux de code, ce n'est pas difficile à trouver,
La relation d'inclusion entre l'étiquette et l'étiquette d'entrée est différente. L'étiquette et l'entrée du Code 1 appartiennent à une relation inclusive, tandis que l'étiquette et l'entrée du Code 2 sont relativement indépendantes.
l'étiquette et l'entrée sont disposées différemment sur la page. Il n'est pas difficile de constater grâce aux outils de développement de Chrome que dans les résultats d'exécution du code 1, l'étiquette d'étiquette couvre l'étiquette d'entrée et que dans les résultats d'exécution du code 2, l'étiquette d'étiquette est juxtaposée à l'étiquette d'entrée.
l'étiquette correspond à une entrée individuelle. Cliquez sur le contenu de l'étiquette et le bouton asymétrique correspondant sera sélectionné.
Si l'on supprime l'attribut for de label dans les deux morceaux de code, les points 1 et 2 précédents restent inchangés, et le changement est le point 3. Pour les résultats de l'opération du Code 1, vous pouvez toujours sélectionner le bouton radio en cliquant sur le contenu de l'étiquette. Le code 2 est différent Lorsque vous cliquez sur le contenu de l'étiquette, vous ne pouvez pas sélectionner le bouton radio.
Après une simple comparaison des résultats d'exécution du code, nous pouvons vérifier que le passage cité en début d'article est correct. L'ajout de l'attribut for à l'étiquette peut améliorer la qualité du code.
Articles connexes recommandés :
Comment résoudre le problème de l'imbrication des balises en HTML
Comportement par défaut de l'élément parent tag Et l'interaction entre les événements de clic
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!