PHPでのフォームのセレクトボックスの利用と値の受け渡し
フォームのデザインでユーザーに選択してもらう機能として、予め選択項目を表示しておくラジオボタンやチェックボックスがありますが、その他にもプルダウンメニューとして表示はしておかないけれども、選択項目を用意しておくセレクトボックスがあります。
こちらもラジオボタンやチェックボックスと同様に、よく利用されるフォームの部品でしょう。
セレクトボックスは、選択項目が多い時にコンテンツの表示エリアをたくさん利用せず、コンパクトにしたいときによく利用されます。都道府県の選択などでは47項目、画面を広く使ってしまうのが良い例でしょう。
ここでは、HTMLで構築したセレクトボックスをPHPで取り扱う時の利用方法をご紹介します。
また、選択とは少し異なりますがHTML5から追加された入力候補を用意する、datalist要素の利用についてもご紹介します。
セレクトボックスを利用したプログラム
HTMLのselect要素でプルダウンの機能を作り、要素のデータにアクセスするための名前を設定します。
プルダウンメニューの選択項目として、option要素で選択項目を設定していきます。
以下、サンプルを用意しました。
check.phpで入力を確認するという流れで作成します。
HTML
<form method="post" action="check.php">
<p>オプションを選択 <span class="req">※</span></p>
<select name="op">
<option value="---">---</option>
<option value="Option A">Option A</option>
<option value="Option B">Option B</option>
<option value="Option C">Option C</option>
<option value="Option D">Option D</option>
</select>
<input type="submit" value="送信">
</form>
以下、実際の表示です。
未選択の項目は「—」とするのが分かりやすいです。
Option要素のvalue属性が、選択された時に送られる値です。
オプションを選択してもらう場合は、必須項目であることが多いでしょう。
必須項目の場合は、受け取った値をチェックしていきます。
受け取る側のファイルでは、select要素のname属性の名前でデータにアクセスして、スーパーグローバル変数の「$_POST」で受け取ります。
check.php
<?php
$op = $_POST["op"];
if ($op === '---') {
echo 'オプションが選択されていません。<br>';
} else {
echo 'オプション：<br>' . $op . '<br>';
}
?>
If文で、選択していない値の場合に、未選択であることをメッセージで伝えています。
また、オプション選択とは少し異なりますが、HTML5から追加されたdatalist要素もご紹介しておきます。
datalist要素を利用したプログラム
HTML5から追加されたdatalist要素を利用することで、入力候補を作成することができます。
希望の調査などで入力してもらう場合にはユーザーの意見の他、こちらで候補を用意しておくとスムーズに答えてもらえるでしょう。
HTML
<form method="post" action="check.php">
<p>興味のあるジャンル</p>
<input type="text" name="g" list="genre">
<datalist id="genre">
<option value="ジャンル A">ジャンル A</option>
<option value="ジャンル B">ジャンル B</option>
<option value="ジャンル C">ジャンル C</option>
</datalist>
<input type="submit" value="送信">
</form>
以下、実際の表示です。
inputタイプ「text」として、list属性にdatalist要素に設定するIDを指定します。
あとはoption要素でいくつかの候補を設定します。
もし必須項目とするのであれば、値の確認を。
check.php
<?php
$genre = htmlspecialchars($_POST["g"])];
if ($genre === '') {
echo '興味のあるジャンルが入力されていません。<br>';
} else {
echo '興味のあるジャンル：<br>' . $genre . '<br>';
}
?>
必須項目でなければ、確認画面で値がある時だけ表示させれば良いでしょう。
check.php
<?php
$genre = htmlspecialchars($_POST["g"]);
if ($genre !== '') {
echo '興味のあるジャンル：<br>' . $genre . '<br>';
}
?>
入力欄がテキストフィールドですので、セキュリティを高めるためにhtmlspecialcharsでサニタイジングしています。
datalist要素は検索フォームなどでも利用すると良いでしょう。
検索フォームの場合は、HTML側でinputタイプを「search」とします。機能的にはtextと変わりはありませんが、ユーザーエージェントでスタイルが変わってきます。
ラジオボタンやチェックボックスのPHPプログラムでの扱いについては、こちらでご紹介しています。
