Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[PHP]③簡単なお問合せフォームを制作

簡単なお問合せフォームの仕組みをつくる

  • 送信フォームを記述するindex.phpと、フォームの送信情報を受信するcheck.phpを用意
  • cssは適宜用意
index.php…フォームを記述
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>お問合せフォーム</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<h1>メールフォーム</h1>
<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">Eメール</label></th><td><input type="text" name="email" id="email"></td></tr>
<tr><th><label for="message">お問合せ</label></th><td><textarea name="message" id="message"></textarea></td></tr>
</table>
<input type="submit" value="確認" id="submit">
</form>
</div>
</body>
</html>
check.php…フォーム情報を受信して表示
<?php
/* htmlspecialcharsを使いやすくするために自作関数化 */
function h($str){
  return htmlspecialchars($str, ENT_QUOTES, "utf-8");
}
/* フォーム情報がない場合index.phpに戻る */
if( !(isset($_POST['name'])) || !(isset($_POST['email'])) || !(isset($_POST['message']))){
  header('Location:index.php');
  exit;
}
/* 変数に格納 */
  $name = ($_POST["name"]);
  $email = ($_POST["email"]);
  $message = ($_POST["message"]);
?>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>入力内容の確認</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="container">
<h1>入力内容の確認</h1>
<table>
<tr><th>お名前</th><td><?php echo h($name); ?></td></tr>
<tr><th>Eメール</th><td><?php echo h($email); ?></td></tr>
<tr><th>お問合せ</th><td><?php echo nl2br(h($message)); ?></td></tr>
</table>
</div>
</body>
</html>
お問合せフォームに入力された改行情報を活かす:nl2br
  • 通常だとフォーム内での改行が反映されない
  • nl2br — 改行文字の前に HTML の改行タグを挿入する機能を持つ、全体を()で囲む