<label>

HTML の <label> 要素は、ユーザーインターフェイスの項目のキャプションを表します。

<label><input> 要素と関連付けると、いくらかの利点が発生します。

  • ラベルのテキストが、対応するテキスト入力欄に視覚的に関連付けられるだけではありません。プログラム的にも関連付けられます。つまり、例えばユーザーがフォーム入力欄にフォーカスを移動した時、読み上げソフトがラベルを読み上げ、支援技術のユーザーが何のデータを入力するべきか理解しやすくすることができます。
  • 関連付けられたラベルをクリックして、入力欄自体をクリックした場合と同様に、入力欄にフォーカスを与えたりアクティブ化にしたりすることができます。こうしてヒット領域を拡大すると、タッチパネルの端末を使用している場合を含めて、入力欄をアクティブ化させやすくなります。

<label><input> 要素に関連付けるには、 <input>id 属性を設定しなければなりません。そして <label>for 属性を設定して、値を input の id と同じにします。

他の方法として、 <input> を直接 <label> の内側に入れることができますが、この場合は関連付けが明確なので、 for および id 属性は必要ありません。

<label>Do you like peas?
  <input type="checkbox" name="peas">
</label>

その他の使用上の注意事項

  • label がラベル付けするフォームコントロールはラベル付きコントロール (labeled control) と呼ばれます。一つの入力欄に複数のラベルを関連付けることができます。
  • <label> がクリックやタップされ、それがフォームのコントロールに関連付けられていた場合は、 click イベントが関連付けられたコントロールにも発生するようになります。

属性

この要素にはグローバル属性があります。

for
<label> 要素と同一の文書内にあるラベル付け可能フォーム関連要素の id。文書中の for 属性の値と合致する id を持つ最初の要素がラベル付け可能な要素であれば、このラベル要素の示すラベル付きコントロールとなります。ラベル付け可能要素でなければ、 for 属性は効果がありません。一致する id 値を持つ他の要素が文書内のその後にあったとしても、考慮されません。
: <label> 要素は、 for 属性が指す要素が包含するコントロール要素である場合、 for 属性を持ちつつ、中にコントロール要素を含めることができます。

CSS のスタイル付け

<label> には特殊なスタイル上の考慮事項はありません。 — 構造的に単純なインライン要素であり、ほとんどは <span><a> 要素と同じ方法でスタイルを適用します。テキストが読みにくくならない限り、あらゆる方法でスタイルを適用することができます。

シンプルな label の例

<label>Click me <input type="text"></label>

"for" 属性の使用例

<label for="username">Click me</label>
<input type="text" id="username">

アクセシビリティの考慮事項

対話型コンテンツ

label の中にアンカーボタンのような対話型要素を配置しないでください。そのようにすると、ユーザーが label に関連したフォーム入力欄を有効化する事が難しくなります。

悪い例

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions">
  <a href="terms-and-conditions.html">利用規約と利用条件</a>に同意します。
</label>

良い例

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions">
  利用規約と利用条件に同意します。
</label>
<p>
  <a href="terms-and-conditions.html">利用規約と利用条件を読む</a>
</p>

見出し

見出しは一般的にナビゲーションエイドとして使用されるため、 <label> の中にヘッダー要素を配置すると、数多くの種類の支援技術を妨げることになります。ラベルの文字列を視覚的に調整する必要がある場合は、代わりに <label> 要素に CSS クラスを適用してください。

フォーム、またはフォームのセクションにタイトルが必要な場合は、 <fieldset> の中に <legend> を配置して使用してください。

悪い例

<label for="your-name">
  <h3>Your name</h3>
  <input id="your-name" name="your-name" type="text">
</label>

良い例

<label class="large-label" for="your-name">
  Your name
  <input id="your-name" name="your-name" type="text">
</label> 

ボタン

<input> 要素に type="button" がついた宣言に妥当な value 属性があれば、関連付けるラベルは必要ありません。ラベルを付けると、支援技術がボタン入力をどう解釈するかをじゃまする可能性があります。 <button> 要素でも同じことが言えます。

技術的概要

コンテンツカテゴリ フローコンテンツ, 記述コンテンツ, 対話型コンテンツ, フォーム関連要素, 知覚可能コンテンツ
許可されている内容 記述コンテンツ、ただし、子孫に label 要素を持つことはできない。ラベル付けの対象となるコントロール以外のラベル付け可能要素を入れてはならない。
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 記述コンテンツを受け入れるすべての要素
暗黙の ARIA ロール 対応するロールなし
許可されている ARIA ロール 許可されている role なし
DOM インターフェイス HTMLLabelElement

仕様書

仕様書 状態 備考
HTML Living Standard
<label> の定義
現行の標準
HTML5
<label> の定義
勧告
HTML 4.01 Specification
<label> の定義
勧告
HTML 4.0 Specification
<label> の定義
勧告 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
labelChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
forChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応