フォームで活用するラジオボタンとは？HTMLで表示させる方法やチェックボックスとの違いを解説

ラジオボタンとは、入力フォームの1つでさまざまなフォームに設置されています。

フォームにラジオボタンを設置すると、フォームを入力するユーザーは気軽に回答できるようになるため、回答率やフォームの利便性の向上が期待できます。

ただ、ラジオボタンをフォームに設置する方法や具体的なメリット・デメリットを理解していない方も少なくありません。

そこで今回は、フォームで活用するラジオボタンの概要やHTMLで表示させる方法、チェックボックスとの違いを解説します。また、ラジオボタンを使うメリット・デメリットも解説します。

formrun（フォームラン）は、誰でも簡単にアンケートフォームや申し込みフォームなどの作成ができるフォーム作成ツールの1つです。

ラジオボタンを含む基本的なアンケート機能から高度なカスタマイズまで簡単に実装できます。

Googleアカウントまたはメールアドレスがあれば、簡単に無料でフォームが作成できるためぜひ利用してみてください。

フォームで活用するラジオボタンとは？

ラジオボタンとは、複数の選択肢の中から1つのみを選択する際に使用するフォームです。

フォームでは、選択肢の隣に小さな丸い印が表示されており、選択されていない状態では空白、選択されている状態では黒丸に表示されています。

主に、商品の配達方法や支払い方法など複数の選択肢から1つを選択する項目で多く使用されています。

また、複数の選択肢の中から1つのみしか選択できない仕組みになっているため、1つ選択した状態で他の選択肢を選択すると、最初に選択したものは未選択の状態になります。

そのため、回答者に複数の選択肢の中から1つのみを選択してもらいたい場合に有効なフォームです。

フォームのラジオボタンとチェックボックスの違い

ラジオボタンとは、複数の選択肢の中から1つのみしか選択できないフォームです。

選択した状態で他の選択肢を選択した場合は、最初に選択したものが自動で未選択状態になります。

チェックボックスは、複数の選択肢の中から該当するものをすべて選択できるフォームです。

デザインも選択肢の隣に四角形の印が表示されており、選択するとチェックマークが表示される仕組みです。

ラジオボタンと違い複数選択ができるため、「〇〇を知ったきっかけ」「行ったことのある都道府県」など複数回答ができる項目で使われます。

そのため、ラジオボタンとチェックボックスの違いを理解しておき、質問内容や回答者の答えやすさなどを意識して使い分けるようにしましょう。

チェックボックスをフォームに設置したい方や、利用したい方はこちらの記事をご覧ください。
>> フォームにおけるチェックボックスの作り方｜HTMLやフォーム作成ツールを紹介

フォームでラジオボタンを使うメリット

フォームでラジオボタンを使うメリットは、主に以下の通りです。

• 選択肢が限定的だから選びやすくなる
• ワンクリックで選択できる
• 複数該当しない質問で使いやすい

それぞれのメリットを見ていきましょう。

選択肢が限定的だから選びやすくなる

フォームでラジオボタンを使うメリットの1つ目は、「選択肢が限定的だから選びやすくなる」です。

ラジオボタンは、複数の選択肢の中から1つのみを選択する形式のフォームなため、回答者は選択肢を比較・検討し、最適なものを選択できます。

また、 制限がなく自由に記述する形式のフォームよりも、限られた選択肢の中から1つ選択する形式の方が回答者は選びやすくなるため、回答率の向上にもつながります。

ワンクリックで選択できる

ラジオボタンは、ワンクリックで選択できるメリットもあります。

質問に対して複数の選択肢の中から該当する選択肢を1つクリックするだけで回答が完了するため、スムーズな回答が可能です。

さらに、選択した後に他の選択に変更する場合でも、取り消しなどの動作を必要とせず、他の選択肢をクリックするだけで完了します。

そのため、回答者にかかる回答負担が少なく、フォームから離脱してしまうユーザーの対策も可能です。

複数該当しない質問で使いやすい

ラジオボタンは、複数該当しない質問で使いやすいフォームです。

例えば、住んでいる場所・年齢・職業・支払い方法など、複数該当しない質問に対してラジオボタンを使うと気軽に回答できます。

さらに、複数回答ができない仕組みになっているため、誤って複数回答してしまい誤情報を収集してしまうなどの問題も防げます。

自由記述形式のように回答スペースをあまり必要としないため、限られたスペースでコンパクトに質問と回答の選択肢を設置可能です。

フォームでラジオボタンを使うデメリット

ラジオボタンをフォームで使う場合、メリットだけでなくデメリットもあるため、メリットとデメリットをそれぞれ理解する必要があります。

フォームでラジオボタンを使うデメリットは、主に以下の通りです。

• 複数の回答ができる質問には使えない
• 選択肢が多くなると不便になる

それぞれのデメリットを見ていきましょう。

複数の回答ができる質問には使えない

ラジオボタンは、複数の選択肢の中から1つのみを選択するフォームです。

複数の回答ができる質問には適しておらず、場合によっては正しい回答を収集できなくなってしまう場合があるため、注意しましょう。

例えば、「行ったことのある観光地」「自社の〇〇を知ったきっかけ」などの複数回答ができる質問では、ラジオボタンではなくチェックボックスが最適です。

そのため、質問内容に応じてラジオボタンは最適に使い分けるようにしましょう。

選択肢が多くなると不便になる

ラジオボタンは、選択肢が多くなると不便になります。

特に、6つ以上の選択肢がある場合、フォームのスペースを圧迫してしまい1つの画面に収まりきらない可能性もあります。

フォームを入力する回答者の多くはスマートフォンからアクセスしているため、画面から見切れていると見にくいと感じる方が多くいます。

フォームの見やすさや利便性は、フォームの離脱率を低下させて回答率を向上させるために重要な要因の1つです。

そのため、ラジオボタンの選択肢は最小限に抑えて見やすさや便利さを意識しましょう。

選択肢が多い場合は条件分岐項目やマトリクス項目を利用すると回答者の負担を下げられます。

フォームの条件分岐項目やマトリクス項目を知りたい方は以下の記事をご覧ください。

>> フォームの条件分岐機能について

>> アンケートで使えるマトリクス形式の回答

Googleフォームでラジオボタンを使った質問の作り方

Googleフォームでラジオボタンを使った質問は、主に以下の手順で作ります。

1. Googleフォームの編集画面を開き、ファイル名とフォームタイトルを入力する
2. 「質問」をクリックして質問内容を入力する
3. 質問形式の選択肢が表示されるため、そこで「ラジオボタン」を選択する
4. 回答の選択肢を入力するために「オプション1」をクリックして回答を入力する
5. 回答を入力したら「選択肢を追加」をクリックして選択肢をさらに入力する
6. 選択肢が2つ以上の場合は、さらに「選択肢を追加」または「「その他」を追加」をクリックする
7. 質問に必ず回答してほしい場合は、作成した質問の右下にある「必須」をクリックする
8. プレビューを確認して質問が問題なくできていれば作成完了

これからGoogleフォームでラジオボタンを使った質問を作る場合は、以上の手順で進めてみてください。

HTMLでフォームにラジオボタンを表示させる方法

HTMLでフォームにラジオボタンを表示させるためには、<input>タグのtype属性にradioを指定した<input type=”radio”>で表示させます。

HTMLの<input>タグは入力を表しており、入力フォーム作成時に使われるHTMLタグの1つです。

また、複数のラジオボタンの選択肢を1つのグループとしてまとめるために必要な「name属性」と要素をサーバーに伝えるために必要な「value属性」を設定します。

最終的に以下のような状態にすれば、HTMLでフォームにラジオボタンを表示させられます。

<input type=”radio” name=”（ラジオボタンに付ける任意の名前）” value=”（サーバーに送信する値）”>（表示する選択肢）

以上のコードを選択肢の数だけ入力し、<form>で上下を囲ったら完了です。

HTMLでフォームにラジオボタンの値を取得する方法

HTMLでフォームにラジオボタンの値を取得する方法は、主に以下の通りです。

• formタグの中にinputタグとbuttonタグをおき、inputタグのtype属性を”radio”として、name属性、value属性を設定する
• name属性の内容は他のラジオボタン共通のものにして、value属性の内容は選ばれたラベルが類推できるものを設定する
• 汎用ボタン「type = “button”」を配置してonclick属性をつけたら値が取得できる

HTMLでフォームにラジオボタンの値を取得する際は、以上の方法で試してみてください。

JavaScriptでフォームにラジオボタンの選択状態を取得・変更する方法

JavaScriptでフォームにラジオボタンの選択状態を取得する方法は、主に以下の通りです。

1. checkedプロパティを参照する
2. querySelectorAllメソッドで指定したname属性を持つすべてのラジオボタンを取得する
3. for…in文でループ処理を行う
4. ループ処理中は、ラジオボタン1つ1つに対してイベントリスナー「change」を登録していく
5. if文の条件式からcheckedプロパティを参照する
6. 選択状態がtrueの場合は、そのラジオボタンのvalue属性にある値を出力する

ラジオボタンの選択状態を変更する方法は、主に以下の通りです。

1. checkedプロパティに値を代入する
2. 選択状態にする時はtrueを入れ、選択解除する時はfalseを入れる
3. ページが読み込まれた段階でquerySelectorAllメソッドを実行し「name=gender」のラジオボタンをすべて取得する
4. for…in文を使ってHTML要素の数だけループ処理を繰り返す
5. ループ処理の中ですべてのラジオボタンのcheckedプロパティにfalseを代入し、選択解除を行う（反対にtrueを代入し選択状態にもできる）

JavaScriptでフォームにラジオボタンの選択状態を取得・変更したい場合は、以上の手順を試してみてください。

ラジオボタンの設置もできるフォーム作成ツール「formrun」もおすすめ！

formrunは、誰でも簡単にフォーム作成ができる有料のフォーム作成ツールで、主に以下の特徴があります。

• 簡単に導入できる
• カスタマイズ性が高い
• セキュリティ体制が整っている

formrunの特徴を見ていきましょう。

簡単に導入できる

formrunは、Googleアカウントがあれば誰でも無料で簡単に導入できます。

フォーム作成は、専門知識がなくてもテンプレートを選択するだけで高機能なアンケートフォームが作成できます。

さらに、リアルタイムでの集計・分析や住所自動入力、ファイル添付などの機能を利用できるため、初めてでも高機能なフォームにできます。

そのため、フォームにラジオボタンを設置したい場合、formrunを利用すれば簡単に実装が可能です。

▼無料でお試しもできるので、ぜひ一度お試しください。

カスタマイズ性が高い

formrunは、カスタマイズ性が高いため、フォームの詳細な箇所まで自由に作成できます。

フォームのレイアウトやボタンの色の変更やページの分割、ファイルダウンロードや広告タグの設置など、さまざまなカスタマイズを自由にできます。

そのため、回答者が見やすく回答しやすいと感じてもらえるようなフォーム作成も気軽にでき、回答率やフォームの利便性の向上にも最適です。

セキュリティ体制が整っている

formrunは、セキュリティ体制が整っているため、多くの個人情報を扱うフォームを安心して管理できます。

主に、情報セキュリティマネジメントの国際規格「ISO 27001」の認証やプライバシーマークの取得、SSL/TLS化による暗号化を実施しています。

さらに、24時間体制でサーバーを監視しており、リアルタイムでの不正アクセスやシステム障害などの検知が可能です。

これからフォーム作成を行う場合、個人情報を安全に管理してユーザーからの信頼を十分に得るためにも、セキュリティ対策が整っているformrunの利用をおすすめします。

▼formrunのセキュリティの詳細はこちらをご確認ください

ラジオボタンを使って利便性の高いフォームを作成しよう！

フォームで活用するラジオボタンは、複数の選択肢の中から1つのみを選択する排他的な選択項目です。

配達方法や支払い方法などの1つの回答をする際に活用できるフォームで、フォームの利便性向上やフォームのスペース確保になるなどメリットが多くあります。

ただ、選択肢が多すぎる場合や複数回答ができる質問で使用すると、不便になってしまうため、質問内容や回答者の利便性を考慮して活用するようにしましょう。

また、フォームにラジオボタンを設置する場合、フォーム作成ツールやWordPressのプラグイン、プログラミングなどさまざまな方法があります。

ただ、初めてラジオボタンを作成する場合は、formrunなどのフォーム作成ツールでの作成をおすすめします。

formrun（フォームラン）は、誰でも簡単にアンケートフォームや申し込みフォームなどの作成ができるフォーム作成ツールの1つです。

Googleアカウントまたはメールアドレスがあれば、気軽に無料トライアルを利用して、フォーム作成ができるため、登録してみてください。

formlab編集部

formrunやフォーム作成や顧客管理に関する情報を発信しております。

EFO（エントリーフォーム最適化）や問い合わせ対応など、
フォームに関するお悩みを解決します。