HTML の <label>
要素は、ユーザーインターフェイスの項目のキャプションを表します。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<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 がラベル付けするフォームコントロールはラベル付きコントロールと呼ばれます。一つの入力欄に複数のラベルを関連付けることができます。
<label>
がクリックやタップされ、それがフォームのコントロールに関連付けられていた場合は、click
イベントが関連付けられたコントロールにも発生するようになります。
属性
この要素にはグローバル属性があります。
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> の定義 |
勧告 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser