[前のページへ戻る]ボタンをつくる－ウェブ制作チュートリアル

トップページ > ウェブ制作チュートリアル > [前のページへ戻る]ボタンをつくる

【番外編】第30章　PHPでメール送信フォームを作る

★[前のページへ戻る]ボタンをつくる

[前のページへ戻る]ボタンをつくる

前回は、未入力チェック機能を作成しました。今回は、未入力の項目があった場合に[前のページへ戻る]ボタンを表示して、ユーザーに再入力を促す仕組みを作成していきましょう。

テキストエディタでconfirm.phpを開いて下記の内容を追加してください。

サンプルソース：confirm.php<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>入力内容の確認｜メール送信フォーム</title>
</head>
<body>

<?php
/*******************************
 データの受け取り
*******************************/
$namae		= $_POST["namae"];		//お名前
$mailaddress	= $_POST["mailaddress"];	//メールアドレス
$naiyou		= $_POST["naiyou"];		//お問合せ内容

//危険な文字列を入力された場合にそのまま利用しない対策
$namae		= htmlspecialchars($namae, ENT_QUOTES);
$mailaddress	= htmlspecialchars($mailaddress, ENT_QUOTES);
$naiyou		= htmlspecialchars($naiyou, ENT_QUOTES);

/*******************************
 未入力チェック
*******************************/
$errmsg = '';	//エラーメッセージを空にしておく
if ($namae == '') {
	$errmsg = $errmsg.'<p>お名前が入力されていません。</p>';
}
if ($mailaddress == '') {
	$errmsg = $errmsg.'<p>メールアドレスが入力されていません。</p>';
}
if ($naiyou == '') {
	$errmsg = $errmsg.'<p>お問合せ内容が入力されていません。</p>';
}

/*******************************
 入力内容の確認
*******************************/
if ($errmsg != '') {
	//エラーメッセージが空ではない場合には、エラーメッセージを表示する
	echo $errmsg;
	
	//[前のページへ戻る]ボタンを表示する
	echo '<form method="post" action="index.php">';
	echo '<input type="hidden" name="namae" value="'.$namae.'">';
	echo '<input type="hidden" name="mailaddress" value="'.$mailaddress.'">';
	echo '<input type="hidden" name="naiyou" value="'.$naiyou.'">';
	echo '<input type="submit" name="backbtn" value="前のページへ戻る">';
	echo '</form>';
} else {
	//エラーメッセージが空の場合には、入力された内容を画面表示する
	echo '<h3>入力内容を確認します</h3>';
	echo '<dl>';
	echo '<dt>【お名前】</dt><dd>'.$namae.'</dd>';
	echo '<dt>【メールアドレス】</dt><dd>'.$mailaddress.'</dd>';
	echo '<dt>【お問合せ内容】</dt><dd>'.nl2br($naiyou).'</dd>';
	echo '</dl>';

	//[上記内容で送信する]ボタンを表示する
	echo '<form method="post" action="mailpost.php">';
	echo '<input type="hidden" name="namae" value="'.$namae.'">';
	echo '<input type="hidden" name="mailaddress" value="'.$mailaddress.'">';
	echo '<input type="hidden" name="naiyou" value="'.$naiyou.'">';
	echo '<input type="submit" name="okbtn" value="上記内容で送信する">';
	echo '</form>';
}
?>

</body>
</html>

入力が完了したら、confirm.phpを上書き保存してください。

この時点で、一度ブラウザで表示確認しましょう。フォーム入力欄が一部未入力であった場合には、下記のように[前のページへ戻る]ボタンが表示されるようになります。

そして、フォーム入力欄がすべて入力された場合には、下記のように[上記内容で送信する]ボタンが表示されるようになれば成功です。

記述したソース内容を確認しよう

受け取ったデータを隠しデータとして次のページへ送る

いま追加したソースでは、[前のページへ戻る]ボタンと[上記内容で送信する]ボタンを作成しています。送信先ページは異なりますが、どちらのボタンも同様の機能を果たします。

[前のページへ戻る]ボタンを作成する部分のソースに注目してみましょう。

サンプルソース：confirm.phpの抜粋	//[前のページへ戻る]ボタンを表示する
	echo '<form method="post" action="index.php">';
	echo '<input type="hidden" name="namae" value="'.$namae.'">';
	echo '<input type="hidden" name="mailaddress" value="'.$mailaddress.'">';
	echo '<input type="hidden" name="naiyou" value="'.$naiyou.'">';
	echo '<input type="submit" name="backbtn" value="前のページへ戻る">';
	echo '</form>';

送信ボタンは、HTMLのform要素で作成しています。 <form method="post" action="index.php"> ～ </form> でひとつのボタンです。送信するデータの内容はinput要素で指定していますが、 input要素のtype属性に「hidden」を指定するとブラウザの画面に表示されない隠しデータとして送信することができます。

隠しデータの内容は、 <input type="hidden" name="namae" value="'.$namae.'"> などの記述で指定しています。上記のソースで作成した[前のページへ戻る]ボタンを押すと、$namae・$mailaddress・$naiyouの変数に格納されているデータが、 form要素のaction属性で指定された「index.php」へ隠しデータとして送信されます。

隠しデータは暗号化ではない

input要素のtype="hidden"で送信する隠しデータは、暗号化ではありません。ブラウザの画面上には表示されないというだけであって、HTMLソースを表示すればユーザー側でも内容を確認できます。

【ブラウザ上の表示】

【HTMLソースの内容】

隠しデータの送信がHTMLソースで実現しているということは、ユーザー側でデータ内容を閲覧したり改変することもできるということです。つまり、隠しデータにしたからといってユーザーに見られないというわけでないし、隠しデータとして送られてきたからといってその内容が改変されていないとも限りません。

必要以上に恐れることもありませんが、隠しデータを利用する際には若干の注意が必要であることを知っておきましょう。例えば、パスワードのような秘匿すべきデータを、input要素の隠しデータとしてページ間で受け渡すような仕様は避けるべきでしょう。

<前へ

目次へ

次へ>