今回は、実際に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 の「はじめおのプログラミングコヌス」を元に解説しおいたす。