ラジオボタンの使い方は？

Webフォームを作成する際、ユーザーに複数の選択肢から一つだけを選んでほしい場合があります。そんな時に役立つのが「ラジオボタン」です。この記事では、ラジオボタンの基本的な使い方から、HTMLでの記述方法、そして具体的な使用例までご紹介します。

ラジオボタンとは？

ラジオボタンは、排他的な項目を並べて、ユーザーにその中から一つだけを選んでほしいときに使用されるフォーム部品です。ラジオボタンの特徴は、項目の先頭に丸印が表示され、マウスでクリックするなどして選択することです。選択状態にできるのは1つの項目のみで、項目を選択し直すと、他の項目は未選択状態に変わります。名前の由来は、昔のラジオの選局ボタンに似ていることからきています。

HTMLでの記述方法

ラジオボタンは、HTMLでは<input type="radio">タグを使って記述します。それぞれの選択肢には、同じ「name」属性の値を設定します。これにより、複数のラジオボタンがグループ化され、ユーザーは一つのグループ内から一つだけを選択できるようになります。


<input type="radio" id="choice1" name="answer" value="選択肢1">
<label for="choice1">選択肢1</label>

<input type="radio" id="choice2" name="answer" value="選択肢2">
<label for="choice2">選択肢2</label>

<input type="radio" id="choice3" name="answer" value="選択肢3">
<label for="choice3">選択肢3</label>

上記のコードでは、3つのラジオボタンが定義されています。それぞれのラジオボタンには、異なる「id」属性と「value」属性が設定されていますが、「name」属性は全て「answer」で統一されています。これにより、ユーザーは3つの選択肢から一つだけを選べるようになっています。

ラジオボタンの使用例

ラジオボタンは、アンケートや登録フォームなど、様々な場面で使用されます。例えば、以下のような例が考えられます。

使用例	説明
性別を選択	男性、女性などの選択肢をラジオボタンで表示し、ユーザーに一つだけ選択してもらいます。
年齢層を選択	10代、20代、30代などの選択肢をラジオボタンで表示し、ユーザーに該当する年齢層を選択してもらいます。
商品の配送方法を選択	宅配便、メール便、店頭受け取りなどの選択肢をラジオボタンで表示し、ユーザーに希望する配送方法を選択してもらいます。

ラジオボタンに関する参考資料

<a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/radio" target="_blank">MDN Web Docs: <input type="radio"></a>

よくある質問

Q1. ラジオボタンの初期値を設定するには？

A1. <input>タグに checked 属性を追加します。例：<input type="radio" id="choice1" name="answer" value="選択肢1" checked>

Q2. ラジオボタンを必須入力にするには？

A2. <input>タグに required 属性を追加します。例：<input type="radio" id="choice1" name="answer" value="選択肢1" required>

Q3. 選択されたラジオボタンの値を取得するには？

A3. JavaScriptを用いて、選択されたラジオボタンのvalue属性を取得します。具体的な方法は、JavaScriptの書籍やWebサイトなどを参照してください。

その他の参考記事:jquery radio checked 取得