Est-il préférable d'enrouler la balise d'étiquette autour d'un élément de formulaire ou d'utiliser l'attribut "for" en HTML?
Je sais que vous pouvez utiliser les deux mais est-il préférable de les utiliser les uns par rapport aux autres? Si oui, pourquoi?
Exemple d'attribut "pour":
<input type="text" id="male"><label for="male">Male</label>
Exemple d'habillage:
<label>Age:<input type="text"></label>
Sémantiquement, les deux possibilités sont les mêmes. Mais selon la disposition que vous souhaitez, il y a des avantages et des inconvénients pour les deux possibilités. Par exemple, si vous voulez que l'étiquette soit à un endroit entièrement différent, cela n'aurait aucun sens de mettre l'entrée dans l'étiquette. Mais si vous voulez pouvoir faire un effet de survol via css, cela définit e. g. un arrière-plan pour l'étiquette et la zone autour de l'entrée, il serait préférable de mettre l'entrée dans l'étiquette.
selon http://www.w3.org/TR/2008/WD-WCAG20-TECHS-20080430/H44.html
certaines technologies d'assistance ne gèrent pas correctement les étiquettes implicites
Ainsi, lorsque vous encapsulez, vous pouvez également vouloir fournir l'attribut "for" à l'élément label.
L'habillage permet de supprimer l'attribut for, qui à son tour permet d'omettre l'attribut `id 'sur l'élément d'entrée. Idéal pour les modèles ou tous les formulaires qui doivent être utilisés à plusieurs reprises sur une page.
Ça n'a pas d'importance. Les deux accomplissent les mêmes choses en termes de définition de la relation entre l'étiquette et le champ.
L'incorporation de l'entrée dans l'étiquette affecte également le comportement d'habillage. <label><checkbox/>Value with spaces</label> sera encapsulé comme une seule unité par défaut. Tandis que <checkbox id="check"/><label for="check">Value with spaces</label> encapsulera le texte avec des sauts dans les espaces et encapsulera l'étiquette sur une nouvelle ligne, mais laissez la case ci-dessus.
Si cela compte pour quelque chose, des frameworks comme ASP.NET placent l'élément label à côté des éléments input/select/textarea et utilisent l'attribut label de for.