【HTML】labelタグを使って、テキストと入力フォームを紐付けよう【input】

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！

１分で理解できるHTML/CSS講座シリーズです。

今回はlabelを使って、テキストと入力フォームを紐付ける方法について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

labelとは

入力フォームなどとテキストを紐付けるもので、
“お名前”というテキストをクリックすると
隣の入力フォームが反応するようなサイトってよくありますよね？

このときの“お名前”というテキストがlabelです。

labelの使い方

<label for="対応する要素のid">テキスト</label>

このように記述することでテキストとlabelを紐付ける事ができます。

See the Pen
Untitled by samehack (@samehack)
on CodePen.

まず“label未設定”をクリックしても何も起こらないことを確認してください。
次に”お名前”と“ご職業”をクリックすると、
入力フォームが反応することがわかります。

これがlabelを用いたテキストと入力フォームの紐付けです。

まとめ

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram