label 要素

概要

HTML の Label 要素 (<label>) はユーザインタフェース内のアイテムのキャプションを表します。for 属性を用いるか、コントロール要素を <label> の子要素として配置する事で、ラベルとコントロールを紐付ける事が出来ます。その様に紐付けられたコントロールは、ラベル要素の labeled control（ラベル付きコントロール） と呼ばれます。

属性

この要素は、全てのHTML 要素が持つ グローバル属性と、次の属性をサポートします。

accesskey HTML 4 HTML5

キーボードからこの要素にアクセスする為のショートカットキー

for

ラベル要素と同一の文書内にあるラベル付け可能フォーム関連要素の ID。文書中の for 属性の値と合致する ID を持つ最初の要素が、このラベル要素の示すラベル付きコントロールとなります。

注記: for 属性が包含するコントロール要素を指すのであれば、label 要素で for 属性と包含するコントロール要素の両方を持つことができます。

form HTML5

ラベル要素と紐付けたフォームコントロールが属するフォーム(form owner)。属性値は、同一の文書内にある <form> 要素の ID としなければなりません。この属性が指定されていない場合、この<label> 要素とその指し示すフォームコントロールは <form> 要素の子孫要素として配置しなければなりません。HTML5 で導入されたこの属性により、label 要素をフォーム要素の子孫としてだけではなく、同一文書の何処にでも配置出来るようになりました。

例

シンプルな label の例

<!-- ※ input 要素に for 属性を用いるのでなく、label 要素の子要素として配置する事によりこれらを紐付ける例 -->
<label>Click me <input type="text" id="Name" name="Name" /></label>

"for" 属性の使用例

<!-- ※ label 要素と for 属性付き input 要素を併記する例 -->
<label for="username">Click me</label>
<input type="text" id="username">

仕様

ブラウザ実装状況

[1] Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5) 以降では、クリックイベントのバブリングは 1 つの <label> 要素のみをトリガーし、他の <label> 要素のそれと合成されたクリックイベントをトリガーすることはありません。WebKit や Internet Explorer ではクリックイベントのバブリングは <label> で止まりますが、Gecko ではクリックイベントは <label> 要素の上位のノードにも続けてバブルアップします。Gecko 8.0 以前の動作 (複数の <label> 要素をトリガーする動作) は、Firefox が応答を停止する原因となっていました (バグ 646157)。

関連情報

• 他のフォーム関連要素: <form>、 <button>、 <datalist>、 <legend>、 <select>、 <optgroup>、 <option>、 <textarea>、 <keygen>、 <fieldset>、 <output>、 <progress>、 <meter>