読者です 読者をやめる 読者になる 読者になる

cutmail's blog

write the code

フォームを作成するうえで心がけているたった1つのこと

web html

以前から企業のHPなどのフォームを作っていた際に、
心がけていることがあります。

ユーザビリティとでもいうんでしょうか。

それは、ラジオボタンチェックボックスを複数設置する場合は、
必ずラベルで囲って選択しやすくすること。


試しに以下のチェックボックスラジオボタンを選択してみてほしい。

悪い例

item1 item2 item3

item1 item2 item3

良い例

  

  


どうだろう?

明らかに良い例のほうが選択しやすくないだろうか?
良い例であれば、文字を選択すればいいので、その分選択できる領域が広い。

<label><input type="checkbox" value="item1">item1</label>

ただ、

<label></label>

で囲うだけである。
たしかにプログラムなどでhtmlをアウトプットする場合、ソースが長くなるじゃないかと思われるが

<label></label>

で囲っただけで、格段にユーザビリティがアップする。

詳しい使い方は以下を参照してほしい。
<LABEL>−HTMLタグリファレンス

今でも企業のHPであったり、アンケートサイトであったり、よーく見てると
ものすごいストレスを感じるフォームが結構ある。

もしこの記事を企業の担当者が見ていたのなら、今すぐにでも

<label></label>

で囲っていただきたい。

非常に簡単で基礎的なことであるが、少しだけ気になったので。

追記

IE6だと

<label><input type="checkbox" name="hoge" value="item1" />item1</label>

のように、ラベル要素だけで囲っている場合機能しないそうです。

その場合は、

<input type="checkbox" name="hoge" value="item1" id="foo" /><label id="foo">item1</label>

のようにidで関連付けてやると、IE6でもうまく動作するそうです。