À l'aide de HTML 'label' tag avec des boutons radio

Ne le label balise de travail avec des boutons radio? Si oui, comment l'utilisez-vous? J'ai un formulaire qui s'affiche comme ceci:

First Name: (text field)
Hair Color: (color drop-down)
Description: (text area)
Salutation: (radio buttons for Mr., Mrs., Miss)

Je voudrais utiliser le label balise pour chaque étiquette dans la colonne de gauche afin de définir sa connexion à un contrôle approprié dans la colonne de droite. Mais Si j'utilise un bouton radio, de la spécification, ce qui semble indiquer que tout à coup, la "formule de politesse" de l'étiquette de la forme de contrôle n'appartient plus à la label tag, mais plutôt les options "Monsieur, Madame, etc...." allez dans l' label tag.

J'ai toujours été un fan de l'accessibilité et du web sémantique, mais cette conception ne fait pas de sens pour moi. Le label tag déclare expressément les étiquettes. Le option balise options de sélection. Comment déclarer un label sur l'étiquette réelle pour un ensemble de boutons radio?

Mise à JOUR:
Voici un exemple avec le code:

<tr><th><label for"sc">Status:</label></th>
    <td>&#160;</td>
    <td><select name="statusCode" id="sc">
            <option value="ON_TIME">On Time</option>
            <option value="LATE">Late</option>
        </select></td></tr>

Cela fonctionne très bien. Mais contrairement à d'autres contrôles de formulaire, des boutons radio ont un champ distinct pour chaque valeur:

<tr><th align="right"><label for="???">Activity:</label></th>
    <td>&#160;</td>
    <td align="left"><input type="radio" name="es" value="" id="es0" /> Active &#160;
        <input type="radio" name="es" value="ON_TIME" checked="checked" id="es1" /> Completed on Time &#160;
        <input type="radio" name="es" value="LATE" id="es2" /> Completed Late &#160;
        <input type="radio" name="es" value="CANCELED" id="es3" /> Canceled</td>
</tr>

Que faire?

InformationsquelleAutor GlenPeterson | 2012-11-07
  1. 48

    Ne l'étiquette étiquette de travailler avec des boutons radio?

    Oui

    Si oui, comment l'utilisez-vous?

    Même manière que pour toute autre forme de contrôle.

    Vous donner un for attribut qui correspond à la id de la commande, ou vous mettre le contrôle à l'intérieur de l'élément label.

    Je voudrais utiliser la balise d'étiquette pour chaque étiquette dans la colonne de gauche

    Une étiquette est pour un de contrôle, et non pas un ensemble de contrôles.

    Si vous voulez ajouter une légende à une série de contrôles, utilisez un <fieldset> avec un <legend> (et donner un <label> à chaque contrôle dans le jeu).

    <fieldset>
  <legend> Salutation </legend>
  <label> <input type="radio" name="salutation" value="Mr."> Mr. </label>
  <label> <input type="radio" name="salutation" value="Mrs."> Mrs. </label>
  <!-- etc -->
</fieldset>
    • Fieldset change l'affichage sur certains navigateurs, non? Aussi, la "légende" et les boutons radio sont dans les différentes cellules du tableau dans mon cas.
    • Par ailleurs, un groupe de boutons radio avec le même nom d'attribut sont effectivement un contrôle. Chaque <input type="radio" est une valeur possible pour ce contrôle, pas le nom pour le contrôle de lui-même. J'ai un code qui fait la bonne chose avec tous les autres types de contrôle de formulaire que j'ai rencontré. Peut-être fieldset est ma réponse? En fin de compte je suppose que le point de tout cela est de l'accessibilité pour les personnes handicapées de la vue. Les moteurs de recherche donné sur le "web sémantique" à partir de presque une journée.
    • groupe de boutons radio avec le même nom d'attribut sont effectivement un contrôle” — non, il ne l'est pas. Ils sont liés, bien sûr, mais chaque bouton est un contrôle. Un <select> tag est un contrôle. Vous pourriez utiliser à la place des boutons radio.
    • J'ai mis à jour Quentin de la réponse. Alors que <label><input>text<label> est techniquement valide, il n'est pas une pratique exemplaire et n'a pas été depuis 03ish. Certains aussi a des problèmes avec cette méthode. @GlenPeterson pas la fourniture d'un nom à un groupe de radios, de leur faire le travail et ressembler à un groupe de radio de 1.
    • stackoverflow.com/a/4213253/470749 est un rappel utile pour moi à propos de la suppression for.
    InformationsquelleAutor Quentin
  2. 17

    Ah oui. Voici comment cela fonctionne.

    <label> étiquettes champs individuels, donc chaque <input type="radio"> obtient son propre <label>.

    À l'étiquette un groupe de champs (par exemple, plusieurs boutons radio qui partagent le même name), vous utilisez un <fieldset> balise avec un <legend> élément.

    <fieldset>
    <legend>Salutation</legend>

    <label for="salutation_mr">Mr <input id="salutation_mr" name="salutation" type="radio" value="mr"><label>

    <label for="salutation_mrs">Mrs <input id="salutation_mrs" name="salutation" type="radio" value="mrs"><label>

    <label for="salutation_miss">Miss <input id="salutation_miss" name="salutation" type="radio" value="miss"><label>

    <label for="salutation_ms">Ms <input id="salutation_miss" name="salutation" type="radio" value="ms"><label>
</fieldset>
    • +1 pour répondre à la question spécifique et pour les "plus difficiles à coiffer de manière cohérente à travers les navigateurs" même si Quentin auraient volé certains de vos coups de tonnerre. Le problème avec cette approche est que je ne pense pas qu'il va travailler à travers les cellules d'un tableau, surtout si la table contient d'autres éléments de formulaire qui ne font pas partie des options pour cet ensemble de boutons radio.
    • en effet. Si vous souhaitez que vos étiquettes dans une cellule et vos champs de formulaire dans un autre, le code HTML ci-dessus ne fonctionne pas. Sans doute, c'est une raison de ne pas utiliser des tableaux à exposer les formes.
    • Vous pouvez lier une façon que vous recommander de jeter les formes pour la compatibilité du navigateur sur une variété de tailles d'écran? Aujourd'hui nous avons le nom du champ dans la colonne de gauche, le champ dans le milieu, et un texte d'aide (le cas échéant) sur la droite.
    • rien ne me vient à l'esprit pour un recommandé façon de poser les formulaires. Il dépend de la forme, et de ce que vous essayez d'atteindre. Une chose personnellement, je l'aime, c'est les étiquettes de champ au-dessus du champ, comme à l'époque, lorsque vous sélectionnez le champ sur un iPhone vous pouvez toujours voir l'étiquette après que le navigateur est un zoom avant sur le terrain.
    • Vous devriez être en mesure d'omettre le for et id attributs ici puisque vous enchaînez les entrées dans label
    • vrai, vous devriez, bien que je crois que, dans le passé, certains lecteurs d'écran ne prend pas en charge très bien. On espère que les choses se sont améliorées, mais je n'ai pas essayé récemment.

    InformationsquelleAutor Paul D. Waite
  3. 3

    Vous ne pouvez pas déclarer une étiquette pour un ensemble de boutons, mais pour chaque bouton.
    Dans ce cas, les étiquettes sont "Monsieur", "Madame" et "Mademoiselle", pas de "formule de politesse".

    Mise à JOUR

    Peut-être que vous devriez utiliser un autre tag pour ce "label" de la vôtre, car il n'est pas vraiment un label.

    <tr>
    <th align="right" scope="row"><span class="label">Activity:</span></th>
    <td>&#160;</td>
    <td align="left"><label><input type="radio" name="es" value="" id="es0" /> Active &#160;</label>
    [... and so on]
</tr>
    • Qu'entendez-vous par "Peut-être que vous devriez utiliser un autre tag pour ce "label" de la vôtre, car il n'est pas vraiment un label."?
    • Il n'est pas vraiment lié à aucune option disponible, même si il définit un ensemble d'options de nom.
    • Quel autre balise que je devrais utiliser? Vous voulez dire que je devrais faire un?
    InformationsquelleAutor Seza
  4. 1

    Pour répondre à votre question: non, vous ne pouvez pas vous connecter formule de politesse à l'un des boutons radio. Il n'aurait de sens que si vous cliquez sur la formule de Salutation, l'une des options serait sélectionné. Au lieu de cela, vous pouvez donner à M., Mme et Mlle leurs propres étiquettes, donc si quelqu'un clique sur un de ces mots, le bouton radio correspondant sera sélectionné.

    <input id="salutation_mr" type="radio" value="mr" name="salutation">
<label for="salutation_mr">Mr.</label>
<input id="salutation_mrs" type="radio" value="mrs" name="salutation">
<label for="salutation_mrs">Mrs.</label>
<input id="salutation_miss" type="radio" value="miss" name="salutation">
<label for="salutation_miss">Miss</label>

    je pense qu'on peut encore enveloppement formule de politesse à l'intérieur d'un <label> élément, vous ne pouvez pas utiliser le for attribut. je corrige la position des mains, voir les commentaires ci-dessous. Même si c'est techniquement possible, ce n'est pas ce <label> était destinée.

    • “non, vous ne pouvez pas vous connecter formule de politesse pour les boutons radio” — incorrect. <fieldset> et <legend> sont conçus dans ce but.
    • J'aime l'idée d'utiliser une étiquette sans l'associer - il montre l'effort de faire la bonne chose. Mais je soupçonne que le navigateur juste l'ignorer sans le savoir à quoi l'associer. Il pourrait même exposer un bug dans certains navigateur quelque part qui ne serait pas arrivé sans le balançant balise d'étiquette.
    • comme l'idée d'utiliser une étiquette sans l'associer - il montre l'effort de faire la bonne chose.” Je suppose que, bien qu'il montre aussi que la personne en question n'a pas regardé ce <label> est fait pour.
    • Oups, désolé Nic — quand j'ai dit “la personne en question:” je n'avais pas réellement remarqué que tu avais suggéré à l'aide de l'étiquette sans for, je viens si @GlenPeterson parle hypothétiquement. Aucune infraction ne signifiait.
    • ne vous en faites pas! Vous étiez en fait, je n'avais pas regardé et je l'utilise <label> pour cela moi aussi. Apprendre de nouvelles choses tous les jours 😉 merci pour le lien en tout cas.
    • ouf! J'aurais été un peu plus direct et poli, si j'avais remarqué votre suggestion. Content que le lien a été utile. La plupart des balises HTML ne sont pas limités dans leur utilisation comme <label> est, donc, j'ai vu beaucoup de gens utilisent <label> plus généralement.

    InformationsquelleAutor Nic Wortel
  5. 1

    Vous pouvez utiliser le aria-role="radiogroup" à associer les contrôles sans l'aide d'un <fieldset>. C'est l'une des techniques suggérées par les WCAG 2.0.

    <div role="radiogroup" aria-labelledby="profession_label" aria-describedby="profession_help">
  <p id="profession_label">What is your profession?</p>
  <p id="profession_help">If dual-classed, selected your highest leveled class</p>
  <label><input name="profession" type="radio" value="fighter"> Fighter</label>
  <label><input name="profession" type="radio" value="mage"> Mage</label>
  <label><input name="profession" type="radio" value="cleric"> Cleric</label>
  <label><input name="profession" type="radio" value="theif"> Thief</label>
</div>

    Cependant, j'ai remarqué que l'utilisation de cette technique, le WebAim Vague outil permettant de donner un avertissement au sujet d'un manque <fieldset>, donc je ne suis pas sûr de ce que SUR le soutien de la ce est comme.

    InformationsquelleAutor Scribblemacher
  6. 1

    mes 2 cents au sujet, ou plutôt un côté nœud (il n'a pas l'utilisation implicite de l'association pour pouvoir être placé n'importe où, mais linking):
    groupement est fait par le name attribut, et reliant par le id attribut:

    HTML:

    <ol>
    <li>
        <input type="radio" name="faqList" id="faqListItem1" checked />
        <div>
            <label for="faqListItem1">i 1</label>
        </div>
    </li>
    <li>
        <input type="radio" name="faqList" id="faqListItem2" />
        <div>
            <label for="faqListItem2">i 2</label>
        </div>
    </li>
    <li>
        <input type="radio" name="faqList" id="faqListItem3" />
        <div>
            <label for="faqListItem3">i 3</label>
        </div>
    </li>
</ol>

    • Quelqu'un downvoted ce sans raison apparente. Stupide.
    InformationsquelleAutor BananaAcid
  7. 0

    L'Étiquette de "pour" l'attribut correspond à la Radio boutons ID. Alors...

    <label for="thisRad">Radio Button 1</label>
<input type="radio" id="thisRad" />

    Espère que cela aide.

    Vous voulez le vôtre à ressembler à quelque chose comme ça...

    Salutation<br />
<label for="radMr">Mr.</label><input type="radio" id="radMr" />
<label for="radMrs">Mrs.</label><input type="radio" id="radMrs" />
<label for="radMiss">Miss.</label><input type="radio" id="radMiss" />
    • Vous pouvez également placer le radio-élément dans un label, si vous ne voulez pas utiliser un id.
    • Je ne pense pas que vous êtes tout à fait répondre à l'OP, la question réelle. Si je comprends bien, il leur demande comment marquer un label qui s'applique à un ensemble de boutons radio.
    • Je l'ai lu encore une fois, vous semblez être de droite lol. Mon mauvais.
    InformationsquelleAutor George