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 できるという動作をしてくれます。

 <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> 

PageTop

B:Back