ラジオボタンの選択範囲について

質問

ラジオボタンについて質問させて下さい。
アンケートなどでたまにラジオボタンの隣にある文字をクリックしても
ボタンを選択できるものがありますが、あれはどうやったらできるのでしょうか？

○りんご　　○みかん　　○バナナ

とあるとするとラジオボタンの○の部分ではなくて、
「りんご」「みかん」「バナナ」をクリックしても選択できる、ということです。
普通にやると○の部分をクリックしないと選択できないので…。

分かりにくい説明文ですみません。
どなたかご存じでしたら教えて下さい。よろしくお願いします。

回答No.2

神崎 渉瑠（@taloo） · ベストアンサー

<label><input type="radio" name="fruit" value="0">りんご</label>

<input>を囲むことで、forを省略出来ます。
テーブルなどでフォームエレメントとラベルが離れてるときはANo.1のようにidを指定することも出来ます。

<tr>
<td><input type="radio" name="fruit" id="apple" value="0"></td>
<td><input type="radio" name="fruit" id="orange" value="1"></td>
<td><input type="radio" name="fruit" id="banana" value="2"></td>
</tr>
<tr>
<td><label for="apple">りんご</label></td>
<td><label for="orange">みかん</label></td>
<td><label for="banana">バナナ</label></td>
</tr>

送信されるのは fruit=0 などです。
IE6以前は<label>が効きませんが、JavaScriptで対応可能。IE7は有効です。

お礼

ご回答ありがとうございました。
試してみたのですが、IE6ではforは省略できないみたいですね…。残念です（笑）
頂いた回答を元に調べてみたらちゃんと私にも理解できました。
テーブルの例がとても参考になりました。
本当に、ご丁寧にありがとうございました。

回答No.1

noname#23734

<label for="ringo">○りんご</label><input type="radio" id="ringo">

<!ATTLIST LABEL
%attrs; -- %coreattrs, %i18n, %events --
for IDREF #IMPLIED -- matches field ID value --<<--これを使います。
accesskey %Character; #IMPLIED -- accessibility key character --
onfocus %Script; #IMPLIED -- the element got the focus --
onblur %Script; #IMPLIED -- the element lost the focus --
>

お礼

早々のご回答ありがとうございました。
こちらの知識が足りず、ちょっと理解ができなかったのですが参考になりました。
どうもありがとうございました。