| カテゴリー |
フロー・コンテンツ フレージング・コンテンツ インタラクティブ・コンテンツ |
|---|---|
| コンテンツ･モデル | label 要素を除くフレージング・コンテンツ。ただし、該当の label 要素が表すキャプションと関連がない button 要素、input 要素、keygen 要素、meter 要素、output 要素、progress 要素、select 要素、textarea 要素を入れてはいけません。 |
| 利用可能な場所 | フレージング・コンテンツが期待される場所 |
| 開始タグ | 必須 |
| 終了タグ | 必須 |
| 要素固有のコンテンツ属性 |
form （この要素を関連付けるフォームの form 要素の id 属性をセットします） for （この要素が表すキャプションを結び付けるフォーム・コントロールの id コンテンツ属性の値を指定します） |
| 標準的なスタイル | |
label 要素は、フォーム・コントロールのキャプションを表します。label 要素を使って関連付けることができる要素は、button 要素、input 要素、keygen 要素、meter 要素、output 要素、progress 要素、select 要素、textarea 要素です。
label 要素のマークアップ例
<p>
<label><input type="radio" name="gender" value="1" /> 男性</label>
<label><input type="radio" name="gender" value="2" /> 女性</label>
</p>
label 要素のマークアップ例のサンプル
このように、label 要素の中に、フォーム・コントロールを表す input 要素とそのキャプションを表すテキストを入れることで、それらが関連付けられることをセマンティクスとして表すことができます。
ただし、label 要素の中に入れたキャプションとは関係がないフォーム・コントロールを、その label 要素の中に入れてはいけません。基本的には、label 要素の中にフォーム・コントロールを入れる場合は、ラベル付け可能なフォーム関連要素を 1つ、そして、それに関連付くキャプションを入れなければいけません。
label 要素はセマンティクス上の役割だけではなく、実際のフォーム・コントロールのユーザビリティにも影響します。もし label 要素を使わなければ、マウスでチェックを入れるためには、そのラジオボタンの上にマウス・ポインターを移動してからクリックしなければいけません。しかし、label 要素でキャプションが関連付けられていれば、そのキャプション上でクリックしても、ラジオボタンにチェックを入れることができます。
ただし、この挙動について、HTML5 仕様では、ブラウザはプラットフォーム（ OS やデバイス）の慣例に従うべきとしています。そのため、プラットフォーム環境が変われば、その挙動は違ってくるかもしれません。
for コンテンツ属性は、フォーム・コントロールを表す要素の id 属性を指定して、label 要素を、そのフォーム・コントロールと関連付けるために使います。これは、label 要素の中にフォーム・コントロールを表す input 要素などを入れない場合に使います。
例えば、前述のマークアップは、for コンテンツ属性を使って、次のようにマークアップすることもできます。
for コンテンツ属性のマークアップ例
<p>
<input type="radio" name="gender" value="1" id="gender1" /> <label for="gender1">男性</label>
<input type="radio" name="gender" value="2" id="gender2" /> <label for="gender2">女性</label>
</p>
for コンテンツ属性のマークアップ例のサンプル
form コンテンツ属性は、label 要素を、指定の form 要素と結び付けるために使います。このコンテンツ属性には、結び付けたい from 要素の id 属性の値を指定します。
このコンテンツ属性は、HTML5 で新たに導入されました。本来、フォーム・コントロールは、form 要素の中に入れて使うものでしたが、このコンテンツ属性が規定されたことにより、その制約がなくなりました。
とはいえ、label 要素に指定する form コンテンツ属性は、あくまでも、その label 要素が表すキャプションを関連付けるだけですので、特にフォームの挙動に影響があるわけではありません。label 要素に form コンテンツ属性を指定したとしても、その中に入れたフォーム・コントロールが指定の form 要素に関連付けられるわけではありません。次の例を見てください。
form コンテンツ属性のマークアップ例
<p>
<label form="frm">
ニックネーム：
<input type="text" name="nickname" />
</label>
</p>
<form method="get" action="#" id="frm">
<input type="submit" value="送信" />
</form>
form コンテンツ属性のマークアップ例のサンプル
この例では、label 要素が form 要素の外にマークアップされています。そして、label 要素に form コンテンツ属性がセットされています。この form コンテンツ属性には、form 要素の id 属性の値がセットされています。これによって、label 要素が表すキャプションは、form 要素に関連付けられます。
しかし、同じ label 要素の中にある input 要素は対象外となります。つまり、この input 要素は、関連付けられている form 要素が存在しない事になります。もし、input 要素を form 要素に関連付けたいなら、input 要素に form コンテンツ属性を指定しなければいけませんので、注意してください。