web-dev-qa-db-ja.com

ラジオボタンでHTMLの 'label'タグを使用する

labelタグはラジオボタンで機能しますか？その場合、どのように使用しますか？次のように表示されるフォームがあります。

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

左の列の各ラベルにlabelタグを使用して、右の列の適切なコントロールへの接続を定義したいと思います。しかし、ラジオボタンを使用すると、フォームコントロールの実際の "Salutation"ラベルがlabelタグに含まれなくなり、オプション "Mr.、Mrs.、etc." 」 labelタグに移動します。

私は常にアクセシビリティとセマンティックWebのファンでしたが、このデザインは私には意味がありません。 labelタグは、ラベルを明示的に宣言します。 optionタグ選択オプション。ラジオボタンのセットの実際のラベルでlabelをどのように宣言しますか？

PDATE：コードを使用した例を次に示します。

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

これはうまく機能します。ただし、他のフォームコントロールとは異なり、ラジオボタンには値ごとに個別のフィールドがあります。

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

何をすべきか？

htmlaccessibilityforms
46
GlenPeterson

ラベルタグはラジオボタンで機能しますか？

はい

その場合、どのように使用しますか？

他のフォームコントロールと同じ方法。

コントロールのforと一致するid属性を指定するか、ラベル要素内にコントロールを配置します。

左の列の各ラベルにラベルタグを使用したい

ラベルはaコントロール用であり、コントロールのセットではありません。

コントロールセットにキャプションを付ける場合は、<fieldset> とともに <legend>（そして<label>セット内の各コントロールに）。

<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

ああ、はい。仕組みは次のとおりです。

<label>ラベル個々のフィールド、したがって各<input type="radio">独自の<label>。

フィールドのgroup（たとえば、同じnameを共有する複数のラジオボタン）にラベルを付けるには、<fieldset>タグと<legend>要素。

<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

aria-role="radiogroup"を使用すると、<fieldset>を使用せずにコントロールを関連付けることができます。これは WCAG 2.0で提案されている手法の1つ です。

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

ただし、この手法を使用してWebAim Waveツールを使用すると、<fieldset>が欠落していることを警告するため、ATのサポートがどのようなものかわかりません。

4
Scribblemacher

ボタンのセットに対してラベルを宣言することはできませんが、ボタンごとにラベルを宣言できます。この場合、ラベルは「Mr。」、「Mrs。」です。 「あいさつ」ではなく「ミス」。

[〜＃〜] update [〜＃〜]
この「ラベル」に別のタグを使用する必要があるかもしれません-それは実際にはラベルではないからです。

<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

あなたの質問に答えるために：いいえ、挨拶文をラジオボタンのいずれかに接続することはできません。あいさつをクリックすると、オプションの1つが選択されることは意味がありません。代わりに、Mr、Mrs、Missに独自のラベルを付けることができます。したがって、誰かがそれらの単語のいずれかをクリックすると、対応するラジオボタンが選択されます。

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

あいさつ文を<label>要素、for属性は使用できません。 私は修正済みです。以下のコメントを参照してください。技術的には可能ですが、そうではありません<label>が意図されていました。

1
Nic Wortel

トピックへの私の2セント、またはむしろサイドノード（どこにでも配置できるようにするために暗黙の関連付けを使用しませんが、リンクします）：- groupingはname属性によって行われ、linkingは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

ラベルの「for」属性は、ラジオボタンIDに対応しています。そう...

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

それが役に立てば幸い。

あなたはあなたのものがこのように見えることを望むでしょう...

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