HTML
labelをクリックしてもinputにフォーカスしない
labelとinputが紐づいていない
こんな症状
ラベルをクリックしても入力欄にカーソルが移動しない。labelとinputの紐づけが正しくないときに起きるよ。
まず試す
<label for="email"> と <input id="email"> のように for と id を同じ値にする。
html
<label for="email">メール</label>
<input id="email">これで直らなければ、下の「自分のケース」を確認。
🔍 自分のケースはどれ？
- ✓for と id が違う
→ for と id を完全一致させる。 - ✓id を付け忘れた
→ input に id を付け、label の for と合わせる。 - ✓for/id を書きたくない
→ <label><input>テキスト</label> のように label で input を囲む。
なぜ起きる？
labelのfor属性とinputのid属性が一致していないよ。ブラウザはfor属性の値と同じidを持つinput要素を探して紐づけるんだ。値が一致していないとラベルクリックでフォーカスが移動しないよ。
✕ エラーが起きるコード
<label for="mail">メール</label><input id="email">
<!-- for と id 不一致 -->✓ 直したコード
<label for="email">メール</label><input id="email">✅ 直ったか確認
ラベルをクリックして対応する入力欄にフォーカスが移ればOK。
この解決法は役立ちましたか？
🔗 関連するエラー
- input要素のtype属性ミスで入力欄が意図通りにならない — type属性のスペルミス
- input の autocomplete が効かない — inputのautocomplete属性が効かない
- tabindex の順序が期待通りにならない — tabindexの順序が期待通りにならない
- スタイルが反映されない — CSSファイルが読み込まれていない
- 画像が表示されない — 画像パスが間違っている
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
✏️ 手を動かして練習
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説