フォームの中の2種類のlabel要素の指定方法

label要素とは

label要素はフォームの入力部品とラベルを関連付ける要素です。 この要素で部品とラベルの関連付けを行なうと、ブラウザ上でラベルをクリックした場合に、その部品をクリックしたのと同じ動作をさせることができるようになります。 関連付ける方法は以下の2つの方式があります。

2通りのラベルの指定方法

1. <label>～</label> でラベルと部品を囲む方法です。

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

2. <label> の for 属性に部品の ID を指定する方法があります。id名とfor名は同一にします。

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

1番目の方法はIE６以前のものなど対応していないブラウザがあるとされています。２番目のfor属性で指定する値は、関連付けする部品のid属性と同じ値にしなければなりません。一般的にこちらの方法を取る場合が多いようです。