<label>タグの半分は優しさです

Webシステムを作る時に、ちょっとした優しさで付けて欲しいのが <label>タグです。

最近は画面も大きくなってきて、 小さなラジオボタンやチェックボタンを クリックするのは、結構大変だったりしませんか。

このタグは、フォームの部品とセットにして使うのですが、 タグで囲んだ文字列を、指定した部品のラベルとして扱います。 下のサンプルのように、ラベルの文字列がクリックされた時に、 その部品へのクリックが発生します。

使い方は下のようにフォーム部品のidに関連付けます。

<input type="radio" name="radio1" id="r1">
<label for="r1">radio1</label>

多くのブラウザがサポートしてますし、 サポートされてないブラウザでは何も無いのと同じです。 デメリットも特にない(と思う)ので是非使ってみてください。

ちなみにテキストボックスの場合はフォーカスがセットされます。 onclickイベントがある場合も、ちゃんと動くようです。

Google サイト内検索

Amazonアソシエイト