label 要素

4.10.4 label 要素

カテゴリー:
フロー・コンテント
フレージング・コンテント
インタラクティブ・コンテント
再関連付け可能フォーム関連要素
パルパブル・コンテント
この要素を使うことができるコンテキスト:
フレージング・コンテントが期待される場所
コンテントモデル:
フレージング・コンテント。ただし、この要素のラベル付きコントロールでない限り、ラベル付け可能要素を子孫に持つことはできません。そして、子孫に label 要素を持つことはできません。
コンテント属性:
グローバル属性
form - form 要素にコントロールを関連付ける
for - ラベルをフォームコントロールに関連付ける
text/html におけるタグの省略:
どちらのタグも省略できません。
指定可能な ARIA role 属性 の値:
なし
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
DOM インタフェース:
interface HTMLLabelElement : HTMLElement {
  readonly attribute HTMLFormElement? form;
           attribute DOMString htmlFor;
  readonly attribute HTMLElement? control;
};

label 要素は、ユーザーインタフェースにおけるキャプションを表します。そのキャプションは、特定のフォームコントロールと結び付けることができます。これは、label 要素のラベル付きコントロールとして知られているものです。特定のコントロールと結び付けるには、for 属性を使うか、または、label 要素自身の中にフォームコントロールを入れるか、のいずれかとなります。

次の規則で指定されない限り、label 要素はラベル付きコントロールを持ちません。

for 属性を指定することで、キャプションを結びづけるフォームコントロールを指し示すことができます。この属性を指定するなら、その属性値は、その label 要素と同じ Document にあるラベル付け可能な要素の ID でなければいけません。この属性が指定され、IDfor 属性の値に等しい要素が Document にあり、その最初の要素がラベル付け可能な要素であれば、その要素が label 要素のラベル付きコントロールとなります。

for 属性が指定されていないものの、その label 要素がラベル付け可能な要素を子孫に持つなら、その子孫のうち、ツリー順で最初の子孫が、その label 要素のラベル付きコントロールとなります。

label 要素の正確なデフォルトのプレゼンテーションとビヘイビア、とりわけ、そのアクティベーションビヘイビアがどうなるのかについては、プラットフォームのラベルビヘイビアがあるなら、それに合わせるべきです。label 要素のインタラクティブ・コンテントの子孫、及び、そのようなインタラクティブ・コンテントの子孫の子孫にターゲットにされたイベントに対する label 要素のアクティベーションビヘイビアは、何もしないこと、としなければいけません。

例えば、チェックボックスのラベルをクリックするとそのチェックボックスにチェックが入るプラットフォームでは、次の例の label をクリックしたら、ユーザーエージェントは、ユーザーが input 要素をクリックしたかのように、その input 要素で疑似クリック・アクティベーション手順を実行することができます:

<label><input type=checkbox name=lost> Lost</label>

他のプラットフォームでは、コントロールにフォーカスするだけかもしれませんし、何もしないかもしれません。

form 属性は、label 要素を、そのフォームオーナーと明示的に関連づけるために使われます。

次の例は 3 つのコントロールを示していますが、それぞれにラベルがあります。うち 2 つには小さなテキストがあり、ユーザーに適切なフォーマットを見せています。

<p><label>Full name: <input name=fn> <small>Format: First Last</small></label></p>
<p><label>Age: <input name=age type=number min=0></label></p>
<p><label>Post code: <input name=pc> <small>Format: AB12 3CD</small></label></p>
label . control

この要素に結びづけられているフォームコントロールを返します。

htmlFor IDL 属性は、for コンテンツ属性を反映しなければいけません。

control IDL 属性は、label 要素のラベル付きコントロールがあれば、それを返します。なければ、null を返します。

form IDL 属性は、この要素の forms API の一部です。


control . labels

フォームコントロールが結びづけられているすべての label 要素の NodeList を返します。

ラベル付け可能な要素は、それらに結びづけられた label 要素のリストを表す NodeList オブジェクトを持ちます。そのリストはツリー順です。そして、そのラベル付きコントロールは該当の要素となります。ラベル付け可能な要素の labels IDL 属性は、取得時には、その NodeList オブジェクトを返さなければいけません。


※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#the-label-element