HTMLフォームからPHPへ!データの送受信の基本とセキュリティ対策を徹底解説

Webサイト制作において、ユーザーが入力した情報を受け取り、表示する「フォーム」機能は欠かせません。お問い合わせフォーム、会員登録、検索ボックスなど、あらゆる場面でこの技術が使われています。

この裏側では、ユーザーが操作するHTMLと、サーバー側でデータを処理するPHPが連携して動いています。

この記事では、「読書記録フォーム」を例に、HTMLで入力フォームを作成し、そのデータをPHPで安全に受け取って表示するまでの一連の流れを、初心者の方にも分かりやすく解説します。


目次

データを送信する「顔」:HTMLフォームの作成

まずは、ユーザーが情報を入力するためのフォームをHTMLで作成します。フォーム作りには主に<form>タグと、その中に配置する<input>などのタグを使用します。

<form>タグには、**「どこに」「どうやって」**データを送るのかを指定する、2つの重要な属性があります。

  • action属性: フォームのデータを送信する送り先のPHPファイル名を指定します。
  • method属性: データの送り方を指定します。「POST」と「GET」の2種類がありますが、一般的にフォームでは内容がURLに表示されない「POST」方式を使います。

それでは、様々な入力部品を配置した「読書記録フォーム」の完成形を見てみましょう。このコードをform.htmlという名前で保存してください。

サンプルコード (form.html):

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>読書記録フォーム</title>
</head>
<body>
    <h1>読書記録フォーム</h1>
    <form action="receive.php" method="post">
        <p>
            書籍名: <input type="text" name="book_title" required>
        </p>
        <p>
            ジャンル:
            <select name="genre">
                <option value="">選択してください</option>
                <option value="小説">小説</option>
                <option value="ビジネス">ビジネス</option>
                <option value="自己啓発">自己啓発</option>
            </select>
        </p>
        <p>
            評価:
            <input type="radio" name="rating" value="⭐">⭐
            <input type="radio" name="rating" value="⭐⭐">⭐⭐
            <input type="radio" name="rating" value="⭐⭐⭐" checked>⭐⭐⭐
            <input type="radio" name="rating" value="⭐⭐⭐⭐">⭐⭐⭐⭐
            <input type="radio" name="rating" value="⭐⭐⭐⭐⭐">⭐⭐⭐⭐⭐
        </p>
        <p>
            感想:<br>
            <textarea name="impression" cols="40" rows="5"></textarea>
        </p>
        <p>
            <input type="submit" value="記録を送信">
        </p>
    </form>
</body>
</html>

ポイント: 各入力部品に付けられたname属性(例: name="book_title")が、PHP側でデータを受け取る際の「荷札」の役割を果たします。


データを受け取る「頭脳」:PHPスクリプトの作成

次に、form.htmlからPOST方式で送られてきたデータを受け取るためのPHPファイルを作成します。action属性で指定した通り、receive.phpという名前で保存しましょう。

PHPでは、POSTで送信されたデータは$_POSTという特別な変数に、連想配列として自動的に格納されます。$_POSTの中から、HTMLのname属性をキー(荷札)として指定することで、個々のデータを取り出すことができます。

サンプルコード (receive.php):

<?php
// POSTデータから各値を取得し、変数に代入する
// htmlspecialchars() を使い、安全な形にエスケープ処理する
$book_title = htmlspecialchars($_POST['book_title'], ENT_QUOTES, 'UTF-8');
$genre      = htmlspecialchars($_POST['genre'], ENT_QUOTES, 'UTF-8');
$rating     = htmlspecialchars($_POST['rating'], ENT_QUOTES, 'UTF-8');
$impression = htmlspecialchars($_POST['impression'], ENT_QUOTES, 'UTF-8');
?>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>読書記録 - 確認画面</title>
</head>
<body>
    <h1>以下の内容で記録しました</h1>
    <p><strong>書籍名:</strong> <?php echo $book_title; ?></p>
    <p><strong>ジャンル:</strong> <?php echo $genre; ?></p>
    <p><strong>評価:</strong> <?php echo $rating; ?></p>
    <p><strong>感想:</strong></p>
    <p><?php echo nl2br($impression); // nl2br()は改行を<br>タグに変換する関数 ?></p>
    <br>
    <a href="form.html">フォームに戻る</a>
</body>
</html>

最重要ポイント: ユーザーが入力した内容を画面に表示する際は、必ずhtmlspecialchars()という関数を使いましょう。これは、<>などのHTMLタグとして意味を持つ文字を、無害な文字列(例: &lt; &gt;)に変換(エスケープ)する処理です。これを怠ると、クロスサイトスクリプティング(XSS) と呼ばれるセキュリティ上の深刻な欠陥(脆弱性)の原因となり、サイトが攻撃される危険性があります。


動作を確認してみよう

それでは、作成した2つのファイルを連携させて動かしてみましょう。

  1. MAMPなどのローカル開発環境の公開フォルダ(htdocs)に、form.htmlreceive.phpを設置します。
  2. ブラウザで http://localhost:8888/form.html のようなURLにアクセスし、フォームを表示します。
  3. フォームに好きな内容を入力し、「記録を送信」ボタンをクリックします。
  4. receive.phpに画面が遷移し、入力した内容が表示されていれば成功です。

まとめ

今回は、HTMLのフォーム機能とPHPの連携について、その基本を学びました。

  • HTMLの<form>でデータの送り先(action)と送り方(method)を指定する。
  • 各入力部品にはPHPで識別するためのname属性を必ず付ける。
  • PHPでは$_POST変数でデータを受け取る。
  • ユーザーの入力値を画面に出力する際は、必ずhtmlspecialchars()でエスケープ処理をする。

このデータの送受信は、Webアプリケーション開発のまさに第一歩です。次のステップでは、この受け取ったデータをファイルや**データベース(MySQLなど)**に保存していくことになります。まずはこの基本をしっかりとマスターしましょう。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

私が勉強したこと、実践したこと、してることを書いているブログです。
主に資産運用について書いていたのですが、
最近はプログラミングに興味があるので、今はそればっかりです。

目次