web-dev-qa-db-fra.com

Utilisation de la balise HTML «label» avec des boutons radio

La balise label fonctionne-t-elle avec les 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 la balise label pour chaque étiquette dans la colonne de gauche pour définir sa connexion au contrôle approprié dans la colonne de droite. Mais si j'utilise un bouton radio, la spécification semble indiquer que soudainement le libellé "Salutation" réel pour le contrôle de formulaire n'appartient plus à la balise label, mais plutôt aux options "M., Mme, etc. . " allez dans la balise label.

J'ai toujours été fan de l'accessibilité et du web sémantique, mais cette conception n'a pas de sens pour moi. La balise label déclare explicitement les étiquettes. Les options de sélection de balise option. Comment déclarez-vous un label sur l'étiquette réelle d'un ensemble de boutons radio?

PDATE: Voici un exemple avec du 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 aux autres contrôles de formulaire, les boutons radio ont un champ séparé 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?

htmlaccessibilityforms
46
GlenPeterson

La balise d'étiquette fonctionne-t-elle avec les boutons radio?

Oui

Si oui, comment l'utilisez-vous?

De la même manière que pour tout autre contrôle de formulaire.

Vous lui attribuez soit un attribut for qui correspond au id du contrôle, soit vous placez le contrôle à l'intérieur de l'élément label.

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

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

Si vous souhaitez sous-titrer un ensemble de contrôles, utilisez un <fieldset> avec un <legend> (et donnez un <label> à chaque contrôle de l'ensemble).

<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>
49
Quentin

Ah oui. Voici comment cela fonctionne.

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

Pour étiqueter un groupe de champs (par exemple plusieurs boutons radio qui partagent le même name), vous utilisez un <fieldset> tag 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>
18
Paul D. Waite

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

<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é qu'en utilisant cette technique, l'outil WebAim Wave pour donner un avertissement sur un <fieldset>, donc je ne sais pas à quoi ressemble le support AT).

4
Scribblemacher

Vous ne pouvez pas déclarer une étiquette pour un ensemble de boutons, mais pour chaque bouton. Dans ce cas, les étiquettes sont "M.", "Mme" et "Miss", pas "Salutation".

MISE À JOUR
Vous devriez peut-être simplement utiliser une autre balise pour cette "étiquette" à vous - car ce n'est pas vraiment une étiquette.

<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>
3
Seza

Pour répondre à votre question: non, vous ne pouvez pas connecter Salutation à l'un des boutons radio. Il ne serait pas logique que si vous cliquez sur Salutation, l'une des options soit sélectionnée. Au lieu de cela, vous pouvez donner à M., Mme et Mlle leurs propres étiquettes, donc si quelqu'un clique sur l'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 que vous pouvez toujours envelopper Salutation dans un <label> élément, vous ne pouvez tout simplement pas utiliser l'attribut for. Je suis corrigé, voir les commentaires ci-dessous. Bien que cela soit techniquement possible, ce n'est pas ce que <label> était destiné.

1
Nic Wortel

mes 2 cents au sujet, ou plutôt un nœud latéral (il n'utilise pas d'association implicite pour pouvoir être placé n'importe où, mais en liant) : - groupement est effectué par l'attribut name, et liaison par l'attribut id:

<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>
1
BananaAcid

L'attribut "pour" du libellé correspond à l'ID des boutons radio. Alors...

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

J'espère que ça aide.

Vous voudriez que le vôtre ressemble à 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" />
0
George