ラベル

属性:インライン要素

書式: 
<label>
   ラベル
   <input type="text" name="firstname">
</label>

コントロールには、押しボタンのように自動的にラベル付けられるものもありますが、 テキストボックスやチェックボックス、ラジオボタン、メニューなど 殆どのコントロールは自動的にラベル付けはされません。
自動的にラベル付けされないコントロールにラベルを指定する場合、 label要素でラベル文字列と関連付けたいコントロールを囲みます。
自動的にラベル付けされるコントロールについては、value属性値がラベル文字列として表示されます。
この書式はIEでは対応されていません。IEでlabelとして機能させるためにはfor属性を使用する必要があります。

label要素の特別な属性

ラベルを明示したいときに指定します。ラベル要素の特別な属性としてforがあります。

for

for属性はfor以降に書かれているidで指定されている他のコントロールに対しラベルを明示的に結び付けます。 この属性を設定する場合、属性値はlabel属性が指定されている文書中の他のコントロールの何れかの id属性値と同じでなければなりません。 for属性の設定がない場合、このラベルはlabel要素の内容に結び付けられます。
label要素は、コントロールに追加情報を与えるために利用できます。どのlabel要素も、 他のただ1つのコントロールと結びつきます。
このfor属性を用いることで、ある特定のコントロールに対し複数のlabel要素を結びつけることができます。

例：
<label for="firstname">名: </label>
  <input type="text" id="firstname">
<br>
<label for="lastname">姓: </label>
  <input type="text" id="lastname">
<br>

ラベルを他のコントロールと暗示的に結びつけるには、結びつくコントロールをlabel要素の子とする必要があります。 この場合、label要素は1つのコントロールしか子にできません。 ラベルで明示的に関連付けようとしている内容は、結びつくコントロールの前後どちらにあっても構いません。
次の例では、2つのテキスト入力コントロールに対し、2つのラベルが暗示的に結びつけられています。

例：
<label>
   名
   <input type="text" name="firstname">
</label>
<label>
   <input type="text" name="lastname">
   姓
</label>

暗示的ラベルづけのテクニックは、レイアウト目的で表を使いラベルとコントロールとを 別々のセルに配置した場合には使えないということに注意してください。
label要素がフォーカスを受けた場合、結びついているコントロールにもフォーカスされます。