labelのfor属性とinputのid紐づけ

📝 問題の再掲

Q27: <label> タグの for 属性と紐づける <input> の属性はどれですか？

選択肢: name / class / id（正答） / value

⚠️ よくある間違い

name と id を混同するケースが非常に多いです。どちらも「名前をつける」属性ですが、役割がまったく違います。

📖 段階的な説明

ステップ1：labelとinputの紐づけとは？

ラベル（説明文）をクリックしたとき、対応する入力欄にフォーカスが移る仕組みです。スマホでは小さい入力欄をタップしやすくなります。

ステップ2：for ↔ id のペア

label の for 属性と、input の id 属性の値を同じにすると紐づきます。

ステップ3：各属性の役割の違い

• id — ページ内で一意の識別子。labelとの紐づけに使う
• name — フォーム送信時にサーバーに送るデータの名前
• class — CSSでスタイルを当てるためのグループ名
• value — 入力欄の初期値

💻 コード例

<!-- ✅ for と id で紐づけ -->
<label for="email">メールアドレス</label>
<input type="email" id="email" name="user_email">

<!-- ✅ label の中に input を入れる方法（for 不要） -->
<label>
  メールアドレス
  <input type="email" name="user_email">
</label>

<!-- ❌ name では紐づかない -->
<label for="email">メール</label>
<input type="email" name="email"> <!-- id がないので紐づかない -->

🔗 関連知識

• 紐づけはアクセシビリティ（スクリーンリーダー対応）にも重要です
• 1つのページに同じ id を2つ以上使ってはいけません（id は一意）

✅ 確認問題

Q: 以下のHTMLで、ラベルをクリックしてもチェックボックスが反応しない原因は？

<label for="agree">同意する</label>
<input type="checkbox" name="agree" class="agree">