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

試してみましょう

<div>  <label for="cheese">チーズが好き</label>  <input type="checkbox" name="cheese" /></div><div>  <label for="peas">エンドウ豆が好き</label>  <input type="checkbox" name="peas" /></div>

.preference {  display: flex;  justify-content: space-between;  width: 60%;  margin: 0.5rem;}

属性

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

for

この値は、同じ文書内のラベル付け可能なフォームコントロールのid であり、この<label> をそのフォームコントロールに関連付けます。なお、 JavaScript が反映するプロパティはhtmlFor です。

使用上の注意

ラベルとフォームコントロールの関連付け

文書内でfor 属性の値に一致するid 属性を持つ最初の要素が、このlabel 要素で「ラベル付けされたコントロール」になります（そのid を持つ要素が実際にラベル付け可能要素である場合）。この要素がラベル付け可能でない場合は、for 属性は何も効果がありません。もし、文書の後半にid の値に一致する他の要素があったとしても、それらは考慮されません。

複数の<label> 要素を同じフォームコントロールに関連付けすることができます。複数の<label> 要素のfor 属性に同じ値を指定することで、そのコントロールは複数のラベルを持つことになります。

<label> を<input> や<textarea> などのフォーム要素と関連付けると、いくつかの利点が発生します。

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

<label> をフォームコントロールと関連付けする方法は 2 つあり、一般に「明示的な関連付け」と「暗黙的な関連付け」と呼ばれます。

<label> 要素と<input> 要素を明示的に関連付けるには、最初にid 属性を<input> 要素に追加します。次に、for 属性を<label> 要素に追加します。for の値は<input> 要素のid と同じにします。

<label for="peas">エンドウ豆が好きです</label><input type="checkbox" name="peas" />

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

<label>  エンドウ豆が好きです  <input type="checkbox" name="peas" /></label>

これらの 2 つのメソッドは同等ですが、いくつか考慮点があります。

• 一般的なブラウザーとスクリーンリーダーの組み合わせは、暗黙的な関連付けに対応していますが、すべての支援技術が対応しているわけではありません。
• デザインによっては、関連付けの種類がスタイル設定のしやすさに影響する場合があります。<label> とフォームコントロールを親子関係ではなく兄弟要素にすると、別々の隣接ボックスとなり、グリッドやフレックスレイアウトで揃えるなど、よりカスタマイズ性の高いレイアウトが可能になります。
• 明示的な関連付けには、フォームコントロールがid 属性を保有し、かつその値が文書全体で一意であることが要求されます。これは特にコンポーネント化されたアプリケーションでは困難です。 React のuseId() など、フレームワークは多くの場合、独自の解決策を提供しますが、それでも適切な機能を実現させるには追加の調整が必要です。

一般に、外部ツールや支援技術との互換性を確実に実現するため、for属性による明示的な関連付けの使用を推奨します。実際、最大限の互換性を得るために、内側にある要素に同時にid/for 属性を指定することもできます。

ラベルがラベル付けするフォームコントロールは、 label 要素のラベル対象コントロール と呼ばれます。複数のラベルを同じフォームコントロールに関連付けることができます。

<label for="username">名前を入力してください:</label><input name="username" type="text" /><label for="username">名前を忘れてしまいましたか？</label>

<label> 要素に関連付けることができる要素には<button>,<input> （type="hidden"` を除く）,<meter>,<output>,<progress>,<select>,<textarea> があります。

アクセシビリティ

対話型コンテンツ

暗黙的に関連付けられたフォームコントロール以外に、アンカーやボタンなどの追加の操作可能な要素を<label> 内に配置しないでください。そうすると、label に関連付けられたフォーム入力要素をユーザーが操作しにくくなります。

悪い例:

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

良い例:

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

見出し

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

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

悪い例:

<label for="your-name">  <h3>氏名</h3>  <input name="your-name" type="text" /></label>

良い例:

<label for="your-name">  氏名  <input name="your-name" type="text" /></label>

ボタン

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

例

暗黙的なラベルの定義

<label>ここをクリック <input type="text" /></label>

"for" 属性をつけた明示的なラベルの定義

<label for="username">クリックすると入力フィールドにフォーカスします</label><input type="text" />

技術的概要

仕様書

ブラウザーの互換性