社内SEの徒然なる日記

HTMLでチェックボックスとラジオボタンをラベルで選択してみた

文字で選択したい

HTMLでチェックボックスやラジオボタンを作る時に、付随する文字で選択できないと不便です。

つまり...
LABELの関連付け1

んで、
LABELの関連付け2

って、ことですね。

方法1

LABELタグで項目を囲んでやれば文字で選択できるようになりました。
ソースは、こんな感じ。
LABELの関連付け3

これで、文字で選択できるようになりました。




 


方法2

どうやら、上記の方法は正攻法ではないらしいです。
本当は、ラベルにforを付けて関連付けるのが正しいようです。

こんな感じですかね?
LABELの関連付け4

INPUTタグにid属性で固有の識別名を付けます。
LABELタグのfor属性に、関連付けたいINPUTタグのid属性と同じ値を設定します。
名称で明示的に関連付けが出来るようなので、LABELで囲うのはやめています。

実装の結果は、下記の通りです。








後書き

レイアウトとかを考えると、方法2のようにforで明示的に関連付けた方が便利なのでしょうけど、私は方法1のLABELで囲う方を使っています。
...いちいちid属性で名前をつけるのが面倒なだけなんですけどね。

私が触るWEBシステムは自社の基幹系システムだけ。
そして、こいつはIEでしか動かないので、IEで動作するようなら問題ないんですよね。

まぁ、Google Chromeでも動いたので、だいたいのブラウザでは動作しそうな気がしますけどね。

スポンサードリンク

PageTop

コメント


管理者にだけ表示を許可する