label要素とは
<
要素は、<label>
要素を使うことで、コントロール部品とそのラベルを関連付けすることが出来ます。これにより、視覚的にWEBサイトを閲覧することが困難なユーザーに対して、どのコントール部品のラベルかを伝えるサポートができます。また、
ラベルをクリックすることで、関連するコントール部品を選択状態になるようになります。
- 意味・役割
- フォームのコントロール部品と関連するラベルを表す
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
- コンテンツ・カテゴリ
-
- フロー・コンテンツ
- フレージング・コンテンツ
- インタラクティブ・コンテンツ
- フォーム関連要素
- パルパブル・コンテンツ
- コンテンツ・モデル(梱包できる要素)
-
フレージング・コンテンツ
ただし、<label>
要素内に、別の<label>
要素は配置できない。また、そのラベルが示すコントロール部品(<input>
、<textarea>
、<select>
、<button>
、<keygen>
、<output>
、<meter>
、<progress>
)以外の要素も配置できない。
(HTML5より前:<label>
要素以外のインライン要素) - この要素を配置できる親要素
- フレージング・コンテンツが配置できる要素
サンプルコード
<label>
要素は、ラベルとなるテキストと、コントロール部品のどちらもを囲む方法と、
<label>
要素に、for
属性で、コントロール部品のid
名を指定して関連付ける方法の2つの方法でマークアップできます。どちらの方法でマークアップしても正しく関連付けができており、ラベルをクリックしたら、関連するコントロール部品が選択状態になります。ただし、Internet Explorer 6 はfor
属性を使った方法にしか対応していません。
label
要素にラベルと、コントロール部品のどちらもを囲んだサンプル
<label>
要素にラベルとなるテキストと、コントロール部品のどちらもを囲む方法のマークアップ例です。
<form action="" method="post">
<p>
<label>好きなこと:<input type="text" name="like"></label>
</p>
<p><input type="submit" value="送信"></p>
</form>
RERUN
label
要素にfor
属性を使ってコントロール部品と関連付けるサンプル
<label>
要素にfor
属性を使ってコントロール部品と関連付けるマークアップ例です。for
属性には、関連付けるコントロール部品のid
名を指定します。従って予めコントロール部品には、id
属性を指定しておきましょう。
<form action="" method="post">
<p>
<label for="like">好きなこと:</label>
<input type="text" id="like" name="like">
</p>
<p><input type="submit" value="送信"></p>
</form>
RERUN
label要素で使える属性
どの要素にでも使えるグローバル属性と以下の属性が使えます。
for属性
属性は、ラベルと関連するコントロール部品のid
名を指定する属性です。この属性で指定したid
名を持つコントロール部品と関連付けされます。
<label for="関連するコントロール部品のid名">
- 属性値
-
関連するコントロール部品の
id
名 - 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
<p>
<label for="your_email">メールアドレス:</label>
<input type="email" id="your_email" name="your_email">
</p>
RERUN
form属性 HTML5で追加
属性は、
<label>
要素を、<form>
要素の中に配置したかった場合に、関連する<form>
要素を指定する属性です。
<label>
要素を、<form>
要素の中に配置したかった場合は必ず必要な属性で、属性値には<form>
要素に指定した、id
属性の値を指定します。
<label form="関連するform要素のid名">
<form id="contact_form">
<p><input type="submit" value="送信"></p>
</form>
<p><label>お名前:<input form="contact_form" type="text" name="your_name"></label></p>
RERUN
label要素のサンプル
<form action="" method="post">
<dl>
<dt><label for="your_name">お名前</label></dt>
<dd>
<input type="text" id="your_name" name="your_name">
</dd>
<dt><label for="your_email">メールアドレス</label></dt>
<dd>
<input type="email" id="your_email" name="your_email">
</dd>
<dt>性別</dt>
<dd>
<ul>
<li>
<label><input type="radio" name="gender" value="男性"> 男性</label>
</li>
<li>
<label><input type="radio" name="gender" value="女性"> 女性</label>
</li>
</ul>
</dd>
<dt><label for="inquiry">お問い合わせ内容</label></dt>
<dd>
<textarea id="inquiry" name="inquiry" cols="30" rows="10"></textarea>
</dd>
</dl>
<p><input type="submit" value="送信"></p>
</form>
RERUN
仕様
- HTML5.1
- 4.10.4. The label element
- HTML5
- 4.10.4 The label element
- HTML4.01
- 17.9.1 The LABEL element
関連する要素
<form>
要素<input>
要素<textarea>
要素<select>
要素<option>
要素<optgroup>
要素<button>
要素<fieldset>
要素<legend>
要素