にしし ふぁくとりー(西村文宏 個人サイト)

Presented by Nishishi via Movable Type. Last Updated: 2015/09/22. 13:21:08.

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

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

<input type="checkbox" name="sakura" id="check01">
<label for="check01">さくら</label>

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

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

<label>
   <input type="checkbox" name="sakura">さくら
</label>

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

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

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

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

コメント

コメント数: 0件

コメント投稿欄 この日記に対するコメント投稿を歓迎します。

保存しますか?



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※投稿内容は、実際にページ上に掲載される前に、管理者によって確認される設定にしている場合があります。その場合は、投稿後にその旨が表示されます。たいてい1~2日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

トラックバック

このエントリーへのトラックバックURLを表示するにはここをクリック
※スパム防止のため、トラックバックURLは別ウインドウで表示します。(JavaScriptが有効でないと表示されません。)

--- 当サイト内を検索 ---