<label>フィールドにラベルをつける

<label>タグでは、フォーム内の各部品と文字(項目名)や画像を関連づける事ができます。 例えばMacやwindowsのダイアログでは、チェックボックス、またはラジオボタンに関連付けられたテキストをクリックしても、ボタンをクリックした場合と同じように機能します。 このような事を<label>タグを使用する事で、webページ上で再現できます。

フォーム内の部品(input、button要素など)にラベル付けするには、label要素のfor属性で対象のフォーム部品のid属性の値を指定するか、または対象のフォーム部品を<label>~</label>内に配置する必要があります。 例えば離れたフォーム部品とlabel要素を関連付けたい場合であれば、for属性を使用します。

通常であれば<label>~</label>内にフォーム部品と関連付けたい文字や画像を入れますが、フォーム部品にid属性を指定し、label要素にfor属性を指定し、その値にフォーム部品のid属性値を指定する事で、label要素の外にあるフォーム部品と関連付ける事ができます。

また離れたform要素とlabel要素を関連付けたい場合は、form属性を使用します。 <label>にform属性を指定し、<form>のid属性の値と一致させる事で、異なるセクション内など、直接の親要素以外の離れた場所にあるform要素と関連付ける事ができます。 なお一般的には、label要素の部分をクリックすると、ラベル付けしたフォーム部品をクリックしたのと同じような動作が起こります。

HTML5での変更点

HTML5のlabel要素では、form属性が追加されました。(HTML5.1では、廃止されています)

書式

  • <label 属性="値">~</label> ……… フォーム内部品と項目名を関連付ける

属性

form="" フォームとの関連付けをする。form要素に指定したid名を指定
for="" ラベル付けするフォーム部品のID名を指定する事で、各要素を関連付ける。

使用した時の例

<form action="sample.cgi" method="post" id="mail">
 <fieldset>
 <legend>お客様情報</legend>
   <p><label>名前:<input type="text" name="name" size="40"></label></p>
   <p><label>住所:<input type="text" name="call" size="40"></label></p>
 </fieldset>
 
 <fieldset>
 <legend>性別</legend>
   <p><label for="man">男性</label></p>
   <p><input type="radio" name="sex" id="man" value="male"></p>
   <p><label for="woman">女性</label></p>
   <p><input type="radio" name="sex" id="woman" value="female"></p>
 </fieldset>
   <p><input type="submit" value="送信"></p>
</form>

   <p><label form="mail">メールアドレス<br /><input type="text" name="name" size="40"></label></p>

ブラウザ上の表示例

お客様情報

性別

対応ブラウザなどのデータ

形式 <label>~</label> カテゴリ フローコンテンツ,フレージングコンテンツ,インタラクティブコンテンツ,フォーム関連要素, パルパブルコンテンツ
親要素 フレージングコンテンツが期待される場所 子要素 フレージングコンテンツ
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~