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

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

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

【HTML】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です。

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

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

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

まとめ

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

この記事を書いた人
Yujiro WEBコーダー

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

関連記事