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

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

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

ラジオボタン

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

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

「性別」の選択項目

性別：
男
女

※ブラウザで表示を確認する

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

「男」を選択した状態

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

選択した状態で表示する

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

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

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

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

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

※ブラウザで表示を確認する