Est-il préférable d'envelopper la balise d'étiquette autour d'un élément de formulaire ou d'utiliser le “pour” de l'attribut HTML?

Je sais que vous pouvez utiliser les deux, mais est-il préférable d'utiliser l'un plutôt que l'autre? Si oui, pourquoi?

Exemple de "pour" attribut:

<input type="text" id="male"><label for="male">Male</label>

Exemple de texte:

<label>Age:<input type="text"></label>
  • J'avais envelopper l'étiquette autour de l'entrée juste parce que je tiens à éviter l'ajout superflu id attributs
  • Comme mentionné dans une des réponses, l'attribut est parfois utile. Le w3c est l'exemple de la pose de l'étiquette et de l'entrée correspondante dans la table distincte de cellules est un potentiel cas où vous auriez besoin d'eux distincts: w3.org/TR/html401/interact/forms.html#h-17.9.1
  • Ok merci c'clarifier les choses pour moi.
  • Pour ce que ça vaut, vous devez toujours utiliser le for de l'attribut et de l'utilisation IDs avec tous les éléments de formulaire, même si l'étiquette enveloppe l'élément. Cette aide grandement les utilisateurs avec des problèmes d'accessibilité, - de nombreux lecteurs d'écran, aujourd'hui, regardez pour les for attribut, même si l'étiquette enveloppements d'un élément. En tout cas, c'est une bonne pratique.
  • Peut-être que les lecteurs d'écran devrait être mieux?
InformationsquelleAutor James Gardiner | 2012-08-16
  1. 30

    Du point de vue sémantique, les deux possibilités sont les mêmes. Mais selon la mise en page que vous voulez, il y a des avantages et des inconvénients pour les deux possibilités. Par exemple, si vous voulez que l'étiquette est à un tout autre endroit, il ne ferait aucun sens de mettre de l'entrée dans le label. Mais si vous voulez être en mesure de faire un hover-effet via css, que les ensembles de e. g. un arrière-plan de l'étiquette et de la zone autour de l'entrée, il serait préférable de mettre l'entrée dans le label.

    • il y a aussi +/- en termes d'utilisabilité et d'accessibilité, mais comme @matthias dit, ça dépend...
    • De l'OMI, la principale affaire pour ne PAS l'enchaînement d'un élément avec l'étiquette est en utilisant les media queries CSS ou en général, de façon arbitraire, la position de l'élément label. Que faire si vous avez besoin de cacher l'étiquette de mise en page différente, ou de déplacer quelque part avec la position absolue pour quelque raison que ce soit? Si il est enveloppé, vous ne pouvez pas faire ces choses avec les CSS. Découvrez CSS Zen Garden pour des exemples des nombreuses façons dont un document normalisé peut être mise en forme avec CSS seul.
    • ne pas le faire glisser vers le sol, mais l'ajout de tags autour de l'étiquette réelle atténue style préoccupations. envisager <label for="name"><span class="label">Name</span><input type="text" name="name" id="name" /></label>
    • Quelqu'un a posé une question aujourd'hui qui montre une différence sémantique: stackoverflow.com/questions/24501497/... Lorsque vous enroulez le label autour de l'entrée, événements, sur l'entrée de la bulle à l'étiquette.
    • Quoique j'ai un peu d'accord avec vous, il y aurait une multitude de façons de cacher le texte de l'étiquette avec les CSS (text-indent, couleur, taille de police, etc), non pas que ceux-ci sont souhaitables, mais il ne devrait pas être une raison de ne pas l'enrouler autour d'intrants.
    InformationsquelleAutor matthias.p
  2. 12

    selon
    http://www.w3.org/TR/2008/WD-WCAG20-TECHS-20080430/H44.html

    certaines technologies d'assistance ne gèrent pas correctement implicite étiquettes

    Ainsi, lorsque vous envelopper, vous pouvez également fournir le "pour" de l'attribut de l'élément label.

    • Merci, j'ai été à la recherche pour l'accessibilité / a11y logiques spécifiques / réponses et c'était exactement ce dont j'avais besoin.
    • Est-ce toujours le cas? Beaucoup de choses ont changé dans les 10 ans qui a été écrit.
    InformationsquelleAutor raycohen
  3. 5

    L'écharpe permet de déposer les for attribut, qui à son tour permet d'omettre l'attribut `id' sur l'élément d'entrée. Idéal pour les modèles ou les formulaires qui doivent être utilisés dans plusieurs instances sur une page.

    • Apparemment, pas vrai. Voir ux.stackexchange.com/a/35297/27501
    • Veuillez expliquer, parce que j'ai lu votre lien, c'est ok pour envelopper et laisser tomber le "pour" de l'attribut, voir ...and if you use the for attribute it has to refer to a form element, but you don't have to use the attribute...
    • Je pense en particulier à "L'attribut de l'élément label doit se référer à une forme de contrôle." (w3.org/TR/html-markup/label.html). Cependant, je pense que c'était une erreur pour moi de les interpréter cette instruction est à dire, "L'étiquette de l'élément doit avoir un attribut qui désigne une forme de contrôle". Ce n'est pas tout à fait la même chose; j'ai eu tort (voir stackoverflow.com/q/27826996/1430996).
    InformationsquelleAutor frequent
  4. 2

    Il n'a pas d'importance. À la fois accomplir les mêmes choses en termes de définition de la relation entre l'étiquette et le champ.

    InformationsquelleAutor DA.
  5. 1

    L'incorporation de l'entrée dans le label affecte également l'habillage de comportement. <label><checkbox/>Value with spaces</label> s'enroule comme une seule unité par défaut. Alors que <checkbox id="check"/><label for="check">Value with spaces</label> va envelopper le texte avec des sauts de au les espaces et s'envelopper l'étiquette d'une nouvelle ligne, mais laissez la case ci-dessus.

    InformationsquelleAutor Adam
  6. 0

    Si ça compte pour rien, cadres comme ASP.NET mettre le label élément à côté de la input/select/textarea éléments et d'utiliser le label's for attribut.

    InformationsquelleAutor Tim S. Van Haren