今回は、ウェブサイトでよく見るフォームの部品の一つでもあるラジオボタンについて解説していきます。
このラジオボタンですが、オプションボタンとも言います。
いくつかの選択肢の中から、一つだけ選ぶことができるフォームでよく見かける部品です。
ウェブサイトを制作していけば、自ずとフォーム必要になってくることは間違いなし。
HTMLでラジオボタンの作り方を知っていれば、知識の幅も広がるでしょう。
PHPでデータの受け渡しについても解説していきますので、どうぞ最後までお付き合いください。
inputタグtype属性
他のフォームの部品を作成する記事でも解説していますが、inputタグのtype属性で部品の種類を指定することができます。
ラジオボタンを作成するには、inputタグのtype属性で「radio」と指定するだけ。
それだけで、ラジオボタンを作成できてしまいます。
とても簡単ですね。
他のフォーム部品についても解説していますので、気になる方は下のリンクから参照してみてください。
name属性
ラジオボタンを作成する時、重要な役割を果たすのがname属性です。
他のフォーム部品についてもそうですが、リクエストを送信した時に遷移先で参照するときに、このname属性を使います。
ラジオボタンのname属性は、データ参照のためだけでなく、グループ化するためにも使用されます。
グループ化とはどういうことでしょうか。
生年月日の年号を選ばせるラジオボタンを例に考えてみましょう。
「昭和」、「平成」、「令和」というラジオボタンがあって、それらどれか一つを選択するわけです。
ラジオボタンは複数の選択肢から一つを選ぶことができるフォーム部品ですから、複数選択できてしまっては製作者の意図に沿っていないことになります。
そこで、一つを選ばせるために、対象の複数の選択肢をグループ化する必要があるというわけです。
ここでは、「昭和」、「平成」、「令和」というラジオボタンを一つのグループとし、そのグループの中から、一つを選ばせる形を想定しなければなりません。
このグループ化するために、name属性はとても重要な役割を担います。
そうは言っても難しいことではなく、ただ単に同じname属性にすればいいだけです。
同じ値のname属性は一つのグループと見なされるのです。
そのグループ内では、複数の選択肢があったとしてもただ一つの選択肢しか選択できなくなります。
<form>
<input type="radio" name="nengou"><span>昭和</span>
<input type="radio" name="nengou"><span>平成</span>
<input type="radio" name="nengou"><span>令和</span>
</form>value属性
ラジオボタンのvalue属性は、リクエスト送信される値を指定します。
先ほどの例で、「昭和」ラジオボタンのvalue属性を「0」、「平成」ラジオボタンのvalue属性を「1」、そして「令和」ラジオボタンのvalue属性を「2」を指定したとします。
そうすれば、「昭和」ラジオボタンを選択すれば「0」が、「平成」ラジオボタンを選択すれば「1」が、また「令和」ラジオボタンを選択すれば「2」がリクエスト送信されるというわけです。
<form>
<input type="radio" name="nengou" value=0><span>昭和</span>
<input type="radio" name="nengou" value=1><span>平成</span>
<input type="radio" name="nengou" value=2><span>令和</span>
</form>数値ではなく、「昭和」、「平成」、「令和」を送信されるデータとしてそのままvalue属性に指定しても、もちろん問題ありません。
<form>
<input type="radio" name="nengou" value="昭和"><span>昭和</span>
<input type="radio" name="nengou" value="平成"><span>平成</span>
<input type="radio" name="nengou" value="令和"><span>令和</span>
</form>リクエスト送信については、下のリンクで解説しています。
checked属性
ラジオボタンのchecked属性は、値を持ちません。
値を持たないchecked属性を指定したラジオボタンはチェックされた状態になります。
要はラジオボタンの初期状態を指定する時に使用します。
<form>
<input type="radio" name="nengou" value="昭和"><span>昭和</span>
<input type="radio" name="nengou" value="平成" checked><span>平成</span>
<input type="radio" name="nengou" value="令和"><span>令和</span>
</form>POST送信したデータを受け取る
ラジオボタンの作成方法がわかったところで、今度は実際にリクエスト送信して、遷移先のページでデータを受け取ってみましょう。
PHP言語を使って、動作を確認してみます。
まず、下のようなファイルを作成し、sample.phpという名前を付けて保存しておきます。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>サンプルページ</title>
</head>
<body>
<form action="result.php" method="post">
<div>
<input type="radio" name="nengou" value="昭和"><span>昭和</span>
<input type="radio" name="nengou" value="平成" checked><span>平成</span>
<input type="radio" name="nengou" value="令和"><span>令和</span>
</div>
<input type="submit" value="送信">
</form>
</body>
</html>formタグについて、詳しい解説は下の記事をご覧ください。
年号を選択してもらうフォームになっていることがわかると思います。
name属性を同じ値にして、グループ化していることがポイントです。
POST送信する実際のデータをvalue属性に、また「平成」のラジオボタンを最初からチェックした状態にしています。
次にデータを受け取る遷移先のサンプルファイルです。
result.phpという名前を付けて保存しましょう。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>サンプルページ</title>
</head>
<body>
<p><?php echo htmlspecialchars(@$_POST['nengou'], ENT_QUOTES, 'UTF-8'); ?></p>
</body>
</html>実際にsample.phpを表示させて、適当なラジオボタンを選択して、送信ボタンをクリックしてみてください。
すると、ちゃんと選択したラジオボタンのデータが送信されていることがわかると思います。
今回はラジオボタンの基礎から、実践まで簡単ではありますが解説しました。
フォームについては、いろいろな構成要素（部品）があります。
そちらに関する記事も、ぜひご覧ください。
