49

labelタグはラジオボタンで機能しますか? もしそうなら、あなたはそれをどのように使いますか？次のように表示されるフォームがあります。

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

label左の列の各ラベルのタグを使用して、右の列の適切なコントロールへの接続を定義したいと思います。しかし、ラジオボタンを使用すると、フォームコントロールの実際の「挨拶」ラベルが突然labelタグに属しなくなり、オプション「Mr.、Mrs.など」に属していることを仕様が示しているようです。labelタグに入ります。

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

更新: コードの例を次に示します。

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

何をすべきか？

4

7 に答える 7

58

label タグはラジオ ボタンで機能しますか?

はい

もしそうなら、あなたはそれをどのように使いますか？

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

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

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

ラベルは、一連のコントロールではなく、コントロール用です。

コントロールのセットにキャプションを付けたい場合は、 a<fieldset>と a を使用します<legend>(<label>セット内の各コントロールに a を付けます)。

<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>
于 2012-11-07T16:22:42.467 に答える
23

そうそう。仕組みは次のとおりです。

<label>個々のフィールドにラベルを付けるため、それぞれ<input type="radio">が独自の を取得し<label>ます。

フィールドのグループ(同じ を共有する複数のラジオ ボタンなど)にラベルを付けるには、要素を含むタグを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>
于 2012-11-07T16:25:55.050 に答える
2

ボタンのセットに対してラベルを宣言することはできませんが、ボタンごとに宣言できます。この場合、ラベルは「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>
于 2012-11-07T16:24:04.310 に答える
2

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

于 2017-08-20T23:03:18.670 に答える
1

To answer your question: no, you can't connect Salutation to one of the radio buttons. It wouldn't make sense that if you'd click on Salutation, one of the options would be selected. Instead, you can give Mr, Mrs and Miss their own labels, so if someone clicks on one of those words, the corresponding radio button will be selected.

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

I do think that you could still wrap Salutation inside a <label> element, you just can't use the for attribute. I stand corrected, see the comments below. Although it's technically possible, it's not what <label> was meant for.

于 2012-11-07T16:25:40.760 に答える
0

ラベルの「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" />
于 2012-11-07T16:23:02.983 に答える