P-0038 フォームでは label を使おう

フォーム内で input などを使う場合、 input の前後に簡単な説明(?)を書く事が多いですが、説明テキストは label 要素としてマーク付けしておきましょう

label 要素としてマーク付けしていない場合:
チェック :<input type="checkbox" name="Chk" id="Chk" />
label 要素としてマーク付けした場合:
 <label for="Chk"> チェック </label>:<input type="checkbox" name="Chk" id="Chk" /> 

label 要素の for 属性にどれか一つのフォーム部品の ID を指定する事で、そのフォーム部品と label のテキストを関連づける事ができます。これがどんな役に立つかというと、例えば Mozilla ( Netscape 6 )などの対応ブラウザでは、あの小っこいチェックボックスをクリックしなくても label 部分をクリックすればチェックボックスを On/Off できるという動作をしてくれます。

一つのフォーム部品に対し複数の label を指定する事もできます。

 <p><label for="Chk">Check</label>:<input type="checkbox" name="Chk" id="Chk" />
</p>
<p>上の <label for="Chk">チェック</label> をオンにすると、〜

なお、一つのフォーム部品に一つの label を関連づけるだけなら、説明テキストとフォーム部品をひっくるめて一つの label としてマーク付けすれば OK です(この場合は for 属性を省略できます)。

<label> チェック :<input type="checkbox" name="Chk" id="Chk" /></label>