今回はウェブサイト制作に欠かすことのできないフォームについて。
何かを問い合わせてみたり、また資料請求をしてみたり、あるいは、ユーザー登録や物品の購入、さまざまなシーンでフォームを利用する機会は多いのではないでしょうか。
ウェブサイトを運営していく上で、閲覧者とコンタクトを取るのに非常に重要な役割を果たすフォーム。
つまり、ウェブサイトを制作する際、なくてはならないものがフォームですよね。
そんなフォームの作り方を簡単に解説していきます。
formタグ
フォームを作成するには、formタグを使います。
フォームは、ボタンはもちろん、任意の文字入力ができるテキストボックス、ラジオボタンやチェックボックス、リスト形式のセレクトボックスといった部品で構成されます。
こういった各種部品については別の記事で解説しますが、これら各種部品を一つのかたまりと捉え、それをformタグを囲むことでフォームを作成していきます。
また、formタグにはいくつか属性があります。
以下の属性のうち、一般的なフォームを作成する場合には「action属性」と「method属性」をしっかり理解しておけば問題ないと思います。
action属性
ボタンは、フォームの構成要素に欠かせないものです。
フォームの中で、ボタンはクリックすることで、何らかの処理を実行し、他ページに遷移する役割も果たします。
ボタンをクリックした時に、ウェブサイトの遷移先のURLをこのaction属性で指定します。
URLはダブルクオーテーション（”）で囲んで指定しましょう。
method属性
サーバーに対しての要求を「リクエスト」と言います。
対して、サーバーからの応答を「レスポンス」と言います。
この「リクエスト」をサーバーに送る送信方法を指定するのがmethod属性になります。
リクエストの送信方法にはGET送信とPOST送信があります。
GET送信、POST送信については、下の記事をご覧ください。
method属性については、「method = “get”」、あるいは「method = “post”」と指定しましょう。
enctype属性
enctype属性は「エンコード・タイプ」と言い、フォームでデータを送信する時にどんな形式で送信するかを決めるためのものになります。
application/x-www-form-urlencoded
enctype属性を何も指定しない場合には、この「application/x-www-form-urlencoded」を指定したと見なします。
この「application/x-www-form-urlencoded」を指定すると、フォームで入力されたデータを「&」で区切って、サーバーに送信します。
「&」で区切ってデータを形成することを「URLエンコード」と言います。
「application/x-www-form-urlencoded」はURLエンコードする時に指定するenctype属性です。
multipart/form-data
フォームにファイルを送信する機能を組み入れる場合には、「multipart/form-data」とします。
text/plain
フォームで入力されたデータを、「プレーンテキスト」で送信する時に指定するenctype属性です。
プレーンテキストとは、単純に文字のことを言うのですが、文字の装飾やレイアウトなどの情報を一切持たず、全て文字列のみで構成されたデータのことを言います。
ただし、スペースのみ「＋」に変換されるようです。
実際の動作確認
それでは実際に簡単なフォームをPHPで作成してみましょう。
まずは、データ入力を促すページから作成していきます。
テキストボックスを構成するフォームを作成してみることにします。
ファイル名は、何でもよいのですが、ここでは「sample.php」としておきます。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>サンプルページ</title>
</head>
<body>
<form action="result.php" method="post">
<input type="text" name="sample" value="">
<input type="submit" value="送信">
</form>
</body>
</html>このファイルをブラウザで見てみると下のようになります。
テキストボックスに適当な文字列を入力して、送信ボタンをクリックするとデータが送信されるわけですが、送信先のファイルを「result.php」としておきます。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>サンプルページ</title>
</head>
<body>
<p><?php echo htmlspecialchars(@$_POST['sample'], ENT_QUOTES, 'UTF-8'); ?></p>
</body>
</html>では、sample.phpをブラウザで表示させて、フォームのテキストボックスに「フォーム送信テスト」と入力して送信ボタンをクリックしてみます。
そうすると、result.phpに遷移して、下図のような文字列が表示されます。
ちゃんと、フォームとして機能していますし、入力したデータが送信されることがおわかりいただけたと思います。
フォーム作成の基本は、構成要素をformタグで囲むことと、適切な属性をしっかりと指定してあげることです。
formタグの書き方は、どんなフォームを作成する場合でも、使い回しがきく、決まりきった書き方ですので、しっかりと理解した上で覚えてしまいましょう。
