web-dev-qa-db-fra.com

Concernant la propriété "Pour" de l'étiquette HTML

En tenant compte des 2 lignes de code suivantes (copiées de w3schools.com> "HTML <label> for Attribute"):

  <label for="male">Male </label>
  <input type="radio" name="sex" id="male" />

J'ai du mal à découvrir le but exact de la propriété "pour" de l'étiquette ci-dessus. Comme vous pouvez le voir, il est actuellement défini sur "mâle" (pour correspondre à l'id du contrôle d'entrée).

Tout ce que j'ai lu jusqu'à présent, c'est que le code ci-dessus "associera" et "liera" l'étiquette au contrôle d'entrée. Donc ma question est, qu'est-ce que cela signifie exactement?

Quels sont exactement les résultats de l'association de l'étiquette au contrôle d'entrée?
L'étiquette et/ou l'entrée ont-elles de nouveaux comportements à la suite de cette "association"?

91
user328414

Un label associé à un contrôle via for sera cliquable. Cliquer dessus sélectionne le contrôle. Très utile avec les radios/cases à cocher en particulier. Il a également des implications d'accessibilité pour les lecteurs d'écran pour les malvoyants.

139
ceejayoz

Lorsque vous cliquez sur l'étiquette (Homme), la radio sera vérifiée, ce qui n'est pas possible si vous n'utilisez pas d'étiquette . Une étiquette est également utile lors du développement de petits appareils tels que les mobiles.

Il est donc utile pour:

  • raisons d'accessibilité
  • petits appareils tels que les mobiles, etc.
  • utile dans les boutons radio et les cases à cocher en particulier
9
Sarfraz

Je crois que la liaison d'une étiquette à un élément de formulaire vous permet d'attribuer au label une clé d'accès, ce qui apportera le focus à l'élément de formulaire qui lui est associé.

Comme d'autres l'ont mentionné, il vous permet également de cliquer sur label et de mettre le focus sur l'élément de formulaire.

L'attribut for vous permet de placer le label et l'élément dans des zones sémantiquement différentes du html et de maintenir l'association. (Comme deux tables ou deux divs différents). Si vous les assemblez comme dans votre exemple, il est également correct de placer l'élément de formulaire dans l'étiquette et de renoncer à l'attribut for

3
Alex Larzelere

Oui, je crois qu'il agit comme un contrôle de formulaire ou un mécanisme de vérification lors du remplissage d'un formulaire sur une page Web, en particulier ceux avec des boutons radio ou des cases à cocher. En cliquant sur l'étiquette, il pointe l'utilisateur directement vers une zone du formulaire où les bonnes informations doivent être saisies. Par exemple, un "texte". Ou, dans le cas où l'utilisateur doit choisir parmi certaines options, telles que vrai ou faux, ou masculin ou féminin.

3
fiifiblack