Utilisation de «libellé pour» sur les boutons radio

136

Lorsque vous utilisez le paramètre «étiquette pour» sur les boutons radio, pour être conforme 508 *, ce qui suit est-il correct?

 <label for="button one"><input type="radio" name="group1" id="r1" value="1" /> button one</label>

ou est-ce?

 <input type="radio" name="group1" id="r1" value="1" /><label for="button one"> button one</label>

La raison pour laquelle je demande est que dans le deuxième exemple, "label" englobe uniquement le texte et non le bouton radio réel.

* L'article 508 de la loi sur la réadaptation de 1973 oblige les agences fédérales à fournir des logiciels et des sites Web accessibles aux personnes handicapées.

— niico
source

Réponses:

216

Vous l'avez presque compris. Cela devrait être ceci:

<input type="radio" name="group1" id="r1" value="1" />
<label for="r1"> button one</label>

Développer l'extrait

La valeur dans fordoit être l'ID de l'élément que vous étiquetez.

— Marc W
source

Votre réponse est bien sûr vraie, mais Martha a la bonne réponse. Les deux exemples de Martha sont parfaitement valides HTML5. Et par exemple, si vous voulez que le tout soit dans un cadre, il est plus facile de styliser le second en utilisant css. Si vous voulez que les étiquettes soient ailleurs, la première. Mais les deux sont OK. Meilleures salutations!

— Jacek Kowalewski

Hmm .. Comment faire basculer une étiquette entre deux boutons radio? Vous ne pouvez pas avoir deux identifiants identiques ...: /

— Nils Sens

@NilsSens Chaque paire de radio et d'étiquette doit avoir des identifiants uniques et ne doit jamais partager d'identifiants

— Daniel Waters

@NilsSens Basculer entre 2 boutons radio et ils n'ont qu'une seule étiquette? Cela semble être un cas clair pour utiliser une case à cocher à la place: D

— T_D

Ah, non ce que je voulais dire, c'était une super-étiquette qui bascule les boutons radio. Comme: Catégorie fruit-favori et lorsque vous cliquez dessus, vous basculez entre idk "banane" et "fraise" Parce que, pourquoi appliquer le mouvement de la souris UX quand vous pouvez simplement basculer les options. Aujourd'hui, j'utiliserais JS pour le coder à la main, mais il serait intéressant de savoir s'il existe un seul moyen CSS :)

— Nils Sens

Les deux structures sont valides et accessibles, mais l' forattribut doit être égal à celui idde l'élément d'entrée:

<input type="radio" ... id="r1" /><label for="r1">button text</label>

<label for="r1"><input type="radio" ... id="r1" />button text</label>

L' forattribut est facultatif dans la deuxième version (étiquette contenant l'entrée), mais IIRC certains navigateurs plus anciens ne rendaient pas le texte de l'étiquette cliquable à moins que vous ne l'incluiez. La première version (étiquette après entrée) est plus facile à styliser avec CSS en utilisant le sélecteur frère adjacent +:

input[type="radio"]:checked+label {font-weight:bold;}

— Martha
source

C'est vrai, bien que dans le deuxième exemple, l'attribut "for" ne soit pas obligatoire.

— Ishmael

Je pense qu'il y avait certaines versions de navigateur qui rendaient le texte du bouton "cliquable" uniquement si vous utilisiez l'attribut "for", c'est-à-dire que l'enroulement de l'entrée à l'intérieur de l'étiquette n'était pas suffisant.

— Martha

@Martha - Savez-vous quels navigateurs?

— Kirkland

@Kirkland - w3.org/TR/html401/interact/forms.html#h-17.9 semble indiquer que la seconde forme est valide, mais plusieurs sources indiquent que le support n'est peut-être pas universel. Il est probablement préférable de fournir l' forattribut dans tous les cas.

— Ishmael le

@RalphDavidAbernathy Oui, les mêmes règles s'appliquent aux cases à cocher.

— Ishmael le

(Tout d'abord, lisez les autres réponses qui ont expliqué le fordans les <label></label>balises. Eh bien, les deux premières réponses sont correctes, mais pour mon défi, c'était lorsque vous avez plusieurs boîtes radio, vous devez sélectionner pour elles un nom commun comme name="r1" mais avec des identifiants différents id="r1_1" ... id="r1_2"

Ainsi, la réponse est plus claire et supprime également les conflits entre le nom et les identifiants.

Vous avez besoin de différents identifiants pour différentes options de la boîte radio.

<input type="radio" name="r1" id="r1_1" />

       <label for="r1_1">button text one</label>
       <br/>
       <input type="radio" name="r1" id="r1_2" />

       <label for="r1_2">button text two</label>
       <br/>
       <input type="radio" name="r1" id="r1_3" />

       <label for="r1_3">button text three</label>

Développer l'extrait

— Ebrahim
source