【HTML/PHP】(フォーム)inputタグでラジオボタンを作る

HTMLとPHPヘッダー HTML

今回は、ウェブサイトでよく見るフォームの部品の一つでもあるラジオボタンについて解説していきます。

このラジオボタンですが、オプションボタンとも言います。

いくつかの選択肢の中から、一つだけ選ぶことができるフォームでよく見かける部品です。

ウェブサイトを制作していけば、自ずとフォーム必要になってくることは間違いなし。

HTMLでラジオボタンの作り方を知っていれば、知識の幅も広がるでしょう。

PHPでデータの受け渡しについても解説していきますので、どうぞ最後までお付き合いください。

inputタグtype属性

他のフォームの部品を作成する記事でも解説していますが、inputタグのtype属性で部品の種類を指定することができます。

ラジオボタンを作成するには、inputタグのtype属性で「radio」と指定するだけ。

それだけで、ラジオボタンを作成できてしまいます。

とても簡単ですね。

他のフォーム部品についても解説していますので、気になる方は下のリンクから参照してみてください。

【HTML】selectでセレクトボックス(プルダウンメニュー)
フォームに何か入力する時、セレクトボックス(プルダウンメニュー)はよく見る部品ですし、必要不可欠な部品の一つです。このセレクトボックス(プルダウンメニュー)をHTMLのselectタグとoptionタグで作成する方法を解説します。
【HTML/PHP】inputでフォームのテキストボックス作成
ウェブサイトを制作すれば、なくてはならない存在でもあるフォーム。そして、フォームの構成要素の中でも欠かすことができないのが、テキストボックスです。この記事では、よく見かけることの多いテキストボックスの作成方法についてとても簡単に解説します。

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>

リクエスト送信については、下のリンクで解説しています。

【HTML/PHP】POSTとGETを使ってサーバーにリクエスト
フォームはウェブサイトに必要不可欠なものです。そんなフォームを制作していく上で、理解が必要になってくるのが、リクエストとレスポンスの違い、またGET送信とPOST送信の違いと使い方です。この記事ではGET送信、POST送信について、解説しています。

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タグについて、詳しい解説は下の記事をご覧ください。

【HTML/PHP】ウェブサイトのフォーム(form)を制作してみる
ウェブサイトで会社やお店とコンタクトを取るのに使われるフォーム。ウェブサイトを制作していくうえで、フォームは重要な役割を果たします。そんなフォームを作成する基本的な方法を解説します。まずは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を表示させて、適当なラジオボタンを選択して、送信ボタンをクリックしてみてください。

ラジオボタンサンプル
sample.php

すると、ちゃんと選択したラジオボタンのデータが送信されていることがわかると思います。

ラジオボタンサンプル結果
result.php

今回はラジオボタンの基礎から、実践まで簡単ではありますが解説しました。

フォームについては、いろいろな構成要素(部品)があります。

そちらに関する記事も、ぜひご覧ください。

【HTML】selectでセレクトボックス(プルダウンメニュー)
フォームに何か入力する時、セレクトボックス(プルダウンメニュー)はよく見る部品ですし、必要不可欠な部品の一つです。このセレクトボックス(プルダウンメニュー)をHTMLのselectタグとoptionタグで作成する方法を解説します。
【HTML/PHP】inputでフォームのテキストボックス作成
ウェブサイトを制作すれば、なくてはならない存在でもあるフォーム。そして、フォームの構成要素の中でも欠かすことができないのが、テキストボックスです。この記事では、よく見かけることの多いテキストボックスの作成方法についてとても簡単に解説します。

コメント

タイトルとURLをコピーしました