<label></label>

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容 フレージング・コンテンツ（ただし、この要素の対象でないラベル付け可能な要素、およびlabel要素は含められない） 本文参照

label要素は、フォーム部品のラベル（キャプション）を表します。この要素を使用することで、フォーム部品とラベルを関連付けることができます。


<label>お名前：<input type="text" name="name1"></label>

<label for="name2">お名前：</label>
<input type="text" name="name2" id="name2">
属性 値
任意属性
for="" 関連付ける部品の指定 ID名 関連付ける部品に指定したID名
廃止属性（HTML Living Standardでは未定義）
form="" ［×］フォームとの関連付け ID名 関連付けるform要素に指定したID名
  • この要素のform属性は、HTML5.1で廃止されました。

label要素で関連付けを行うと、ラベル部分のクリックでその部品を選択できるようになります。

この設定は、特にラジオボタンやチェックボックスの選択時に役立ちます。

関連付けを行っていないラジオボタンの場合
丸い部分をクリックしないと選択できません。

選択肢1 選択肢2 選択肢3

関連付けを行ったラジオボタンの場合
ラベル部分のクリックで選択できます。

入力欄の場合は、ラベル部分のクリックでその入力欄にフォーカスが移ります。

関連付けのやり方

部品とラベルの関連付けは、次の2つの方法で設定することができます。

label要素の中に、フォーム部品とラベルを配置する（部品は1つのみ配置が可能）

部品とラベルが隣接している場合は、このやり方が簡単です。

<p><label><input type="radio" name="example" value="選択肢">選択肢</label></p>
for属性を使用する

フォーム部品にid属性を指定して、label要素のfor属性にそのID名を記述します。

<dl>
<dt><label for="example">お名前：</label></dt>
<dd><input type="text" name="example" id="example"></dd>
</dl>

ラベル付け可能な要素

以下の要素をラベル付けの対象にすることができます。

要素の内容に関して

label要素の内容には、そのラベルの対象でないラベル付け可能な要素を含めてはなりません。

次の例では、お名前の対象は id="example1" が指定されたinput要素になりますが、

<label for="example1">お名前</label>
<input type="text" name="example1" id="example1">

このような場合に、このlabel要素の中には別のラベル付け可能な要素を含めてはならない、ということになります。したがって、次の例は誤りとなります。

<label for="example1">お名前 <input type="text" name="example2"></label>
<input type="text" name="example1" id="example1">
旧HTMLからの変更点
  • HTML5：form属性が追加されました。
  • HTML5.1：form属性が廃止されました。

使用例


<form method="post" action="example.cgi">

<dl>

<dt><label for="name">お名前</label></dt>
<dd><input type="text" name="name" id="name" size="20"></dd>

<dt>質問の答え</dt>
<dd>
<label><input type="radio" name="answer" value="はい">はい</label>
<label><input type="radio" name="answer" value="いいえ">いいえ</label>
</dd>

</dl>

<p><input type="submit" value="送信する"></p>

</form>
表示例
質問の答え

  • サンプルのため送信できません。