ラジオボタンのvalueとは？
Webフォームにおいて、ユーザーに選択肢の中から一つだけを選ばせたい場合に、ラジオボタンは頻繁に使用されます。このラジオボタンには、ユーザーに見える表示テキストと、裏側で処理に使われる「value」属性が存在します。今回は、この「value」属性に焦点を当て、その役割や使い方、注意点などを詳しく解説していきます。
value属性の役割
ラジオボタンの「value」属性は、そのラジオボタンが選択された際に送信される具体的な「値」を指定する役割を持ちます。ユーザーには表示されませんが、サーバー側でデータを受け取って処理する際に重要な役割を果たします。
例えば、アンケートで「性別」を質問する場合を考えてみましょう。表示テキストは「男性」「女性」「その他」としますが、サーバー側でデータを処理する際には、それぞれを「male」「female」「other」のように区別しやすい値で扱いたい場合があります。このような場合に、「value」属性が役立ちます。
| 表示テキスト | value属性 |
|---|---|
| 男性 | male |
| 女性 | female |
| その他 | other |
HTMLでの記述方法
HTMLでラジオボタンを実装する際には、<input type="radio">タグを使用します。「value」属性は、このタグ内に記述します。
<input type="radio" name="gender" value="male">男性
<input type="radio" name="gender" value="female">女性
<input type="radio" name="gender" value="other">その他
上記の例では、「name」属性も使用しています。同じグループのラジオボタンには、必ず同じ「name」属性を設定する必要があります。これにより、ユーザーが複数のラジオボタンから一つだけを選択できるようになります。
注意点
- 「value」属性を設定しない場合、デフォルト値として "on" が送信されます。サーバー側で処理する際に意図しない動作を引き起こす可能性があるため、必ず適切な値を設定しましょう。
- 「value」属性には、半角英数字と一部の記号(-_.など)を使用できます。日本語などのマルチバイト文字を使用すると、正しく処理されない場合がありますので注意が必要です。
参考資料
よくある質問
Q1. ラジオボタンで複数の値を送信することはできますか？
A1. いいえ、ラジオボタンは、グループ内で選択された一つの値のみを送信します。複数の値を送信したい場合は、チェックボックス (<input type="checkbox">) を使用してください。
Q2. ラジオボタンの初期選択状態を設定するにはどうすればよいですか？
A2. <input> タグに "checked" 属性を追加することで、ラジオボタンの初期選択状態を設定できます。
<input type="radio" name="gender" value="male" checked>男性
Q3. JavaScriptでラジオボタンのvalue値を取得するにはどうすればよいですか？
A3. JavaScriptでラジオボタンのvalue値を取得するには、以下のようなコードを使用します。
<script>
const selectedValue = document.querySelector('input[name="gender"]:checked').value;
</script>
その他の参考記事:jquery radio checked 取得