今回は、実際にPHP + HTMLを用いてフォームを作っていきます。

問い合わせフォームやアンケートフォームなど、普段Webサイト上で目にするような機能はどのように処理が行なわれているのか分かるはずです。

Cloud9を使って実際に書いてみてください。

フォームの処理を実際に書いてみる

フォーム自体は様々なプログラミング言語、さらにはフレームワークを用いて作成する事ができますが、今回はPHP＋HTMLを用いて作成していきます。

先にソースコードをご覧いただきましょう。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
       <form action="index.php" method="post">
         名前: <input type="text" name="name" />
         年齢: <input type="text" name="age" />
         <input type="submit" />
       </form>
       こんにちは、<?php echo htmlspecialchars($_POST['name']); ?>さん。
       あなたは、<?php echo (int)$_POST['age']; ?> 歳です。
    </body>
</html>

このソースコードでは、名前と年齢を入力できるフォームを作り、「こんにちは、「名前」さん。あなたは、「年齢」歳です。」と入力した値を元に情報を出力してみます。

通常のWebサイトは、入力した値をデータベースに登録するような流れになるため、入力内容をユーザーにそのまま表示することはあまりありませんが、今回は分かりやすくその場で表示してみたいと思います。

名前に煌木太郎 と入力。年齢に30 と入力。

送信ボタンを押すと入力された情報が表示されます。

ソースコードのポイント

上掲ソースコードのポイントを補足しておきましょう。

postメソッド

<form action=”index.php” method=”post” >

前回の記事で、サーバーにリクエストを送る方法にget/postがあると説明しました。

今回フォームに入力する名前や年齢は外に漏れてはいけない個人情報なので、postを使用します。

inputタグ

名前: <input type=”text” name=”name” />
年齢: <input type=”text” name=”age” />
<input type=”submit” />

名前や年齢を入力するフォームは、「inputタグ」を使います。inputタグは、ボタンやフォームを作るためのタグで、今回は入力フォームと送信ボタンを設置するために使っています。

他にもチェックボックスやラジオボタン、ファイル選択ボタンなどを設置することができます。

PHPコード

こんにちは、<?php echo htmlspecialchars($_POST[‘name’]); ?>さん。
あなたは、<?php echo (int)$_POST[‘age’]; ?> 歳です。

「echo」は、文字列を出力するPHPの文法です。

それに続く「htmlspecialchars」は、「<」や「>」などの特殊文字を変換するための関数になります。ここでは、名前欄(name=”name”指定欄)に入力された文字列に「<」などが入っていた場合に、「&lt;」などの対応する特殊文字に自動で変換いたします。

特殊文字に変換するのは、入力された文字列をシステムやWebブラウザがプログラムとして実行しないようにするためです。サイバー攻撃の一つに、テキスト入力欄にプログラムを入力することで、システム内に保存されているデータを抜き出すという手法があります。「<」などのHTMLソースコードで用いるような文字列を特殊文字に変換することで、システムやWebブラウザがプログラムと認識できないようになり、攻撃を防ぐことができます。

一方、年齢のコードにある「(int)」という記述は、数値型と呼ばれるものです。この指定により数字以外が入力されても結果に反映されません。

今回はごく一部ですが、このようにあらゆる想定を考えて一つ一つ条件を設定することがWebサービスを作る上で大事になります。

他にも「何文字以内」や「空欄の場合エラー表示」など必要に応じて指定することができます。

*　　*　　*

今回は、実際にフォームを作成して処理の流れを見てみました。

今回のようなソースコードは頻繁に使われています。例えば、会員登録時に「～～さん、会員登録が完了しました。」とメールが送信されるシステムも、同じような仕組みで入力した情報を使い、メールを送信しています。

著者紹介


TechAcademy　(https://techacademy.jp/)

プログラミングやWebデザイン、アプリ開発が学べるオンラインスクールを運営。

TechAcademyマガジンでは、プログラミングやWebデザインなど技術に関する最新トレンド、ツールの使い方を紹介しています。開発作業や学習に役立つコンテンツがご覧になれます。

なお、本稿はTechAcademy の「はじめてのプログラミングコース」を元に解説しています。