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

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

 前回の「フォームデザイン虎の巻:フォームの基礎をおさえる」では、ユーザーに文字を入力してもらう「テキストボックス」「パスワードボックス」「テキストエリア」というフォームのタイプを紹介した。

 今回は、複数の選択肢から選択する「ラジオボタン」「チェックボックス」「セレクトボックス」を紹介する。また、送信ボタンの作成などに利用する「ボタン」も紹介したい。

ラジオボタン

 ラジオボタンは、ユーザーのクリックによってオン/オフが切り替わるフォームのタイプだ。複数のラジオボタンを用意すると、そのうちの1つだけしかオンにできないという特徴を持っている。そのため、複数の選択肢から1つだけを選択してほしい場合に利用する。

 たとえば、「性別」の項目は「男」か「女」のどちらか1つだけを選択してほしいので、ラジオボタンを用意する。

「性別」の選択項目 「性別」の選択項目




SAMPLE





性別:
ブラウザで表示を確認する

 ラジオボタンを選択した状態にすると次のように表示される。「男」を選択した状態で「女」のラジオボタンをクリックすると、「男」の選択は自動的に解除され、「女」だけを選択した状態になる。

「男」を選択した状態 「男」を選択した状態
「女」を選択すると「男」の選択は自動的に解除される 「女」を選択すると「男」の選択は自動的に解除される

選択した状態で表示する

 ラジオボタンは最初から選択した状態で表示することもできる。選択肢のうちどれか1つを必ず選択しなければならないときに有効だ。

 たとえば、検索対象を選択できるようにした検索フォームでは、検索対象が未選択では正しく検索できなくなってしまう。このような場合、標準的な検索対象を最初から選択した状態で表示すれば、ユーザーが選択するのを忘れても問題が発生するのを防ぐことができる。

「カテゴリー内を検索」を選択した状態で表示したもの 「カテゴリー内を検索」を選択した状態で表示したもの

 ラジオボタンを選択した状態で表示するには、下のソースコード例のようにのchecked属性を利用する。





SAMPLE






カテゴリー内を検索 サイト全体を検索

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