<label>

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

この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

上記の例では、二つのフォーム入力の例が見られます。 — 最初のものは <label> がないのに対して、二番目のものは <label> があります。二番目の例は幾らかの利点があります。

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

上記の方法で <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 属性が包含するコントロール要素を指すのであれば、 <label> 要素で for 属性と包含するコントロール要素の両方を持つことができます。

form

label 要素と紐付けたフォームコントロールが属する <form> 要素 (form owner)。属性値は、同一の文書内にある <form> 要素の id にします。この属性により、label 要素を form 要素の子孫としてだけではなく、同一文書のどこにでも配置できるようになりました。

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

技術的概要

仕様書

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

関連情報

その他のフォーム関連要素:

• <form>
• <input>
• <button>
• <datalist>
• <legend>
• <select>
• <optgroup>
• <option>
• <textarea>
• <keygen>
• <fieldset>
• <output>
• <progress>
• <meter>