<label>: ラベル要素

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

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

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

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

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

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

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

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

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

for

for 属性の値は単一の id でなければならず、これは <label> 要素と同一の文書内にあるラベル付け可能なフォーム関連要素のものです。従って、この label 要素が関連付けられるのはフォームコントロール 1 つだけです。

メモ: プログラムから for 属性を設定する場合は、 htmlFor を使用してください。

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

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

メモ: <label> 要素は、包含するコントロール要素が for 属性が指す要素である場合、 for 属性を持ちつつ、中にコントロール要素を含めることができます。

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

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 クラスを適用してください。

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

悪い例:

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