フォームでラベルもクリックできるようにする

webサイトとかで会員登録とかアンケートフォームを入力しているとき、ラジオボタンとかチェックボックスにおいて、ボタン部分押さなくても横のラベル部分クリックすることで選択状態にできるサイトとできないサイトがあった。前者の方が使いやすいのは言うまでもない。javascriptでも使って実現しているのかと思ったけどもっとシンプルだった。

ラベルがクリックできないダメサイト

<input type="checkbox" id = "hoge"/>犬派の人はクリック!

ラベルがクリックできるイカしてるサイト

<input type="checkbox" id = "hoge"/>
<label for="hoge">犬派の人はクリック!</label>

要するにlabelは横着しないでlabelタグを使おうっていう話