フォームの「氏名」や「メールアドレス」といった項目名。ただテキストで置くだけと、label 要素できちんとマークアップするのとでは、使いやすさが大きく変わります。label を for 属性で入力欄に結びつけると、ラベルの文字をクリックするだけで入力欄にカーソルが入ったり、チェックボックスのオン・オフができたりします。この記事では、label 要素と for 属性の使い方、2通りの書き方、チェックボックスでの効果まで、実際に動かせるコードで解説します。フォームを正しく作りたい初心者〜中級者の方が対象です。
目次
label 要素は何をしてくれるのか
label 要素は、フォームの入力欄（input や select など）に「これは何を入力する欄か」という名前を結びつけるための要素です。単なる見出しの装飾ではなく、ブラウザにとって「このテキストはこの入力欄のラベルだ」という意味を持ちます。結びつけることで、次のような利点が生まれます。
- ラベルの文字をクリックすると、対応する入力欄にフォーカスが移る
- チェックボックスやラジオボタンは、ラベルのクリックでもオン・オフできる
- スクリーンリーダーが「何の入力欄か」を読み上げられ、アクセシビリティが向上する
特にチェックボックスは四角い枠が小さく押しにくいため、ラベルでクリック範囲が広がるのは実用上とても大きなメリットです。
基本の使い方｜for と id で結びつける
もっとも基本的な書き方は、label の for 属性と、input の id 属性に同じ値を指定して結びつける方法です。この for と id の値がペアになっていることが、結びつきの鍵になります。
<!-- for と id の値（username）を一致させる -->
<label for="username">お名前</label>
<input type="text" id="username" name="username">これで「お名前」という文字をクリックすると、テキスト入力欄にカーソルが入ります。注意したいのは、for が指すのは input の name ではなく id だという点です。name はフォーム送信時のデータ名で役割が異なるため、混同しないようにしましょう。id はページ内で重複してはいけないので、入力欄が複数あるときはそれぞれ違う id を付けます。
もう一つの書き方｜input を label で包む
label の中に input を入れて包んでしまう書き方もあります。この場合は for と id が無くても結びつきます（暗黙の関連付け）。マークアップが少なくて済むので、チェックボックスやラジオボタンでよく使われます。
<!-- label で input を包むと for / id は不要 -->
<label>
<input type="checkbox" name="news">
メールマガジンを受け取る
</label>2つの書き方の違いを整理しておきます。どちらも正しい方法なので、状況に合わせて選びましょう。
| 書き方 | 特徴 | 向いている場面 |
|---|---|---|
for ＋ id で結ぶ | ラベルと入力欄を離れた位置に置ける | CSS で自由にレイアウトしたいフォーム |
label で包む | id 不要で簡潔。両者は必ず隣接する | チェックボックス・ラジオボタン |
表組みのように、ラベルと入力欄を別々のセルに置きたいレイアウトでは for ＋ id の方式が必要になります。一方、テキストとチェックボックスが必ず隣り合う場合は、包む書き方が手軽です。
クリック範囲が広がるのを試してみる
実際に label の効果を体験してみましょう。下のデモでは、チェックボックスの右の文字（ラベル）をクリックしても、チェックが切り替わります。ラジオボタンも同様に、項目名のどこをクリックしても選択できます。カーソルを乗せると指の形（cursor: pointer）になり、押せることが視覚的にも伝わります。
<form>
<p>
<input type="checkbox" id="agree">
<label for="agree">利用規約に同意する（このラベルをクリックしてもチェックが切り替わります）</label>
</p>
<fieldset>
<legend>お支払い方法</legend>
<label><input type="radio" name="pay" value="card"> クレジットカード</label>
<label><input type="radio" name="pay" value="bank"> 銀行振込</label>
</fieldset>
</form>
form { font-family: sans-serif; line-height: 1.8; }
label { cursor: pointer; } /* クリックできることが伝わるカーソルに */
fieldset {
margin-top: 16px;
border: 1px solid #ccc;
border-radius: 8px;
padding: 8px 16px;
}
legend { font-weight: bold; }
このデモでは、ラジオボタンのグループを fieldset と legend で囲んでいます。fieldset は関連する入力欄をひとまとめにする要素、legend はそのグループの見出しです。「お支払い方法」のような選択肢の集まりを囲むと、構造が明確になり、支援技術にも正しく伝わります。
ラベルをクリックしても反応しないとき
for と id の値が一致していない
もっとも多い原因が、for と id の値のタイプミスや食い違いです。for="email" なのに id="e-mail" になっている、といったケースです。値は完全に一致している必要があり、大文字・小文字も区別されます。クリックしても反応しないときは、まずこのペアを見比べてください。
同じ id が複数の要素で使われている
id はページ内で一意でなければなりません。同じ id を複数の入力欄に付けると、label は最初に見つかった要素にしか結びつかず、思った欄が反応しません。フォームを複製したときなどに起きやすいので、id が重複していないか確認しましょう。
label ではなく span や div を使っている
見た目を整えるために span や div で項目名を書いても、クリックで入力欄が反応する機能は得られません。クリック範囲の拡大もアクセシビリティ向上も label 要素ならではの機能です。フォームの項目名には、装飾用の要素ではなく label を使いましょう。
まとめ
label 要素は、フォームを使いやすく・アクセシブルにするための基本です。要点を振り返ります。
labelのforとinputのidを同じ値にして結びつけるlabelでinputを包めばfor/idなしでも関連付けられる- 結びつけるとラベルのクリックで入力欄が反応し、クリック範囲が広がる
- 反応しないときは
forとidの一致と、idの重複をまず確認する
フォームを作るときは、すべての入力欄に label を付けることを習慣にしましょう。それだけで、誰にとっても操作しやすいフォームに近づきます。