label 要素ユーザインタフェースにおける項目名を表す

label 要素はユーザインタフェースにおける項目名を表します。

label 要素によって表された項目名は、特定のラベル付け可能なフォーム関連要素をラベル付け (関連付け) することが可能です。ラベル付けは、ラベル付け可能なフォーム関連要素を label 要素で内包するか、label 要素の for 属性に、対象としたいラベル付け可能なフォーム関連要素に付与した id 属性値を指定することで行えます。

さらに詳細な説明を見る

サンプルソースを見る

label 要素の仕様

カテゴリ
コンテンツモデル
  • その label 要素によってラベル付けされていない、ラベル付け可能なフォーム関連要素を子孫に持つことはできません
  • label 要素を子孫に持つことはできません
この要素を使用できる文脈

フレージング・コンテンツが期待される場所

この要素で使用できる属性
DOM インタフェース
interface HTMLLabelElement : HTMLElement {
  readonly attribute HTMLFormElement? form;
           attribute DOMString htmlFor;
  readonly attribute HTMLElement? control;
};

詳細説明

label 要素に内包することでラベル付けを行う

ラベル付け可能なフォーム関連要素と、ラベルに使用したいテキストを label 要素で内包してしまうことでラベル付けを行います。例えば下記のような記述になります。

<label>お名前 <input type="text" name="name" /></label>

この場合、該当する label 要素によってラベル付けされていないラベル付け可能なフォーム関連要素を子孫にすることはできません。例えば下記のような記述は間違いです。for 属性によって内包されているフォーム関連要素とは異なる要素が指定されています。

<label for="address">お名前 <input type="text" name="name" /></label>

もし、label 要素内に複数のラベル付け可能なフォーム関連要素が内包された場合、最初の要素がラベル付け対象となります。

for 属性によってラベル付けを行う

ラベル付けを行いたいラベル付け可能なフォーム関連要素に対して付与した id 属性値を、label 要素の for 属性値に指定することでラベル付けを行います。例えば下記のような記述になります。

<input type="checkbox" name="sampleCheck" id="sampleCheck" />
<label for="sampleCheck">内容を確認しました</label>

下記に実際の表示サンプルを示しますが、項目名となるテキストをクリックすることで、ラベル付けされたチェックボックスを選択したりすることが可能になります。

label 要素のサンプルソース

<label>
 <input type="checkbox" name="sampleCheck"> 内容を確認しました
</label>
<input type="checkbox" name="sampleCheck" id="sampleCheck">
<label for="sampleCheck">内容を確認しました</label>

W3C HTML5 仕様書

4.10.6 The label element