label要素の使い方

HTMLのlabel要素は、入力欄や選択肢が何を表すのかを説明する名前（ラベル）です。ラベルとフォーム部品を関連付けると、見た目だけでなく、キーボードや支援技術にも目的が伝わります。

先に結論

最小の例

<label for="user-name">名前</label>
<input id="user-name" name="name" type="text">

forの値とidの値を一致させると、名前と入力欄が関連付けられます。forはnameではなく、部品のidと対応させます。

この例では、ラベルの文字をクリックまたはタップしても、対応する入力欄を選びやすくなります。実際のフォームでは、form要素や送信先も目的に合わせて用意します。

関連付ける2つの書き方

1. forとidで明示的に関連付ける

<label for="email">メールアドレス</label>
<input id="email" name="email" type="email">

ラベルと入力欄を別の場所に置けるため、レイアウトを組みやすい書き方です。ページ内でidを重複させず、同じtreeにあるlabelableなフォーム部品を指定します。

2. labelの中に部品を置く

<label>
  メールアドレス
  <input name="email" type="email">
</label>

forを使わず、labelの中にフォーム部品を置く方法です。部品が複数あると、どの部品がラベルの対象か分かりにくくなるため、通常は1つのlabelに1つのlabelableな部品を対応させます。

チェックボックスとラジオボタン

チェックボックスやラジオボタンも、それぞれにlabelを付けます。複数の選択肢全体に質問名を付けるときは、fieldsetとlegendを使います。

<fieldset>
  <legend>連絡方法</legend>
  <label><input type="radio" name="contact" value="email"> メール</label>
  <label><input type="radio" name="contact" value="phone"> 電話</label>
</fieldset>

個々の選択肢の名前はlabelが、選択肢のグループ名はlegendが担当します。役割の違う説明を1つのlabelに詰め込まないことが大切です。

labelを付けられる部品

すべてのHTML要素にlabelを関連付けられるわけではありません。代表的な対象はinput、select、textarea、buttonです。input type="hidden"のように画面上の操作部品ではない状態は、通常のlabelの対象にしません。

よくある間違い

• forとnameを同じにする。forは部品のidと一致させます。
• idを省略したまま、別置きのlabelと関連付けようとする。明示的な関連付けには両方が必要です。
• placeholderだけで入力内容を説明する。常に表示されるlabelを用意します。
• 1つのlabelの中に複数のフォーム部品を入れる。どの部品の名前か分かりにくくなるため、1対1の関連付けを基本にします。
• labelの中にリンクや別のボタンなど、別の操作要素を入れる。クリックの目的が競合し、キーボード操作や支援技術で分かりにくくなることがあります。

もう少し詳しく

labelは単なる見出しや装飾ではなく、フォーム部品のcaptionを表します。関連付けられたラベルの文字は、部品のaccessible nameを決める材料にもなります。ただし、aria-labelやaria-labelledbyなど別の指定がある場合は、アクセシブルな名前の計算規則全体を確認します。

Atlasで確認する

forのID判定、labelable要素の範囲、labelクリック時のactivation behavior、HTMLLabelElement API、アクセシビリティへの関係まで確認したい場合は、Yugien Atlasのlabel要素を参照してください。