Analyse détaillée de l'attribut for de la balise en html

Cet article vous présente une analyse détaillée de l'attribut for de la balise en HTML. Il a une certaine valeur de référence. J'espère que cela vous sera utile.

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.
Traduction : L'attribut for spécifie à quel élément du formulaire l'étiquette est liée. est tenu de le faire.

Exemple de code :

<!-- Code 2 -->

     Male   
     Female   
     Other   
  

En comparant les deux morceaux de code, ce n'est pas difficile à trouver,

1. 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.

2. 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.

3. 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!