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

文字で選択したい

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

つまり...


んで、


って、ことですね。

方法１

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


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

  文字チェック制御１


 文字ラジオ制御１Ａ  文字ラジオ制御１Ｂ

方法２

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

こんな感じですかね？


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

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

  文字チェック制御１

  文字ラジオ制御１
  文字ラジオ制御２

後書き

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

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

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