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

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

属性

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

for
ラベル要素と同一の文書内にあるラベル付け可能フォーム関連要素の id。文書中の for 属性の値と合致する ID を持つ最初の要素が、このラベル要素の示すラベル付きコントロールとなります。
for 属性が包含するコントロール要素を指すのであれば、label 要素で for 属性と包含するコントロール要素の両方を持つことができます。
form HTML5
label 要素と紐付けたフォームコントロールが属する form 要素 (form owner)。属性値は、同一の文書内にある <form> 要素の ID にします。この属性により、label 要素を form 要素の子孫としてだけではなく、同一文書のどこにでも配置できるようになりました。
このコンテンツ属性は2016年4月28日に HTML 仕様書から削除されました。ただしスクリプトは引き続き、読み取り専用の HTMLLabelElement.form 属性にアクセスできます。これはラベルが関連付けられたコントロールが属するフォームを返し、ラベルがコントロールに関連付けられていなかったり、そのコントロールがフォームに属していなかったりした場合は null を返します。

使用上のメモ

  • コントロールを <label> の子要素として配置するか for 属性を用いることで、ラベルとコントロールを関連付けることができます。そのように関連付けられたコントロールは、ラベル要素のラベル付きコントロール (labeled control)と呼ばれます。ひとつの input を複数のラベルに関連付けることができます。
  • ラベル自体は、フォームに直接関連付けられません。ラベルは自身が関連付けられるコントロールを通して、間接的にフォームに関連付けられます。
  • <label> がクリックやタップされ、それがフォームのコントロールに関連付けられていた場合は、 click イベントが関連付けられたコントロールにも発生するようになります。

シンプルな 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> 要素でも同じことが言えます。

仕様書

仕様書 策定状況 コメント
HTML Living Standard
<label> の定義
現行の標準  
HTML5
<label> の定義
勧告  
HTML 4.01 Specification
<label> の定義
勧告 初回定義

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり あり あり あり あり あり
for あり あり あり あり あり あり
form あり あり あり — 49 あり あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり あり あり あり あり
for あり あり あり あり あり あり あり
form あり あり あり あり — 49 あり あり あり

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss, sii, teoli, hrysd, ethertank
最終更新者: mfuji09,