お問い合わせフォーム1
これまでに学習してきた GET と POST、PDO を用いてお問い合わせフォームを作成していきます。
今まで学習してきた内容が組み合わさるので難しく感じられかもしれませんが、
まずはコード一つ一つがどのようは処理をしているのか理解できるようにしましょう。
フォームを準備しよう
db_app/form1/study内にindex.phpを作成し、以下のコードを記述してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お問い合わせフォーム</title>
</head>
<body>
<pre>
<?php print_r($_POST) ?>
</pre>
<h1>お問い合わせ</h1>
<form action="index.php" method="POST">
<table>
<tr>
<th>お名前</th>
<td><input type="text" name="name"/></td>
</tr>
<tr>
<th>メールアドレス</th>
<td><input type="email" name="email"/></td>
</tr>
<tr>
<th>お問い合わせ内容</th>
<td><textarea name="body"></textarea></td>
</tr>
<tr>
<td><button name="state" value="confirm">確認画面へ</button></td>
</tr>
</table>
</form>
</body>
</html>以前、GETとPOSTで使用したフォームをほぼ同じ状態で流用しています。
変更した点は、11行目と29行目です。
まずは29行目から見ていきましょう。
inputタグ同様に、buttonタグにもname属性を付与しています。
inputタグは入力された内容がvalue属性になりますが、buttonタグはユーザが入力できないのでこちら側で設定しています。
print_r() は var_dump同様にデバッグする際に使用します。
var_dump はデータ型などの詳細な情報まで出力するのに対し、
print_r は連想配列の中身をデバッグしたい時に必要最低限のキーとバリューを出力します。
プレビューして、以下の内容で送信してみましょう。
print_r によって、$_POST の中身が以下のように出力されます。
Array(
[name] => Mike
[email] => test@test.com
[body] => 練習の投稿
[state] => confirm
)
これでフォームに入力したデータを送信する準備ができました。
次は、送信されたデータを表示できるようにしましょう。
確認画面を準備しよう
お問い合わせは基本的に、「お問い合わせ画面」「確認画面「完了画面」の三部構成になっていることが多いです。
実装方法は色々あるのですが、本講座では1つのファイルで全ての画面を実装します。
index.phpを以下のように編集してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お問い合わせフォーム</title>
</head>
<body>
<pre>
<?php print_r($_POST) ?>
</pre>
<h1>お問い合わせ</h1>
<form action="index.php" method="POST">
<table>
<tr>
<th>お名前</th>
<td><input type="text" name="name"/></td>
</tr>
<tr>
<th>メールアドレス</th>
<td><input type="email" name="email"/></td>
</tr>
<tr>
<th>お問い合わせ内容</th>
<td><textarea name="body"></textarea></td>
</tr>
<tr>
<td><button name="state" value="confirm">確認画面へ</button></td>
</tr>
</table>
</form>
<h1>お問い合わせ内容</h1>
<form action="index.php" method="POST">
<table>
<tr>
<th>お名前</th>
<td><input type="text" name="name" value=<?php echo $_POST["name"] ?> /></td>
</tr>
<tr>
<th>メールアドレス</th>
<td><input type="email" name="email" value=<?php echo $_POST["email"] ?> /></td>
</tr>
<tr>
<th>お問い合わせ内容</th>
<td><textarea name="body"><?php echo $_POST["body"] ?></textarea></td>
</tr>
<tr>
<td><button onClick="history.back()">戻る</button></td>
<td><button name="state" value="submit">送信</button></td>
</tr>
</table>
</form>
</body>
</html>先ほど用意したフォームとそれほど違いはありませんが、39、43、47行目に注目してください。
inputタグはvalue属性に送信されてきたnameとemailの値を設定していますね。
この時、必ずechoが必要です。
echoは出力して見える形にするというイメージが強いかもしれませんが、HTML内でechoが使用された場合、
HTMLに文字列で出力するという意味になります。
つまり、HTMLとして反映させたいPHPの変数がある時はechoが必須となります。
textareaタグはinputタグとは異なり、空タグではないのでvalue属性を記述する必要がなく、
開始タグと閉じタグの間で $_POST[“body”] を出力するようにしています。
このままでは送信されてきた内容が確認画面で編集されてしまいます。
編集できないようにinputタグとtextareaタグにreadonly属性を付与しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お問い合わせフォーム</title>
</head>
<body>
<pre>
<?php print_r($_POST) ?>
</pre>
<h1>お問い合わせ</h1>
<form action="index.php" method="POST">
<table>
<tr>
<th>お名前</th>
<td><input type="text" name="name"/></td>
</tr>
<tr>
<th>メールアドレス</th>
<td><input type="email" name="email"/></td>
</tr>
<tr>
<th>お問い合わせ内容</th>
<td><textarea name="body"></textarea></td>
</tr>
<tr>
<td><button name="state" value="confirm">確認画面へ</button></td>
</tr>
</table>
</form>
<h1>お問い合わせ内容</h1>
<form action="index.php" method="POST">
<table>
<tr>
<th>お名前</th>
<td><input type="text" name="name" value=<?php echo $_POST["name"] ?> readonly/></td>
</tr>
<tr>
<th>メールアドレス</th>
<td><input type="email" name="email" value=<?php echo $_POST["email"] ?> readonly/></td>
</tr>
<tr>
<th>お問い合わせ内容</th>
<td><textarea name="body" readonly><?php echo $_POST["body"] ?></textarea></td>
</tr>
<tr>
<td><button onClick="history.back()">戻る</button></td>
<td><button name="state" value="submit">送信</button></td>
</tr>
</table>
</form>
</body>
</html>これでinputタグとtextareaタグに入力されている内容が変更されないようになりました。
今度は50行目のボタンに注目してみましょう。
onClick属性はその要素をクリックしたときに、右辺のJavaScriptを実行することができます。
今回指定した、history.back() はブラウザの履歴を利用して1つ前のページに戻るという記述になります。
完了画面を準備しよう
index.phpを以下のように編集してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お問い合わせフォーム</title>
</head>
<body>
<pre>
<?php print_r($_POST) ?>
</pre>
<h1>お問い合わせ</h1>
<form action="index.php" method="POST">
<table>
<tr>
<th>お名前</th>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<th>メールアドレス</th>
<td><input type="email" name="email" /></td>
</tr>
<tr>
<th>お問い合わせ内容</th>
<td><textarea name="body"></textarea></td>
</tr>
<tr>
<td><button name="state" value="confirm">確認画面へ</button></td>
</tr>
</table>
</form>
<h1>お問い合わせ内容</h1>
<form action="index.php" method="POST">
<table>
<tr>
<th>お名前</th>
<td><input type="text" name="name" value=<?php echo $_POST["name"] ?> readonly /></td>
</tr>
<tr>
<th>メールアドレス</th>
<td><input type="email" name="email" value=<?php echo $_POST["email"] ?> readonly /></td>
</tr>
<tr>
<th>お問い合わせ内容</th>
<td><textarea name="body" readonly><?php echo $_POST["body"] ?></textarea></td>
</tr>
<tr>
<td><button onClick="history.back()">戻る</button></td>
<td><button name="state" value="submit">送信</button></td>
</tr>
</table>
</form>
<h1>お問い合わせありがとうございました</h1>
<table>
<tr>
<th>お名前</th>
<td><?php echo $_POST["name"] ?></td>
</tr>
<tr>
<th>メールアドレス</th>
<td><?php echo $_POST["email"] ?></td>
</tr>
<tr>
<th>お問い合わせ内容</th>
<td><?php echo $_POST["body"] ?></td>
</tr>
</table>
<p>上記内容でお問い合わせが完了しました</p>
<a href="index.php">お問い合わせフォームに戻る</a>
</body>
</html>完了画面から最初のお問い合わせフォームに戻れるリンクがある以外は、
GETとPOSTで学習した内容とさほど変化はありません。
これでそれぞれの画面が完成しました。
次回は画面の切り替えができるように実装します！
