1. はじめに（今回の目的）
前回は、入力画面（index.php）を作成しました。
今回は、フォームに入力した内容を確認するための確認画面（confirm.php）を実装します。
具体的には、以下の内容を行いました。
- フォームから送信されたデータ（POST）の受け取り
- 確認画面への表示
- 未入力チェックなどのバリデーション処理
- 「戻る」ボタンで入力画面に戻った際、入力値が消えないようにする処理
また、前回未対応だったスライダー（緊急度）の値を、リアルタイムで表示する処理も追加しました。
※現在は動作を優先した仮実装のため、見た目やCSSについては後日調整予定です。
2. 今回のゴール
今回のゴールは、入力フォームから送信されたデータを受け取り、確認画面で内容を
表示できるようにすることです。
また、未入力の項目がある場合はエラーとして検知し、そのまま送信されないように
バリデーションチェックを行います。
さらに、確認画面から「戻る」ボタンで入力画面に戻った際、入力した内容が消えずそのまま残るようにすることも目標としました。
3. 現時点での画面
現時点では見た目は最低限ですが、入力機能や確認画面の実装を優先しています。
入力した内容が確認画面に表示されることや、
未入力の場合にエラーが表示され、入力内容の不足に気づける状態になっています。
今後はCSSで見た目を整えていく予定です。
※ 現時点では確認画面に入力内容を表示し、「戻る」ボタンで入力画面に戻れるところまで実装しています。
登録ボタンおよびデータベースへの登録処理は、次回以降で実装する予定です。
・確認画面の表示例
また、未入力の項目がある場合には、エラーメッセージが表示されるようにしています。
ユーザーがどこを修正すればよいか分かりやすいように、
アラートと画面上のエラー表示の両方で確認できるようにしました。
・エラー発生時のアラート
・エラー表示（赤文字）
複数の未入力項目がある場合でも、まとめてエラーが表示されるようにしています。
4.開発工程
4-1 var_dumpで確認
まずは、フォームから送信された値が正しく受け渡されているか確認するため、
以下のコードを実装し、$_POSTの中身を出力しました。
<?php
echo '<pre>';
var_dump($_POST);
echo '</pre>';
?>
確認ボタン押下後、画像のように各入力項目の値が配列として出力されました。
これにより、
フォームからサーバーへデータが正常に送信されていることを確認できました。
また、配列構造（チェックボックスなど）も含めて確認できたため、
今後の実装（値の表示やデータ保持）に進むための前提が整いました。
4-2.function.php と h関数の作成
フォームに入力された内容を画面に表示するため、
XSS対策として htmlspecialchars() を使った h() 関数を作成しました。
共通して使う処理のため、function.php にまとめ、
確認画面側で読み込んで使用する形にしました。
function h($str) {
return htmlspecialchars($str, ENT_QUOTES, 'UTF-8');
}
これにより、入力された文字列をそのままHTMLとして解釈させず、
安全に画面へ表示できるようにしました。
※当初、筆者はXSSをXXLと覚えかけていました。
セキュリティ対策の話をしているはずが、一瞬だけ服のサイズになりました。
4-3.個別表示
var_dump によりデータの受け取りが確認できたため、
次に各項目を個別に画面へ表示する処理を実装しました。
しかし実装中に、以下のエラーが発生しました。
実際に発生したエラー画面は以下の通りです。
原因を確認したところ、
チェックボックスで選択した値（learning_languages や consultation_categories）が
配列として送信されているにもかかわらず、そのまま h() 関数に渡していたことが原因でした。
■ 失敗コード
echo '<p>学習言語：' . h($_POST['learning_languages']) . '</p>';
この問題に対して、配列データは implode() を使用して文字列に変換し、
その後 h() 関数を適用するように修正しました。
$learning_languages = isset($_POST['learning_languages'])
? implode('、', $_POST['learning_languages'])
: '未選択';
この修正により、エラーが解消され、
複数選択された値も正しく表示されるようになりました。
4-4.戻るボタンの実装
基本的なデータ表示ができるようになったため、次に確認画面から入力画面へ戻った際に、入力内容が消えないようにする処理を実装しました。
① confirm.php から index.php に値を渡す
確認画面側では、hidden を使用して入力内容を保持したまま index.phpへPOST送信するようにしました。
<form action="index.php" method="post">
<input type="hidden" name="name" value="<?= h($_POST['name']) ?>">
<button type="submit">戻る</button>
</form>
チェックボックスは複数選択されるため、単一の input ではなく、
選択された数だけ hidden を生成する必要があります。
そのため、以下のように foreach を使用して配列の要素ごとに hidden を作成しました。
<?php foreach ($_POST['consultation_categories'] ?? [] as $category): ?>
<input type="hidden" name="consultation_categories[]" value="<?= h($category) ?>">
<?php endforeach; ?>
これにより、複数選択された値もすべて保持した状態で、入力画面へ戻せるようになりました。
② index.php 側で値を受け取る
入力画面側では、確認画面から戻ってきた値を受け取れるようにしました。
未入力の場合でもエラーにならないよう、?? を使用して初期値を設定しています。
$name = $_POST['name'] ?? '';
③ inputタグに値を反映する
受け取った値を、各入力欄の value 属性に設定しました。
<!-- 修正前 -->
<input type="text" id="name" name="name" placeholder="例：山田太郎">
<!-- 修正後 -->
<input type="text" id="name" name="name" value="<?= h($name) ?>" placeholder="例：山田太郎">
これにより、確認画面から戻った際も、入力済みの内容が保持されるようになりました。
基本的なデータの受け渡しはできるようになりましたが、チェックボックスやラジオボタンなど、複数選択・選択状態を持つ項目については、単純にvalueを設定するだけでは元の選択状態を復元できませんでした。
4-5 チェックボックス・ラジオボタンの選択状態を復元する
基本的なデータの受け渡しはできるようになりましたが、チェックボックスや
ラジオボタンなど、複数選択・選択状態を持つ項目については、
単純に value を設定するだけでは元の選択状態を復元できませんでした。
そのため、確認画面から戻ってきた値と各選択肢の値を比較し、
一致している場合は checked を付けるように修正しました。
ラジオボタンの場合
<input type="radio" name="consultation_method" value="オンライン"
<?= $consultation_method === 'オンライン' ? 'checked' : '' ?>>
オンライン
<input type="radio" name="consultation_method" value="電話"
<?= $consultation_method === '電話' ? 'checked' : '' ?>>
電話
ラジオボタンは1つだけ選択する項目のため、戻ってきた値と value が一致する場合に checked を付けることで、選択状態を復元できます。
チェックボックスの場合
<input type="checkbox" name="learning_languages[]" value="JavaScript"
<?= in_array('JavaScript', $learning_languages, true) ? 'checked' : '' ?>>
JavaScript
<input type="checkbox" name="learning_languages[]" value="PHP"
<?= in_array('PHP', $learning_languages, true) ? 'checked' : '' ?>>
PHP
チェックボックスは複数選択される可能性があるため、in_array() を使用して、配列の中に対象の値が含まれているかを確認しました。
これにより、確認画面から戻った場合でも、ラジオボタンやチェックボックスの選択状態を保持できるようになりました。
入力内容の保持は、テキストボックスだけでなく、選択式の項目ごとに復元方法を変える必要があることを学びました。
4-6 バリデーションチェック
フォーム送信前に入力内容のチェックを行うため、
JavaScriptによるバリデーションを実装しました。
送信時に処理を実行するため、form タグに onsubmit を設定しました。
<form method="post" action="confirm.php" onsubmit="return validateForm()">
onsubmit を使用することで、送信ボタンが押されたタイミングで
指定した関数（今回は validateForm）を実行し、
不正な入力があった場合は送信を中止できることが分かりました。
次に、validateForm 関数内で各入力項目のチェックを行いました。
function validateForm() {
// エラーを格納する配列
let errors = [];
// 必須項目のチェック
if (!$('#name').val()) {
errors.push('お名前は必須項目です。');
}
// エラーがある場合はアラートを表示
if (errors.length > 0) {
// アラート表示
alert(errors.join('\n'));
// 赤文字表示
$('#errorMessages').html(errors.join('<br>'));
return false;
}
// すべてのチェックが通った場合はフォームを送信
return true;
}
入力に不備がある場合はアラートを表示し、
送信を中断するようにしています。
また、エラー箇所が視覚的にも分かるように、
該当項目の表示を赤色に変更する処理も追加しました。
これにより、ユーザーが入力ミスに気付きやすくなり、
フォームの使いやすさを向上させることができました。
5. 悩んだポイント
・チェックボックスの値（配列）の扱いに苦戦した
→ 配列のままでは扱えず、implodeで文字列に変換する必要があった
・配列にそのままh()をかけてエラーになった
→ h()は文字列用のため、配列には使えないことを理解した
・textareaのバリデーションが効かず、idの指定漏れに気づいた
→ jQueryで取得するためにはidが必要だった
・onsubmitの位置を間違えて処理が動かなかった
→ formタグに設定する必要があると分かった
・配列をhiddenで渡す方法が分からなかった
→ foreachで1つずつhiddenにする必要があった
・スライダーの値と表示が連動していなかった
→ 値の変更だけでなく、表示部分もJavaScriptで更新する必要があった
6. 工夫したところ
緊急度を選択するスライダーにおいて、
初期状態ではスライダーを動かしても、隣に表示している数値が更新されない状態でした。
そこで、スライダーの値をリアルタイムで表示するために、
JavaScript（jQuery）で input イベントを使用し、値を即時反映する処理を実装しました。
$('#urgency_level').on('input', function() {
$('#urgencyValue').text(this.value);
});
この処理により、スライダーを動かすたびに値が即座に更新されるようになり、
現在の選択値が視覚的に分かりやすくなりました。
7. 次にやること（次回予告）
次は、データベースとの連携を行い、
入力内容を保存するための登録処理（complete.php）を実装する予定です。
これにより、フォーム入力からデータ保存・完了画面表示までの
一連の流れを完成させます。
フォームとしての機能を一通り完成させるフェーズに入るため、引き続き実装を進めていきます。
まとめ
今回の実装では、フォームから送信されたデータの受け取り確認から始まり、
個別表示、入力内容の保持、バリデーションチェックまでを一通り実装しました。
特に、チェックボックスなどの配列データの扱いでは、
そのまま出力できないという問題に直面し、implode() を使って文字列に変換する必要があることを学びました。
また、入力内容の保持やバリデーションの実装を通して、
ユーザーが使いやすいフォームにするためには、単に動くだけでなく、
入力ミスや再入力の手間を減らす工夫が重要であると感じました。
次回は、データベースへの登録処理を実装し、
入力から保存・完了画面までの一連の流れを完成させていきます。
実際に手を動かして実装することで、フォーム処理の流れを具体的に理解することができました。
ソースコード
今回作成したコードはこちらで公開しています。
https://github.com/Frecca-tec/survey-form