💡 この記事でわかること
- label要素とは何か
- label要素の2つの書き方(for属性・ネスト方式)
- labelを使うメリット(クリック範囲拡大・アクセシビリティ)
- checkbox・radio・selectとの組み合わせ例
- 初心者がつまずきやすいポイント
1. label要素とは？
label要素とは、
👉 フォームの入力欄と、その説明文(ラベル)を紐づけるためのタグです。
「お名前」「メールアドレス」といった項目名のテキストを、ただの文字として置くのではなく、label要素で入力欄と結びつけることで、見た目は同じでも裏側の意味づけが大きく変わります。
💡 label要素は地味に見えますが、フォームの使いやすさとアクセシビリティに直結する重要なタグです。この記事で書き方とメリットを押さえておきましょう。
2. label要素の2つの書き方
for属性とid属性で紐づける方法
label要素のfor属性に、紐づけたいinput要素のid属性と同じ値を指定します。
<label for="username">お名前</label>
<input type="text" id="username" name="username">label要素とinput要素が離れた場所にあっても紐づけられるのが、この方法のメリットです。
input要素をlabelで囲むネスト方式
label要素の中にinput要素を直接入れ子にする方法です。この場合、for属性とid属性は不要です。
<label>
お名前
<input type="text" name="username">
</label>💡 どちらの書き方でも結果は同じですが、input要素が離れた位置にあるレイアウトではfor属性方式、input要素をラベルのすぐ近くに置けるレイアウトではネスト方式が書きやすい傾向があります。
3. labelを使うメリット
クリック(タップ)できる範囲が広がる
label要素で紐づけられた入力欄は、input要素そのものだけでなく、ラベルのテキスト部分をクリック(タップ)しても選択・フォーカスされるようになります。
👉 特にcheckboxやradioは、丸いボタン部分自体が小さくスマートフォンではタップしづらいため、ラベルごとタップできることでぐっと押しやすくなります。
アクセシビリティが向上する
スクリーンリーダー(画面の内容を音声で読み上げるソフト)を使っている方が入力欄にフォーカスすると、紐づけられたlabelのテキストが読み上げられます。label要素がないと、その入力欄が何を入力する欄なのか伝わりません。
4. checkbox・radio・selectとの組み合わせ例
checkboxやradioは、ネスト方式で書くと特にコンパクトにまとめられます。
<label><input type="checkbox" name="hobby" value="reading"> 読書</label>
<label><input type="checkbox" name="hobby" value="sports"> スポーツ</label>select要素にもfor属性で紐づけられます。
<label for="prefecture">都道府県</label>
<select id="prefecture" name="prefecture">
<option value="tokyo">東京都</option>
<option value="osaka">大阪府</option>
</select>👉 select要素・option要素についての記事はこちら
5. 初心者がつまずきやすいポイント
for属性の値とid属性の値が一致していない
for属性とid属性は1文字でも違うと紐づきません。特にid属性を他の場所とコピペしてくる際に、一部だけ変え忘れるミスが起こりがちです。「ラベルをクリックしても反応しない」ときは、まずこのスペルミスを疑いましょう。
同じidを複数の入力欄で使い回してしまう
id属性はページ内で一意(1つだけ)である必要があります。同じidを持つ入力欄が複数あると、labelがどちらに紐づくか不定になり、正しく動作しません。
divやspanで代用してしまう
見た目だけを整えたくて、項目名をdivやspanタグで書いてしまうことがありますが、これだとクリック範囲拡大やスクリーンリーダー読み上げの恩恵を受けられません。入力欄の説明文には必ずlabel要素を使いましょう。
まとめ
この記事では、HTMLのlabel要素の使い方について解説しました。
- label要素は、入力欄と説明文を紐づけるためのタグ
- for属性+id属性、またはinput要素を囲むネスト方式で書く
- クリック範囲が広がり、スクリーンリーダーでの読み上げにも対応できる
- id属性の一致・重複には特に注意する
フォームを作るときは、input・selectだけでなくlabel要素もセットで書く習慣をつけていきましょう。