フォームデザイン虎の巻：複数の選択肢を提供する

エ・ビスコム・テック・ラボ
2008-07-25 15:57:01
  • このエントリーをはてなブックマークに追加

チェックボックス

　チェックボックスも、ラジオボタンと同じようにユーザーのクリックによってオン／オフが切り替わるフォームのタイプだ。ただし、ラジオボタンとは異なり、複数のチェックボックスをいくつでもオンにすることができるので、複数回答可能な選択肢を作成するのに適している。

　たとえば、次のサンプルでは購読希望を確認するのにチェックボックスを利用している。

「購読希望」の選択項目 「購読希望」の選択項目 




SAMPLE












購読希望：

新製品ニュース
イベント情報
キャンペーンのお知らせ


ビジネス豆知識メールマガジン
英会話メールマガジン
※ブラウザで表示を確認する

　チェックボックスをクリックするとチェックマークが付き、選択した状態になる。また、選択したチェックボックスをもう一度クリックすると、選択を解除することが可能だ。

複数の選択肢を選択した状態 複数の選択肢を選択した状態

選択した状態で表示する

　選択肢をできるだけ多くチェックしてほしい場合には、チェックボックスを最初から選択した状態で表示するという方法もある。

　たとえば、先ほどの選択肢で多くのニュースやメールマガジンを購読してほしい場合、あらかじめ選択した状態で表示した方が、チェックを付ける手間がない分だけ選択してもらえる可能性が高くなる。

すべてのチェックボックスを選択した状態で表示したもの すべてのチェックボックスを選択した状態で表示したもの

　チェックボックスを選択した状態で表示するには、下の例のようにのchecked属性を利用する。





SAMPLE












購読希望：

新製品ニュース
イベント情報
キャンペーンのお知らせ


ビジネス豆知識メールマガジン
英会話メールマガジン
※ブラウザで表示を確認する

　しかし、この方法は選択肢の数が少ない場合にのみ有効だ。選択肢が多くなると、選択したくないユーザーにとってはチェックを外す手間が大きくなり、逆効果となってしまう。

  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]