[PHP]入力フォーム⑥
今回やるのは、入力が終わって確認画面で入力ミスに気づいたときのための2つのこと。
1.「入力画面に戻る」ボタンを追加する
2.入力画面で入れた値を表示させておく
1.「入力画面に戻る」ボタンを追加する
メールアドレス間違えちゃった・・・
だけど、このままじゃ戻れません。
なので、一つ前のページに戻るためのボタンをつけます
<p><a href="index.php">入力画面に戻る</a></p>
2.入力画面で入れた値を表示させておく
これで入力画面に戻れるようになりました。でも、戻ってみたら・・・・
入力画面に何も残っていない・・・
また一からやり直し。これじゃ、やる気も失せますよね。ページ離脱者続出は間違いないです。
それもそのはず。POSTメソッドで送ったデータはいったんサーバーに送られますが、check.phpで表示した時点で消えてしまっているのです。だからページを戻るともう残っていないのです。
でも、SESSIONメソッドでサーバーに保存している値を取り出すことで、index.phpで呼び出すことが可能です。
その値を呼び出すためにindex.phpで使う属性は、value属性です。
①index.phpでセッションをスタートさせる
<?php
session_start();
$name = $_SESSION['name'];
$email = $_SESSION['email'];
$msg = $_SESSION['msg'];
?>
②どこにvalue属性を置くのか?
←このボックスの中に入れた値はそのままになっていてほしい
=テキストボックス内にいれるべき
名前とメールアドレス欄はvalue属性にPHPの呼び出しコードを入れます
お名前(tdタグ以下)
<td><input type="text" name="name" id="name" value="<?php echo htmlspecialchars($name, ENT_QUOTES,'UTF-8'); ?>"></td>
メールアドレス(tdタグ以下)
<td><input type="text" name="email" id="email" value="<?php echo htmlspecialchars($email, ENT_QUOTES,'UTF-8'); ?>"></td>
メッセージ欄のtextareaはvalue属性は使えないので、以下のようにします
お問い合わせ内容
<td><textarea name="msg" id="msg"><?php echo htmlspecialchars($msg, ENT_QUOTES,'UTF-8'); ?></textarea></td>
"msg"><?phpや?></textarea> の><の間にスペースを入れないこと
ここまでのファイルの内容
【index.php】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お問い合わせフォーム</title>
<?php
session_start();
$name = $_SESSION['name'];
$email = $_SESSION['email'];
$msg = $_SESSION['msg'];
?>
</head>
<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" value="<?php echo htmlspecialchars($name, ENT_QUOTES,'UTF-8'); ?>"></td></tr>
<tr><th><label for="email">メールアドレス:</label></th><td><input type="text" name="email" id="email" value="<?php echo htmlspecialchars($email, ENT_QUOTES,'UTF-8'); ?>"></td></tr>
<tr><th><label for="msg">お問い合わせ内容:</label></th><td><textarea name="msg" id="msg"><?php echo htmlspecialchars($msg, ENT_QUOTES,'UTF-8'); ?></textarea></td></tr>
</table>
<p><input type="submit" value="確認する"></p>
</form>
</body>
</html>