[PHP]入力フォーム③
入力フォーム2
名前、メールアドレス、お問い合わせ内容を記入できるフォームを作成します。
今回は入力確認画面、送信後の画面、そして指定されたアドレスへの通知メールも実装します。
使用するファイル
・index.php(入力フォーム)
・check.php(確認画面)
・send.php(送信後用の画面)
入力フォーム2−1 入力フォームをHTMLで記述
今回はtableタグ、labelタグを使用します。
labelタグのforをid属性と紐づけると、各項目をクリックすると入力フォームに自動的にカーソルが移るので便利。
使用する属性:name属性、id属性(それぞれ「name」「email」「msg」を使用)
データの送信方式:POSTメソッド
【index.php】(body内)
<h1>お問い合わせフォーム</h1>
<p>必要事項を入力して「確認する」ボタンをクリックしてください。</p>
<form action="check.php" method="post">
<table>
<tr><th><label for="name">お名前:</label></th><td><input type="text" name="name" id="name"></td></tr>
<tr><th><label for="email">メールアドレス:</label></th><td><input type="text" name="email" id="email"></td></tr>
<tr><th><label for="msg">お問い合わせ内容:</label></th><td><textarea name="msg" id="msg"></textarea></td></tr>
</table>
<p><input type="submit" value="確認する"></p>
</form>
入力フォーム2−2 確認画面を作成
入力されたデータを確認するためのcheck.phpを作成します。
まずは ①入力値を表示する為のHTMLを整えて
次に ②入力値が表示されるようにPHPのコードを書きます
①【check.php】(body内)
<p>以下の内容が入力されました。</p>
<table>
<tr><th>お名前:</th><td></td></tr>
<tr><th>メールアドレス:</th><td></td></tr>
<tr><th>お問い合わせ内容:</th><td></td></tr>
</table>
<a href="#">送信する</a>
○データの送信先はsend.phpというファイルなので、「送信する」は次の通りになる
<a href="send.php">送信する</a>
②【check.php】(head内)
index.phpのすべての入力欄で値があるかどうか調べる。
値がなければindex.phpに戻るコードを書く。
if(!isset($_POST['name']) || !isset($_POST['email']) || !isset($_POST['msg']) ) {
header( 'Location:./index.php' );
exit;
}
||は「又は」を表す記号。
1行目「もし $_POST['name'] または $_POST['email'] 又は $_POST['msg']の値がなければ」
2行目「index.phpに遷移する」
3行目「この処理はそれで終了」
③入力値を表示する
1)isset関数の下に、$_POST['']の値をシンプルにする変数を追加する
$name = $_POST['name'];
$email = $_POST['email'];
$msg = $_POST['msg'];
2)HTMLのtdタグ内に、変換した変数を表示するPHPのコードを書く。
このときタグやアンカーリンクを無効にするhtmlspecialchars関数を忘れないように。
<p>以下の内容が入力されました。</p>
<table>
<tr><th>お名前:</th><td><?php echo htmlspecialchars($name, ENT_QUOTES,'UTF-8'); ?></td></tr>
<tr><th>メールアドレス:</th><td><?php echo htmlspecialchars($email, ENT_QUOTES,'UTF-8'); ?></td></tr>
<tr><th>お問い合わせ内容:</th><td><?php echo htmlspecialchars($msg, ENT_QUOTES,'UTF-8'); ?></td></tr>
</table>
テストとしてアンカーリンク付きのテキストを入力して送信してみる。
リンクが無効になっていれば機能している証拠。