PHP解説 HTMLのフォームとPHPの受取処理①
チェックボックスとラジオボックス
あれ教えてほしい。
フォームでチェックするやつ。
フォームでチェックするやつ。


HTMLのフォームタグのチェックボックスのことですね。


それでは、今回は、HTMLのフォームタグのチェックボックスの送信とPHPの受取処理について、勉強してみましょうか。


うん


まず、チェックボックスとは、あらかじめ用意している選択肢をチェックして選択できるようにするフォーム部品です。


このチェックボックスを使用するには下のコードのようにinput要素に type="checkbox" を指定します。


<input type="checkbox" name="select" value="くるり">くるり
<input type="checkbox" name="select" value="いちじく" checked>いちじく
<input type="checkbox" name="select" value="文鳥">文鳥
【実行結果1】
くるり いちじく 文鳥
「checked」と入れた項目に最初からチェックが入るんだね。


そのとおりです。それでは、formの送信とPHPでの受け取り処理の一例も合わせて書いてみると以下のとおりになります。


<a id="実行結果2">【実行結果2】</a>
<form action="#実行結果2" method="GET">
<input type="checkbox" name="select" value="くるり">くるり
<input type="checkbox" name="select" value="いちじく" checked>いちじく
<input type="checkbox" name="select" value="文鳥">文鳥
<INPUT type="hidden" name="送った" value="見て">
<input type="submit" value="そ~しん"/>
</form>
<?php
if(isset($_GET['送った']) && $_GET['送った'] == '見て'){
echo htmlspecialchars("{$_GET["select"]}");
}
?>
※そ~しんを押しても、データは残りませんので、ご自由に試しください。
【実行結果2】
あれ?複数にチェックを入れれば複数の値を送れるけど、一つしか表示されないね。


はい、そのままでは一つの値しか処理できません。


複数の値を扱いたいときは、下のコードのようにname属性に[]をつけて、配列として処理する方法があります。


<a id="実行結果3">【実行結果3】</a>【実行結果3】
<form action="#実行結果3" method="GET">
<input type="checkbox" name="select[]" value="くるり">くるり
<input type="checkbox" name="select[]" value="いちじく" checked>いちじく
<input type="checkbox" name="select[]" value="文鳥">文鳥
<INPUT type="hidden" name="送った" value="見て">
<input type="submit" value="そ~しん"/>
</form>
<?php
if(isset($_GET['送った']) && $_GET['送った'] == '見て'){
foreach ( $_GET[select] as $hukusu_hyouji) {
echo $hukusu_hyouji;
}
}
?>
できた。。。 でもね、、本当にやりたかったのは、、、 一つだけ選択できるようにしたかったんだ


あら、そうだったんですね。その場合に使うのはチェックボックスじゃなくてラジオボックスですね。


やけにまどろっこしい名前だね


そうですよね~
由来は音声放送を受信するあのラジオのボタンからきているらしいですよ
由来は音声放送を受信するあのラジオのボタンからきているらしいですよ


ラジオボックスも使い方はほとんど同じです。下のようなコードになります。


<a id="実行結果4">【実行結果4】</a>
<form action="#実行結果4" method="GET">
<input type="radio" name="select" value="くるり">くるり
<input type="radio" name="select" value="いちじく" checked>いちじく
<input type="radio" name="select" value="文鳥">文鳥
<INPUT type="hidden" name="送った" value="見て">
<input type="submit" value="そ~しん"/>
</form>
<?php
if(isset($_GET['送った']) && $_GET['送った'] == '見て'){
echo htmlspecialchars("{$_GET["select"]}");
}
?>
【実行結果4】
「type属性」radioにして、値は一つしか扱わないので、最初にやった送信・受信処理をする感じですね。


できた。 ありがと。


お名前