HTMLでlabelとinputを紐づける方法｜forとid

📌

結論

<label> の for と <input> の id を一致させると紐づく

📝 実際のコードはこちら

<label for="email">メール</label>
<input type="email" id="email" name="email">

なぜlabelが必要？

ラベルを付けると、テキスト（メールの部分）をクリックしても入力欄にフォーカスします。スマホでは特に便利です。さらに重要なのがアクセシビリティ。スクリーンリーダーがこの入力欄はメール用ですと読み上げてくれます。

📝 実際のコードはこちら

<label>
  メール
  <input type="email" name="email">
</label>

inputをlabelで囲む方法もあります。forとidの指定が不要になりますが、スタイリングの自由度は下がります。

・for と id を一致させてlabelとinputを紐づける・アクセシビリティの必須マークアップ・囲む方法でも紐づけ可能

labelとinputを紐づけてみましょう。

🧪 ここで試せます ─ 壊しても大丈夫！

下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。

■ 演習

メールというラベルと、id="email"のinputをforとidで紐づけてください。

詰まったらヒント

labelのforとinputのidを一致させる