HTMLにおけるinputタグのtypeに指定できるradio。そのプロパティ名から想像できる通り、このタイプのinputタグを使えばラジオボタンを設置することが可能です。今回の記事では、inputタグのradioボタンについて説明をしつつ、サーバサイド言語であるphpとHTMLを組み合わせてサーバ通信を体験してみましょう。
目次
HTML inputタグのradioボタンとは？
まずはHTML inputタグのradioボタンについて、簡単に説明していきましょう。まずはinputタグの形式について確認です。
inputタグの形式
<input type="〇〇" name="〇〇" />
inputタグは基本的に上記のような形式で用いられています。「type」や「name」以外にもさまざまなプロパティがありますが、それらについてはケースバイケースで用いることができます。
本記事で主に取り扱うradioは、typeプロパティの値に指定するものであり、「type=”radio”」を指定することによってラジオボタンの入力フォームが生成されます。
phpとHTMLを組み合わせてサーバ通信ハンズオン1
それでは早速、phpとHTMLを組み合わせてPOST通信を使ったハンズオンをおこなってみましょう。
phpファイルにラジオボタンを設置しよう
まずはラジオボタンを設置するphpファイルを作成しましょう。
example-1.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ラジオボタンでPOST通信</title>
</head>
<body>
<form method="POST" action="example-2.php">
<h3>あなたの好きな食べ物を教えてください！</h3>
りんご
<input type="radio" name="food" value="りんご" /><br />
ぶどう
<input type="radio" name="food" value="ぶどう" /><br />
ステーキ
<input type="radio" name="food" value="ステーキ" /><br />
クリームパン
<input type="radio" name="food" value="クリームパン" /><br />
おにぎり
<input type="radio" name="food" value="おにぎり" /><br />
パフェ
<input type="radio" name="food" value="パフェ" /><br />
<input type="submit" value="POST通信で送る" />
</form>
</body>
</html>
ソースコードが多くなりましたが、注目してほしいのは「input」タグの部分です。inputタグ1つを抽出すると、以下のようになっています。
<input type="radio" name="food" value="りんご" />
ラジオボタンはどれだけ設置されていても選択できるのは1つだけです。また、それぞれのinputタグの違いは「value」プロパティのみです。valueプロパティが実際にPOST通信で送信するデータ。そして、actionプロパティは送信先のファイルとなります。またnameプロパティは、送信先ファイルが受け取るべきデータを識別するために必要なプロパティとなります。
このように記述することによってPOST通信で送るデータ（value）をユーザーが指定することができ、その上
ラジオボタンの入力データをPOST通信で受け取ろう
さて上記ではラジオボタンの設置をすることができました。次におこなうのは、ラジオボタンで選択した入力データをPOST通信によって、別のphpファイルで受け取るということです。example-1.phpのformタグ・action属性を見ると分かる通り、受け取り側のファイルは「example-2.php」です。
example-2.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ラジオボタンでPOST通信</title>
</head>
<body>
<?php
echo "あなたの好きな食べ物は".$_POST["food"] ."ですね！";
?>
</body>
</html>
example-2.phpの中で重要なソースコードは、以下の部分です。
<?php
echo "あなたの好きな食べ物は".$_POST["food"] ."ですね！";
?>
HTMLのなかに、一部分だけphpのソースコードが挿入されていることがわかるはずです。「$_POST[“food”]」という書き方は馴染みがないかもしれませんが、意味がわかれば簡単です。「$_POST」の部分はPOST通信で受け取ったデータを表しており、その中でも「food」というnameのデータを指定しているということになります。
動作確認
さて、ここまでできればあとは動作確認をしてみましょう。そうすると、example-1.phpで選んだ食べ物に合わせて「あなたの好きな食べ物は〇〇ですね！」といったように出力されるはずです。
phpとHTMLを組み合わせてサーバ通信ハンズオン2
次にphpとHTMLを組み合わせて、2つの値をPOST通信で受け取ってみましょう。これが理解できればいくつでも複数の値を受け取ることができるようになるため、さらに応用力が身につくはずです。
phpファイルにラジオボタンを設置しよう
まずはラジオボタンを設置するphpファイルを作成しましょう。
example-1.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>POST通信の使用例</title>
</head>
<body>
<form method="POST" action="example-2.php">
<h3>あなたの好きな食べ物を教えてください！</h3>
りんご
<input type="radio" name="food" value="りんご" /><br />
ぶどう
<input type="radio" name="food" value="ぶどう" /><br />
ステーキ
<input type="radio" name="food" value="ステーキ" /><br />
クリームパン
<input type="radio" name="food" value="クリームパン" /><br />
おにぎり
<input type="radio" name="food" value="おにぎり" /><br />
パフェ
<input type="radio" name="food" value="パフェ" /><br />
<h3>あなたの性別を教えてください！</h3>
男性
<input type="radio" name="gender" value="男性" /><br />
女性
<input type="radio" name="gender" value="女性" /><br />
どちらでもない
<input type="radio" name="gender" value="どちらでもない" /><br />
<input type="submit" value="POST通信で送る" />
</form>
</body>
</html>
構造的に特殊なことはしていません。単純にradioボタンを増やし、その上でinputタグのnameプロパティの値を「gender」で指定しました。これだけで簡単にラジオボタンの選択項目を増やすことができるのです。これを活用すればウェブアンケートなども簡単に作れますね。
ラジオボタンの入力データをPOST通信で受け取ろう
こちらもハンズオン1と同様にphpを挿入して、POST通信で受け取るname属性を指定すれば、該当するnameプロパティのデータを受け取ることが可能です。
example-2.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>POST通信の使用例</title>
</head>
<body>
<?php
echo "あなたの好きな食べ物は".$_POST["food"] ."ですね！>br<";
echo "あなたの性別は".$_POST["gender"] ."ですね！";
?>
</body>
</html>
これだけで簡単に複数の項目があるラジオボタンを作成することができました。このようにphpとHTMLの入力フォームを組み合わせ、POST通信でユーザーの入力したデータを表示できれば、それだけでインタラクティブなウェブサイトを構築することができます。ぜひ今回のハンズオンを活用して、ラジオボタンのほかにもさまざまな入力フォームを導入していきましょう。
まとめ
今回の記事では、inputタグのradioボタンについて説明をしつつ、サーバサイド言語であるphpとHTMLを組み合わせてサーバ通信をおこないました。HTMLで入力フォームを生成し、phpなどのサーバサイド言語と組み合わせると上記のように動的なウェブサイトを作ることができます。やはりウェブサイトは、アクセスユーザーがあってこそ。動的なサイトを作る一歩として、今回のハンズオンを活用してみてください。
