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

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

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

label 要素の仕様

カテゴリ
コンテンツモデル

ただし、その label 要素によってラベル付けされていないラベル付け可能な要素、および label 要素を子孫に持つことはできません。

この要素を使用できる文脈

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

この要素で使用できる属性

詳細説明

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>

主要ブラウザの対応

IE11
Edge(EdgeHTML)
Edge(Chromium)
Chrome
Firefox
Safari
iOS Safari
Android Chrome

仕様書の該当箇所

4.10.4 The label element

用途から目的の要素を探す

用途から HTML5 の要素を逆引きできます。

テキストに対する意味づけを行いたい
テキストの編集を示したい
改行や折り返しを指定したい
上付きや下付きを指定したい
テキストの書字方向を制御したい
テキストにルビをふりたい
箇条書きなどリストを表したい
セクションを定義したい
コンテンツをグループ化したい
画像や映像などを埋め込みたい
スクリプトやスタイルを埋め込みたい
フォーム関連の要素
テーブル関連の要素
ドキュメントにメタデータを付与したい
インタラクティブな要素
その他

このページの上部へ