2008年9月 1日(月) 14時56分32秒 [Web関連]

文字部分もクリック可能なチェックボックスとかを作るとき

文字（ラベル）部分もクリック可能なチェックボックスとかラジオボタンを作りたい場合は、input要素のほかにlabel要素を使います。
input要素にid属性でID名を割り振り、そのID名をlabel要素のfor属性値に指定するだけ。
例えば、以下のような感じ。

こうすると、ラベル「さくら」部分をクリックしても、対応するチェックボックスをクリックしたことになります。
表示すると以下のような感じ。

しかーし。いちいちID名を割り振るのがめんどくせえョ！……という場合は、label要素の内部にinput要素を書いてしまえば良いです。

こうすると、id属性を使ってID名を割り振る必要はありません。label要素にもfor属性は不要です。
これは楽でいいですね。

※(追記：2008/09/02)
なんと、この方法はIE6ではダメっぽいです。IE7ではいけましたが……。ショックだ。(^_^;;;
IE6の場合はしっかりID名を割り振って指定しないとラベルとして扱ってくれないみたいです。

この方法で表示すると以下のような感じ。（見た目はさっきと一緒）

ID名を割り振るしかないのは、テーブルを使ってる場合みたいに、「チェックボックスそのもの」と「ラベル」が物理的に離れた位置に記述されているときくらいかな？