もくじ

ラジオボタンにラベルをつける

inputひとつにlabelがひとつ

ラジオボタンやチェックボックスにラベルを付けることを考えます。見た目には変化はありません。

あなたが一番やりたい役はどれですか(ひとつだけ)





ですが、label を使ったフォームでは、「亀」や「うらしまたろう」などの label に囲まれた部分をクリックしてもボタンが反応します。もちろん視覚障害のあるユーザーにも親切な設計になります。

次のようにします。input type="text" ひとつにlabelが一つついた様に、input type="radio" にもひとつずつ label がつきます。

そして label の方に for 、input の方に id 要素がつきます。

<form method="post" action="http://www.st.seiai.ed.jp/cgi-bin/cgimail">
<p>
<label for="namae">あなたのお名前:</label>
<input type="text" id="namae" name="YourName" size="20" maxlength="80">
</p>
<p class="sentaku">
あなたが一番やりたい役はどれですか(ひとつだけ)<br>
<input type="radio" id="yaku1" name="yaku" value="亀"><label for="yaku1"></label><br>
<input type="radio" id="yaku2" name="yaku" value="子供"><label for="yaku2">亀をいじめる子供</label><br>
<input type="radio" id="yaku3" name="yaku" value="うらしま"><label for="yaku3">うらしまたろう</label><br>
<input type="radio" id="yaku4" name="yaku" value="おとひめ"><label for="yaku4">おとひめ</label><br>
<input type="radio" id="yaku5" name="yaku" value="さかな"><label for="yaku5">たい または ひらめ</label><br>
</p>
<p>
<input type="submit" value="送信">
<input type="reset" value="やり直し">
</p>
</form>

id は一つのページ内に同じものがあってはなりませんから、全部異なる文字列にしなければなりません。

fieldset

第一の質問「あなたのお名前:」はlabelになっています。でも次の質問「あなたが一番やりたい役はどれですか」はlabelになっていません。これでは「亀」から「たい または ひらめ」までの選択肢が「あなたが一番やりたい役はどれですか」という質問に対応したものであるという関係がはっきりしません。

これをはっきりさせたいなら、fieldsetを使うのがよいでしょう。次のように視覚的にも枠で囲まれますからわかりやすくなるでしょう。

あなたが一番やりたい役はどれですか(ひとつだけ)




指定は次のようにします。グループを<fieldset>で囲んで、説明の文は <legend> の中に書きます。

<form method="post" action="http://www.st.seiai.ed.jp/cgi-bin/cgimail">
<p>
<label for="namae">あなたのお名前:</label>
<input type="text" id="namae" name="YourName" size="20" maxlength="80">
</p>
<fieldset>
<legend>あなたが一番やりたい役はどれですか(ひとつだけ)</legend>
<input type="radio" id="yaku1" name="yaku" value="亀"><label for="yaku1">亀</label><br>
<input type="radio" id="yaku2" name="yaku" value="子供"><label for="yaku2">亀をいじめる子供</label><br>
<input type="radio" id="yaku3" name="yaku" value="うらしま"><label for="yaku3">うらしまたろう</label><br>
<input type="radio" id="yaku4" name="yaku" value="おとひめ"><label for="yaku4">おとひめ</label><br>
<input type="radio" id="yaku5" name="yaku" value="さかな"><label for="yaku5">たい または ひらめ</label><br>
</fieldset>
<p>
<input type="submit" value="送信">
<input type="reset" value="やり直し">
</p>
</form>

for-id をいちいち書くのが面倒なとき

forとidを使って対応を付けるのが面倒な場合、ラベル内の文字をinputの前後に置くのならもっと簡単な方法があります。

for-idを使う場合

<input type="radio" id="yaku1" name="yaku" value="亀"><label for="yaku1"></label><br>

<label for="namae">あなたのお名前:</label>
<input type="text" id="namae" name="YourName" size="20" maxlength="80">

for-idを省略する場合

<label><input type="radio" name="yaku" value="亀">亀</label><br>

<label>あなたのお名前:
<input type="text" name="YourName" size="20" maxlength="80">
</label>

使い分け

forとidを使って対応を付けるのは、どんなときでも可能です。tableを使ってレイアウトをする時、labelとinputを別々のセルに入れるという場合も使えます。

ラジオボタンのようにたくさんの選択肢が並ぶ場合は、省略形の方が手間が省けると思います。

ただし、インターネットエクスプローラ(IE) ver.6 では省略形を使った場合はlabelの文字をクリックしても受け付けられず、○や□をクリックする必要があります。

labelタグは昔から決められているタグですが、○や□をクリックする代わりになるということまでは規定されているわけではありません。でもfor-idを使うとこの機能が使えるのに省略形ではできないという IE ver.6 の仕様は適切ではないと思います。2006年に発表された IE ver.7 では修正されているようですが、IE ver.6 は2001年に出てから現在(2009)まで修正されていません。

省略形が使えるかのテスト

見た目は変わりませんが、下のフォームは省略形が使われています。「亀」や 「たい または ひらめ」をクリックして選択を変えることができるか確認してください。

あなたが一番やりたい役はどれですか(ひとつだけ)





ウェブページ(Sep.2009)
聖愛中学高等学校
http://www.seiai.ed.jp/
Jun.2002 改訂