label要素

label要素は、ラベル付け可能フォーム関連要素のラベルを表す要素。

カテゴリー フロー・コンテンツ、フレージング・コンテンツ、インタラクティブ・コンテンツ、フォーム関連要素、パルパブル・コンテンツ。
コンテキスト フレージング・コンテンツを内包できる要素内で使用できる。
コンテンツ・モデル フレージング・コンテンツを内包できる。
ただし、ラベルの対象でないラベル付け可能フォーム関連要素と、label要素を、子孫要素に持つことはできない。
属性 グローバル属性。
form属性、for属性。
ブラウザ対応

構文

<label></label>

要点

  • label要素は、ラベル付け可能フォーム関連要素のラベルを表す要素である。
  • 特に、チェックボックスやラジオボタンを、ラベルと共にlabel要素で括り、ラベルをクリックすることで選択できるようにするときに使うことが多い。
  • label要素と入力用ユーザーインターフェースを、for属性で関連付けることもできる。

ラベル付け可能なフォーム関連要素

属性

任意属性

属性 説明
form属性 ラベルが属するform要素を指定する属性。
for属性 ラベル付け対象のラベル付け可能フォーム関連要素を指定する属性。

サンプルコード

label要素で括る

チェックボックス
<label>チェックボックス： <input type="checkbox" name="sampleName" value="sampleValue"></label>
ラジオボタン
<label>ラジオボタン： <input type="radio" name="sampleName" value="sampleValue"></label>
テキスト入力欄
<label>テキスト入力欄： <input type="text" name="sampleName" value="sampleValue"></label>

for属性で関連付け

for属性で関連付けることもできる。

<label for="sampleId">チェックボックス： </label>
<input type="checkbox" name="sampleName" value="sampleValue" id="sampleId">

サンプル

label要素で括る

HTMLソースコード
<p>
	<label>
		チェックボックス：
		<input type="checkbox" name="sampleCheckbox" value="sampleCheckboxValue">
	</label>
</p>
<p>
	<label>
		ラジオボタンＡ：
		<input type="radio" name="sampleRadio" value="sampleRadioValueA">
	</label>
	<br>
	<label>
		ラジオボタンＢ：
		<input type="radio" name="sampleRadio" value="sampleRadioValueB">
	</label>
</p>
<p>
	<label>
		テキスト入力欄：
		<input type="text" name="sampleText">
	</label>
</p>
<p>
	<label>
		テキストエリア：<br>
		<textarea name="sampleTextarea"></textarea>
	</label>
</p>
実際の表示


for属性で関連付け

HTMLソースコード
<p>
	<label for="sampleCheckbox">チェックボックス： </label>
	<input type="checkbox" name="sampleCheckbox" value="sampleCheckboxValue" id="sampleCheckbox">
</p>
<p>
	<label for="sampleRadioA">ラジオボタンＡ： </label>
	<input type="radio" name="sampleRadio" value="sampleRadioValueA" id="sampleRadioA"><br>
	<label for="sampleRadioB">ラジオボタンＢ： </label>
	<input type="radio" name="sampleRadio" value="sampleRadioValueB" id="sampleRadioB">
</p>
<p>
	<label for="sampleText">テキスト入力欄： </label>
	<input type="text" name="sampleText" id="sampleText">
</p>
<p>
	<label for="sampleTextarea">
		テキストエリア：<br>
		<textarea name="sampleTextarea" id="sampleTextarea"></textarea>
	</label>
</p>
実際の表示