【初心者向け】PHP 入力フォームを作成してみよう!

HTML フォームの準備

フォーム部品の配置

HTMLフォームには、テキストボックスやテキストエリア、ラジオボタンなどがあります。フォーム部品を組み合わせることで、ログイン画面やお問い合わせ画面を作成することができます。

次のサンプルコードに示すように、フォームはいくつかのHTMLタグから構成されます。ここで基本的なフォーム備品について簡単に説明します。

HTMLコード

ブラウザでの表示

formタグ

どの範囲がフォーム部品かを示しているタグです。formタグでは、次のようにaction属性とmethod属性を指定することで、データ送信先のURLと送信の方法を指定することができます。

<form action=”データの送信先” method=送信方法>

データの送信先には、データの送り先のファイル名を指定して、送信方法には「POSTメソッド」か「GETメソッド」のどちらで送信するかを指定します。

inputタグ

入力フォームを作成するのに使用するタグです。type属性で、どういった入力フォームにするか、指定できます。今回のサンプルコードでは、テキストボックス、ラジオボタン、送信ボタンのタイプを指定しました。

type属性にtextを指定すると、テキストボックスになります。name属性では、テキストボックスに入力された文字列を格納する変数名を指定することができます。

<input type=”text” name=”変数名” >

type属性にradioを指定すると、ラジオボタンになります。name属性で変数名、value属性で変数に格納される値を指定できます。

<input type=”radio” name=”変数名” value=”送信される値”>

type属性にsubmitを指定すると、送信ボタンになります。value属性がボタン上に表示される文字列になります。name属性で変数名を指定することもできます。このボタンを押すと、formタグで指定したURLにデータが送信されます。

<input type=”submit” name=”変数名” value=”ラベル名”>
selectタグ

セレクトボックス(プルダウンメニュー)を作るためのタグです。selectタグに挟まれたoptionタグが選択肢になります。name属性で入力された値を格納する変数名、value属性で変数に格納される値を指定することができます。

<select name=”変数名”>
<option value=”送信される値”>
textareaタグ

テクストエリアを作成するのに使用するタグです。name属性で入力された値を格納する変数名を指定できます。

<textarea name=”変数名”>

送信側HTMLの作成

先ほど示したサンプルコードでは、データの送信先や送信方法、変数名、送信する値といった情報を記述していませんでした。これらの情報をコードに追記すると、送信側のHTMLは次のようになります。

このコードでは、「get.php」というファイルに「getメソッド」で入力データを送信するように指定しています。データを受け取る「get.php」はまだ作成していませんので、「送信ボタン」を押すとエラーが出ると思います。

HTMLコード

データ送受信の種類

入力フォームのデータを送信する方法には、GETメソッドとPOSTメソッドがあります。ここでそれぞれの方法について説明します。

GETメソッド

GETメソッドは、URLにパラメータを含める送信方法で、URLの末尾に「?パラメータ名=値」と言う形式でデータを付与します。例えば、URLで「?page=10」というパラメータが指定されたとすると、呼び出されたプログラムではpageという変数に10が格納されている状態になり、その値を使うことができます。次にGETリクエストを受け取る簡単なサンプルコードを示します。

3行目の$_GETはスーパーグロバル変数と呼ばれるもので、プログラムのどこからでもアクセスできる変数です。$_GETは連想配列で、URLで指定されたパラメータ名をキーとして値を取得できます。

webブラウザに「http://localhost/get_sample.php?page=10」のように入力してプログラムを実行すると、「リクエストされたpageは10」と表示されます。

PHPコード

次にform.htmlからデータを受け取るPHPプログラムを作成してみます。先ほどのHTMLで、データ送信先を「get.php」としたので、ファイル名はこれに合わせます。

次に示すPHPコードの3〜6行目で受け取ったデータを各変数に格納しています。8行目では、「conf.html」というHTMLファイルを読み込んで、受け取ったデータの表示を行なっています。

HTMLコードの9〜12行目にPHPの変数が埋め込まれていて、ここに受け取ったデータが入ります。このため実行結果のような画面が表示されます。

PHPコード

HTMLコード

ブラウザでの表示(入力画面)

ブラウザでの表示(確認画面)

POSTメソッド

次にPOSTメソッドについて説明します。POSTメソッドは、お問い合わせファームやショッピングサイトで名前や住所などを入力する場合によく利用されます。GETメソッドのように、URLにパラメータが表示されません。

先ほど作成したPHPコードとHTMLコードをPOSTメソッドでデータをやりとりするように書き換えてみます。

まずHTMLコードの方ですが、8行目のデータ送信先と方法を変更しています。POSTメソッドで「post.php」というファイルにデータを送るようにしました。PHPコードにpost.phpの内容を示しています。get.phpと違うのは、3〜6行目のスーパーグローバル変数が$_POSTに変わっていることだけです。ブラウザでの表示結果はGETメソッドと同様ですが、URLに送信したパラメータが含まれていないことを確認してみてください。

HTMLコード

PHPコード

まとめ

今回はPHPとHTMLを使った「入力フォームの作成」について扱いました!次回は「データベース操作」について扱う予定です!!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です