🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

【PHP入門】Webサイトの心臓部!フォームでデータを受け取る仕組み

Webサイトに「お問い合わせフォーム」は欠かせません。ユーザーからの質問やフィードバックを受け取るための、サイト運営者と訪問者とをつなぐ大切な窓口、まさにWebサイトの心臓部です。しかし、「フォームを作ってみたいけど、入力されたデータはどうやって受け取るんだろう?」と難しく感じてしまう方も多いのではないでしょうか。

この記事では、その核心部分である「HTMLフォームからPHPでデータを受け取り、確認ページに表示する」という一連の流れを、初心者の方でも分かるように丁寧に解説します。今回は、`name`, `email`, `message`の3項目を持つシンプルなメールフォームを例に、1つのファイルだけで入力フォームと確認画面の両方を実現する方法を学びます。コピペだけで動くコードを用意したので、ぜひ「動く」楽しさを体験してください!

PHPを動かすための準備(開発環境)まだXAMPP「ザンプ」を構築してない方は、【PHP入門】XAMPPのダウンロードとインストール方法を徹底解説!を参照してください。 インストール後、指定されたフォルダ(`htdocs`など)にPHPファイルを置けば、準備は完了です!

1. Webフォームの仕組み:HTMLとPHPの連携

Webフォームは、大きく分けて2つの部分から成り立っています。

  1. HTML: ユーザーが文字を入力するための「見た目」の部分。
  2. PHP: 送信されたデータを受け取って処理する「裏方」の部分。

まずはHTMLの<form>タグを見てみましょう。これがフォームの本体です。

<!-- データ送信先(action)と送信方法(method)を指定 -->
<form action="receive.php" method="POST">
    <!-- 各入力欄には、PHPでデータを受け取るための「名前(name)」を付ける -->
    <p>お名前: <input type="text" name="user_name"></p>
    <p>メールアドレス: <input type="email" name="user_email"></p>
    <p><button type="submit">送信</button></p>
</form>

重要なのはmethod="POST"と各入力欄のname属性です。`POST`はデータをURLに表示させずに安全に送信する方法で、フォームでは一般的に使われます。そして、`name`属性に付けられた名前が、PHP側でデータを受け取る際の「鍵」になります。

PHP側では、$_POSTという特殊な変数(スーパーグローバル変数)を使ってデータを受け取ります。$_POST['user_name']のように、HTMLの`name`属性を鍵として指定することで、入力された値を取り出すことができます。

<?php
// "user_name"という名前の入力欄から送られてきたデータを表示
echo $_POST['user_name'];

// "user_email"という名前の入力欄から送られてきたデータを表示
echo $_POST['user_email'];

// POSTで送られてきた全てのデータを確認(デバッグ用)
print_r($_POST);
?>

このHTMLとPHPの連携が、Webフォームの基本的な仕組みです。

2. 実践!入力フォームと確認画面を1ファイルで作る

それでは、入力フォームと確認画面の機能を1つのPHPファイルに実装してみましょう。この方法のメリットは、ファイル管理がシンプルになることです。以下のコードは、このままファイルにコピペすれば、すぐにブラウザで動作を確認できる完全なサンプルです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>お問い合わせフォーム</title>
    <style>
        body { font-family: sans-serif; line-height: 1.7; padding: 20px; max-width: 600px; margin: auto; }
        .form-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; font-weight: bold; }
        input[type="text"], input[type="email"], textarea {
            width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;
        }
        textarea { height: 120px; }
        .confirmation-table { width: 100%; border-collapse: collapse; }
        .confirmation-table th, .confirmation-table td { border: 1px solid #ddd; padding: 12px; text-align: left; }
        .confirmation-table th { background-color: #f2f2f2; width: 30%; }
        button { padding: 10px 20px; border: none; background-color: #007bff; color: white; border-radius: 4px; cursor: pointer; }
        button:hover { background-color: #0056b3; }
    </style>
</head>
<body>

    <?php
    // POSTリクエストがあるかどうかで処理を分岐
    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
        // --- 確認画面の表示 ---
        $name = htmlspecialchars($_POST['name'], ENT_QUOTES, 'UTF-8');
        $email = htmlspecialchars($_POST['email'], ENT_QUOTES, 'UTF-8');
        $message = htmlspecialchars($_POST['message'], ENT_QUOTES, 'UTF-8');
    ?>
        <h1>ご入力内容の確認</h1>
        <p>以下の内容でよろしければ、送信ボタンを押してください。</p>
        <table class="confirmation-table">
            <tr>
                <th>お名前</th>
                <td><?php echo $name; ?></td>
            </tr>
            <tr>
                <th>メールアドレス</th>
                <td><?php echo $email; ?></td>
            </tr>
            <tr>
                <th>お問い合わせ内容</th>
                <td><?php echo nl2br($message); ?></td>
            </tr>
        </table>
        <p>※このサンプルでは、実際のメール送信処理は行いません。</p>

    <?php } else { ?>
        // --- 入力フォームの表示 ---
        <h1>お問い合わせ</h1>
        <form action="" method="POST">
            <div class="form-group">
                <label for="name">お名前</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="email">メールアドレス</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="message">お問い合わせ内容</label>
                <textarea id="message" name="message" required></textarea>
            </div>
            <button type="submit">入力内容を確認する</button>
        </form>
    <?php } ?>

</body>
</html>

このコードの最大のポイントは、`if ($_SERVER['REQUEST_METHOD'] === 'POST')`という条件分岐です。`$_SERVER['REQUEST_METHOD']`は、ページへのアクセス方法(GETかPOSTか)を保持しています。

また、フォームの`action=""`のように`action`属性を空にすると、そのファイル自身にデータが送信されます。これにより、1ファイルで2つの画面を表現できるのです。

3. 気をつけるべき点(入力値の検証)

実際のWebサイトでは、ユーザーが何も入力しなかったり、不正なデータを送ってきたりする可能性があります。そのため、受け取ったデータが期待通りかチェックする**検証(バリデーション)**という処理が不可欠です。

ここでは、各項目が空っぽでないかをチェックする簡単な検証を加えてみましょう。

<?php
// 確認画面側の処理(if文の中)
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $errors = []; // エラーメッセージを格納する配列

    // お名前のバリデーション
    if (empty($name)) {
        $errors[] = 'お名前は必須です。';
    }

    // メールアドレスのバリデーション
    if (empty($email)) {
        $errors[] = 'メールアドレスは必須です。';
    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $errors[] = 'メールアドレスの形式が正しくありません。';
    }

    // お問い合わせ内容のバリデーション
    if (empty($message)) {
        $errors[] = 'お問い合わせ内容は必須です。';
    }

    // エラーがあるかどうかで処理を分岐
    if (!empty($errors)) {
        // エラーがある場合:エラーメッセージを表示
        echo '<h1>入力エラー</h1>';
        echo '<ul style="color: red;">';
        foreach ($errors as $error) {
            echo '<li>' . htmlspecialchars($error) . '</li>';
        }
        echo '</ul>';
        echo '<a href="javascript:history.back();">入力フォームに戻る</a>';
    } else {
        // エラーがない場合:確認画面を表示
        // ...(前の例の確認画面表示コード)...
    }
}
?>

この例では、`empty()`で各入力が空でないかをチェックし、`filter_var()`という便利な関数でメールアドレスの形式が正しいかを検証しています。エラーがあればメッセージを表示し、なければ確認画面に進む、というより実践的な流れになりました。

4. まとめと次のステップ

今回は、Webフォームの基本的な仕組みと、PHPを使ってデータを受け取り、確認画面を表示するまでの一連の流れを学びました。`$_POST`変数と`if`文による処理の分岐が、フォーム作成の核心部分です。メールを送信する機能はサーバーの設定なども関わるため少し複雑ですが、この入力から確認までの流れをマスターすれば、どんなフォームにも応用できます。

次のステップとしては、

などが挙げられます。これらはまた別の機会に詳しく解説します。まずは今回のコードを元に、自分だけのオリジナルフォームを作ってみてください!