今回は、「label要素をクリックしたらinputタグが反応するようにする方法」について紹介します。

簡単に出来る実装なので、是非参考にしてみてください。

【HTML】label要素をクリックしたらinputタグが反応するようにする方法

以下の2つのコードを見比べてみてください。

See the Pen
Untitled by webis (@webis-co)
on CodePen.

1つの目コードではlabel要素のテキストをクリックしても、inputタグが反応しません。

そして2つ目のコードではlabel要素をクリックしたら、inputタグが反応します。

2つ目のコードのようにinputタグを反応させるコードを見ていきましょう。

デモコード

labelタグをクリックしたらinputタグが反応するようにするためには、inputタグにid名（自由でOK）を記述し、そのid名と一緒の値をlabel要素のforに指定してあげればOKです。

<input type="checkbox" id="test"><label for="test">labelが反応するパターン</label>

forとは、関連づけをするid名を指定することが出来るものです。

つまり、id名とforの値を合わせることで、label要素をクリックしたらinputタグが反応するようになります。

上記のように紐づけることで、ユーザーがクリックしやすくなりユーザビリティも上がるのでおすすめですよ！

まとめ

以上が、「label要素をクリックしたらinputタグが反応するようにする方法」でした。