Maison > interface Web > tutoriel HTML > le corps du texte

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

不言
Libérer: 2018-08-09 13:54:31
original
2749 Les gens l'ont consulté

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>
Copier après la connexion

Analyse détaillée de lattribut for de la balise <label> en html

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 -->
Copier après la connexion
        
        
        
  

Analyse détaillée de lattribut for de la balise <label> en html

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!