<label></label>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / フォーム関連要素（再関連付け可能 HTML5のみ） / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容 フレージング・コンテンツ（ただし、そのラベルの対象でないラベル付け可能なフォーム関連要素は含められない / label要素は含められない） 本文参照

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


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

<label for="name2">お名前：</label>
<input type="text" name="name2" id="name2">
属性 値
任意属性
for="" 関連付ける部品の指定 ID名 関連付ける部品に指定したID名
form="" ［＋］フォームとの関連付け（HTML 5.1では廃止） ID名 関連付けるform要素に指定したID名
グローバル属性
id="" 要素のID名 文字列 固有の識別名

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>

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

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

form属性について

  • HTML 5.1では、label要素にform属性を指定できなくなりました。

form属性は、そのlabel要素をどのform要素に関連付けるかを指定します。この属性の値には、対応するform要素に指定したID名を記述します。

  • この属性は、フォーム部品をform要素の外に配置する場合に使用します。（form要素の中に配置する場合は不要です）
  • for属性はラベルと部品を、form属性はlabel要素とform要素を関連付けることになります。
<p><label form="example">お名前：<input type="text" name="example" form="example"></label></p>

<form method="post" action="example.cgi" id="example">
<p><input type="submit" value="送信する"></p>
</form>
  • ただし、この機能に対応していないブラウザもあります。
  • form属性の使用例は、form要素のページでご覧になれます。

要素の内容に関して

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">
HTML5における変更点
  • form属性が追加されました。
HTML 5.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>

<dt>ランキング</dt>
<dd><label><input type="checkbox" name="rank" value="1">参加する</label></dd>

</dl>

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

</form>
表示例
質問の答え
ランキング

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