HTML

HyperText Markup Language label element.

label 要素

　label要素は、フォーム・コントロールのキャプションを表します。label要素を使って関連付けることができる要素は、button要素、input要素、meter要素、output要素、progress要素、select要素、textarea要素です。

<p>
	<label><input type="radio" name="gender" value="1"> 男性</label>
	<label><input type="radio" name="gender" value="2"> 女性</label>
</p>

　このように、label要素の中に、フォーム・コントロールを表す input要素とそのキャプションを表すテキストを入れることで、それらが関連付けられることをセマンティクスとして表すことができます。

　ただし、label要素の中に入れたキャプションとは関係がないフォーム・コントロールを、その label要素の中に入れてはいけません。基本的には、label要素の中にフォーム・コントロールを入れる場合は、ラベル付け可能なフォーム関連要素を１つ、そして、それに関連付くキャプションを入れなければいけません。

　label要素はセマンティクス上の役割だけではなく、実際のフォーム・コントロールのユーザビリティにも影響します。もし label要素を使わなければ、マウスでチェックを入れるためには、そのラジオボタンの上にマウス・ポインターを移動してからクリックしなければいけません。しかし、label要素でキャプションが関連付けられていれば、そのキャプション上でクリックしても、ラジオボタンにチェックを入れることができます。

　ただし、この挙動について、HTML5仕様では、ブラウザはプラットフォーム（OSやデバイス）の慣例に従うべきとしています。そのため、プラットフォーム環境が変われば、その挙動は違ってくるかもしれません。

カテゴリー

フロー・コンテンツ

フレージング・コンテンツ

インタラクティブ・コンテンツ

コンテンツ･モデル

label要素を除くフレージング・コンテンツ。ただし、該当の label要素が表すキャプションと関連がない button要素、input要素、meter要素、output要素、progress要素、select要素、textarea要素を入れてはいけません。

利用可能な場所

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

開始タグ

必須

終了タグ

必須

要素固有の属性

for

この要素が表すキャプションを結び付けるフォーム・コントロールの id属性の値を指定します。

標準的なスタイル

-

for 属性

　for属性は、フォーム・コントロールを表す要素の id属性を指定して、label要素を、そのフォーム・コントロールと関連付けるために使います。これは、label要素の中にフォーム・コントロールを表す input要素などを入れない場合に使います。

　例えば、前述のマークアップは、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>