2021-10-22

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

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

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

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

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

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

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

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

※ PCとスマホのGoogle Chrome、Safari、Microsoft edgeで動作確認しました。

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タグが反応するようにする方法」でした。

DOWNLOAD

ブログ用WordPressテーマを無料配布中

実務で使える構成・設計をベースにしたテーマです。
すぐにブログ運用を始めたい方はこちらからダウンロードできます。

Webサイトの集客や導線設計でお悩みではありませんか？

当社では、データ分析（GA4・検索データ）をもとに、
成果につながるWeb制作・改善をご提案しています。

課題の整理からでも大丈夫ですので、まずはお気軽にご相談ください。

Author：

Yujiro

Profile：

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。