フォームを作成するうえで心がけているたった1つのこと
以前から企業の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でもうまく動作するそうです。
