入力フォームで使えるラジオボタンやチェックボックス等の違い

HTMLで作れる入力フォームの中で、閲覧者に何かを選択して欲しい場合に使えるUI(ユーザ・インターフェイス)としては主に、チェックボックス・ラジオボタン・プルダウンメニューの3種類があります。用途に応じて適切なUIを選べばよいのですが、どれを使うのが望ましいのか迷うこともあるでしょう。
 
選択肢から何かを選択してほしい際に使えるフォーム3種類

選択肢から何かを選択してほしい際に使えるフォーム3種類


1つだけを選んで欲しい場合に使いやすい入力フォームは?
複数の選択肢から1つだけを選ばせたい場合は、ラジオボタンとプルダウンメニューのどちらでも作れます。また、チェックボックスは複数の選択肢の中から個数制限なしに複数個を選択できるフォームですが、YES/NOやON/OFFなどの二者択一な状況でなら、1つだけを選ばせる用途にも使えます。例えば下図のようにです。
 
二者択一のフォームとしてラジオボタン・チェックボックス・プルダウンメニューを使った例

二者択一のフォームとしてラジオボタン・チェックボックス・プルダウンメニューを使った例


それぞれの選択フォームにメリットとデメリットがある
このように、HTMLで用意できる選択フォームには同じ用途を実現する方法が複数あり、どれを使えばよいのか迷うことがあります。そこで本記事では、複数の選択肢から1つを選ばせたい場合にどのUIを選択するのが望ましいのかを、HTMLの記述方法と合わせてご紹介いたします。

まずは、ラジオボタン・チェックボックス・プルダウンメニューそれぞれのメリットとデメリットをざっとご紹介いたします。どのような状況でどれを使うのが望ましいのかを比較してみて下さい。
   

ラジオボタンで選択させるメリットとデメリットを比較

複数の選択肢から必ず1つだけを選択状態にできるラジオボタンの用途には、以下のような向き・不向きがあります。
 
ラジオボタンが向いている用途・向いていない用途

ラジオボタンが向いている用途・向いていない用途


ラジオボタンのメリットは、すべての選択肢が同時に見えている点です。どんな選択肢があるのかがすぐに把握できるため、選びやすいでしょう。ラジオボタンのデメリットは、項目の個数に比例して掲載スペースが多く必要になる点です。項目数がとても多い場合には、目的の項目を探すのが大変になってしまうでしょう。

ラジオボタンの詳しい特徴や作り方については、本記事の2ページ目「ラジオボタンとは?」で解説いたします。

 

プルダウンメニューで選択させるメリットとデメリットを比較

プルダウンメニュー(プルダウン型のセレクトボックス)の用途には、以下のような向き・不向きがあります。
 
プルダウンメニューが向いている用途・向いていない用途

プルダウンメニューが向いている用途・向いていない用途


プルダウンメニューのメリットは、選択肢がいくつあっても1項目分の空間しか占有しない点です。選択肢が多い場合にはスペースの節約になるでしょう。プルダウンメニューのデメリットは、選択肢が少ない場合でもクリックするまではすべての選択肢を見渡せないことです。また、スクロールバーを使って項目を探す操作が若干面倒でもあります。

プルダウンメニューは最初から先頭項目が選択状態になっているので、選択漏れが起きない点はメリットとも言えます。しかし、ユーザの意図しない選択肢(先頭項目)が選択されたままの状態で送信されてしまうことにも繋がる点はデメリットとも言えます。

プルダウンメニューの詳しい特徴や作り方については、本記事の3ページ目「プルダウンメニューとは?」で解説いたします。

 

チェックボックスで選択させるメリットとデメリットを比較

チェックボックスは、そもそも複数個を同時に選択できる仕様のフォームですから、ラジオボタンやプルダウンメニューと同列で比較するのはあまり適していません。ここでは、複数の選択肢から1つだけを選択して欲しい状況に限定して比較します。その場合、チェックボックスには以下のような向き・不向きがあります。
 
チェックボックスが向いている用途・向いていない用途

1つだけを選択して欲しい場合で、チェックボックスが向いている用途・向いていない用途


チェックボックスのメリットは、1項目分のスペースで2つの選択肢(ON/OFFやYES/NO)を示せる点です。チェックを入れるとON(YES)を示し、外すとOFF(NO)を示す点は、直感的にも分かりやすいでしょう。

ただし、チェックボックスは「3つ以上の選択肢から1つだけを選ばせる用途」に使ってしまうと分かりにくくなる点に注意が必要です。その用途には、チェックボックスではなくラジオボタンやプルダウンメニューが適しています。何らかの事情があってどうしてもチェックボックスで作る必要がある場合は、リアルタイムに警告するような入力チェック機能を併用する必要があるでしょう。

チェックボックスの詳しい特徴や作り方については、本記事の4ページ目「チェックボックスとは?」で解説いたします。

 

選択フォームよりも入力フォームの方が楽な場合もある点に注意

選択肢の内容によっては、あらかじめ用意された選択肢の中から選ぶフォームよりも、直接キー入力できるフォームの方が楽に操作できる場合もあります。例えば下図のように年月日を入力する場合、たくさんの西暦候補から1つをマウス操作で選ぶよりも、数字をキー入力した方が早く済むことが多いでしょう。
 
選択肢から選ぶフォームよりも、直接キー入力できるフォームの方が楽な場合もある

選択肢から選ぶフォームよりも、直接キー入力できるフォームの方が楽な場合もある


このような入力フォームを用意するなら、ラジオボタンやプルダウンメニューなどではなくテキスト入力欄を設けておく方が利用者にとっては便利です。ただし、何でも入力可能なフォームには意図しない文字が入力されてしまう可能性があるため、入力チェック機能の併用が必要です。この点については、本記事の最後のページ「選択よりキー入力の方がユーザにとって楽な場合もある例」でご紹介いたします。

 

それぞれの選択フォームの作り方や特徴など

それでは次のページから、ラジオボタン・チェックボックス・プルダウンメニューそれぞれのメリット・デメリットと作り方を詳しくご紹介いたします。作りたい状況に最も適したフォームを選択してみて下さい。