【初学者が楽しく作る】PHPのフォーム確認画面を簡単に作成しよう

今日は、お問い合わせフォームの確認・完了画面を簡単に作っていきます。

「PHP できること」などで検索すると、よく目にすることが、「お問い合わせフォームの作成」です。

実際に現場で役立つフォームとなると、DBとの連携、セキュリティの問題や速度の問題など、web周りのたくさんの事柄が関わってきてしまいます。

そのため今回は、PHPを習い始めた方が、簡単なお問い合わせフォームを作成することで、PHPの便利さや楽しさを知ってもらおうと思っています。

今まで少しずつ学習を積み重ねてきた方は、ぜひ一緒に手を動かしながら進めてみてください。

今日の記事は、

  • HTMLとPHPだけでシンプルにフォームを作ってみたい
  • お問い合わせフォームってそもそもどうやって作るの?
  • フォーム作成の基礎を学びたい

こんな方におすすめの記事です。

それでは、一緒に学習していきましょう。

実際にフォームを書いてみよう

手を動かして作ってみると、「おー、動いてる!」っていう感覚になります。

その感覚が、プログラミング学習にとってとても大切なことなので、これからもぜひ大切にしていただきたいです。

以下、すぐ動かせるように3つのステップにわけて説明しています。

1. フォームを作るためのディレクトリを準備しよう

今回僕は、ホームディレクトリ直下にformというディレクトリを作成しました。

~$ mkdir form
~$ cd form

2. index.html、submit.phpを準備しよう

先ほど準備したformディレクトリの中に、以下2つのファイルを用意しました。

  • index.html
  • submit.php
form$ touch index.html
form$ touch submit.php

作成が終わったら、任意のテキストエディタで上記ファイルを開いてください。

3. 各ファイルにプログラムを書こう

最後は、それぞれのファイルにフォームのプログラムを書き込んでいきます。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <form action="submit.php" method="GET">
      <label for="my_name">お名前:</label>
      <input type="text" id="my_name" name="my_name" maxlength="255" value="">
      <p>性別:
        <input type="radio" name="gender" id="male" value="男性">男性
        \
        <input type="radio" name="gender" id="female" value="女性">女性
      </p>
      <p>お住まい:
        <select name="pref">
          <option value="北海道">北海道</option>
          <option value="青森">青森県</option>
        </select>
      </p>
      <p>カテゴリー:(複数選択可)<br>
        <input type="checkbox" name="category[]" id="category" value="製品について">製品について
        <input type="checkbox" name="category[]" id="category" value="その他">その他
      </p>
      <p>内容:</p>
        <textarea name="my_content" id="my_content" cols="30" rows="10"></textarea>
      <p>プライバシーポリシーに同意する:
        <input type="checkbox" name="agree" id="agree" value="on">同意する
      </p>
      <p>
        <input type="submit" value="送信する">
      </p>
    </form>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <pre>
            名前: <?php print(htmlspecialchars($_GET['my_name'], ENT_QUOTES)); ?><br>
            性別: <?php print(htmlspecialchars($_GET['gender'], ENT_QUOTES));?><br>
            住まい: <?php print(htmlspecialchars($_GET['pref'], ENT_QUOTES)); ?><br>
            カテゴリー: <?php
                            if ($_GET['category']) {
                                foreach ($_GET['category'] as $category) {
                                    print(htmlspecialchars($category."\t", ENT_QUOTES));
                                };
                            }
                        ?><br>
            内容: <?php print(htmlspecialchars($_GET['my_content'], ENT_QUOTES)); ?><br>
            同意: <?php print(htmlspecialchars($_GET['agree'], ENT_QUOTES)); ?>
        </pre>
    </body>
</html>

任意のPHPサーバーで立ち上げると、フォームが完成しているはずです。

CSSなんかも時間があるときに、ご自分で装飾してみてください。

初めて作った自分の作品は、忘れられない思い出になりますよ。

今回は、PHPでのform作成になるため、HTMLの説明は省略します。

気になる方がいれば、HTMLのリファレンスを参考にしてみてください。

$_GET、$_POST、$_REQUESTを学ぼう

フォームの作成で、とても重要になる変数が、以下3つの変数になります。

  1. $_GET
  2. $_POST
  3. $_REQUEST
<?php print(htmlspecialchars($_GET['my_name'], ENT_QUOTES)); ?><br>

ここの部分ですね。

この説明の前に、HTTPリクエストのGET通信とPOST通信の違いを簡単に確認しておきましょう。

GET通信とPOST通信の違い

HTTPリクエストには、いくつか種類があるのですが、とりわけ重要なものが、「GET通信」「POST通信」です。

難しく感じる方もいらっしゃる方もいますが、ここは目で見てると、とても簡単に感じます。

ご自身で作成したフォームに任意の文字を入力して、送信してみてください。

すると、URLが以下のような画像になったのがお分かりになりますでしょうか?

submit.php?my_name=&pref=北海道&my_content=

これが、GET通信です。

それでは、続いてPOST通信を見てみましょう。

まずは、index.htmlを以下のように変更してみてください。

変更前

<form action="submit.php" method="GET">

変更後

<form action="submit.php" method="POST">

それでは先ほどと同様、フォームに任意の文字を入力して送信してみましょう。

URLが以下の画像のようになりましたか?

※入力内容が反映されませんが、気になさらないでください。

~/submit.php

これが、GET通信とPOST通信の違いです。

  • GET通信は、URLにユーザーが入力した値が反映される
  • POST通信は、URLにユーザーが入力した値が反映されない

これが大きな違いです。

POST通信は、他のユーザーに見せたくない秘密の情報(パスワード)を送信するときに使用されると言われています。

つまり、ユーザーのプライバシーを守るために使われるのですね。

今回は、自作のものなので、GET通信で実装しています。

ここまで確認できたところで、PHPの説明に戻りましょう。

$_GETと$_POSTと$_REQUEST

これらは、それぞれのHTTPリクエストを受け取るために用意された変数です。

ここまできた皆さんなら$_GETと$_POSTはすぐに察しがつくはずです。

そう、その通りです。

$_GETがGET通信を受け取り、$_POSTがPOST通信を受け取ります。

では、後ろに続く値は何を指しているのでしょうか。

$_GET['my_name']
 <input type="text" id="my_name" name="my_name" maxlength="255" value="">

答えは、index.htmlのname属性を指しています。

name属性はフォームが送信された時に、ユーザーが入力した値のキーとしてデータを格納してくれます。

とても便利ですね。

では、$_REQUESTはどんな時に使用するのでしょうか。

結論、GET通信でもPOST通信でもその他の通信でも、どんな通信も受け取ってくれます

どんな通信でも受け取れるなら、「$_REQUESTを使用すればいいのでは?」と疑問が湧いてきますよね。

しかし、どんな通信でも受け取れるということは、たとえば悪意のあるユーザーが通信内容を変更してきた時はどうでしょうか?

簡単にフォームを乗っ取られてしまいますね。

ちなみに、javascriptという言語を使用すれば、簡単にHTTPリクエストを変更して、フォームを送信できます。

もし、機会があればその記事も書きますね。

そのため、便利だからと言って、安易に$_REQUEST変数を利用するのは、やめましょう。

htmlspecialchars関数を学ぼう

この関数も悪意あるユーザーから、情報を守るために使用されます。

ちょっと実験してみましょう。

名前: <?php print(htmlspecialchars($_GET['my_name'], ENT_QUOTES)); ?><br>

上記の部分を、

名前: <?php print($_GET['my_name']); ?><br>

に変更して、名前の入力欄に、

<h1><font color="red">test</font></h1>

と入力して送信ボタンを押してみてください。

どうでしょうか?

簡単に文字が変化してしまいました。

記述を元に戻して同様に送信すると、HTMLがそのまま出力されるはずです。

これをプログラミング用語で、

HTMLをエスケープする

というのでぜひ覚えてみてください。

プログラミングには、どこかに必ず脆弱な部分があって、それを補うように新しいプログラミングが生まれているんですね。

OSSの思想がとても垣間見れる一瞬でした。

そのため、このhtmlspecialchars関数は、悪意あるユーザーが規定外の書式を送れないようにしてくれます。

詳しくは、PHPのリファレンスを参考にしてみてください。

まとめ

  • HTTP通信は、主にGET通信とPOST通信がある
  • $_REQUESTはどんなHTTP通信も受け取れるが、デメリットもある
  • htmlspecialchars関数は、悪意あるユーザー対策のために使用する
  • プログラミングの安全性は、他のプログラミング言語で保証されている
  • 自分で作るとたくさんの気づきを得られる

この記事で初めてフォームを作りました!とても楽しかったです!

こんな方がいることを願っています。

今日も学習お疲れ様でした。

またがんばっていきましょう。

コメント

Comments are closed.