ラジオボタンの使い方は？
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 取得