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

HTML　フォームの準備

フォーム部品の配置

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

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

HTMLコード

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <form>
    <p>お名前：<input type="text"></p>
    <p>性別：
      <input type="radio">男性
      <input type="radio">女性
    </p>
    <p>血液型：
      <select>
        <option>AB</option>
        <option>A</option>
        <option>B</option>
        <option>O</option>
      </select>
    </p>
    <p>ご意見：</p>
    <p><textarea cols="50" rows="5"></textarea></p>
    <p><input type="submit" value="送信"></p>
  </form>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<form>

<p>性別：

<input type="radio">男性

<input type="radio">女性

</p>

<p>血液型：

</select>

</p>

</form>

</body>

</html>

ブラウザでの表示

formタグ

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

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

inputタグ

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

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

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

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

selectタグ

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

textareaタグ

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

送信側HTMLの作成

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

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

HTMLコード

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <form action="get.php" method="get">
    <p>お名前：<input type="text" name="name"></p>
    <p>性別：
      <input type="radio" name="gender" value="男性">男性
      <input type="radio" name="gender" value="女性">女性
    </p>
    <p>血液型：
      <select name="blood">
        <option value="AB">AB</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="O">O</option>
      </select>
    </p>
    <p>ご意見：</p>
    <p><textarea name="opinion" cols="50" rows="5"></textarea></p>
    <p><input type="submit" name="submitBtn" value="送信"></p>
  </form>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>性別：

<input type="radio" name="gender" value="男性">男性

<input type="radio" name="gender" value="女性">女性

</p>

<p>血液型：

</select>

</p>

</form>

</body>

</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コード

<?php

  $page = $_GET["page"];
  echo "リクエストされたpageは" . $page;

?>

<?php

$page = $_GET["page"];

echo "リクエストされたpageは" . $page;

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

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

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

PHPコード

<?php

$name = $_GET["name"];
$gender = $_GET["gender"];
$blood = $_GET["blood"];
$opinion = $_GET["opinion"];

include "conf.html";

?>

<?php

$name = $_GET["name"];

$gender = $_GET["gender"];

$blood = $_GET["blood"];

$opinion = $_GET["opinion"];

include "conf.html";

HTMLコード

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <h1>入力内容確認</h1>
  <p>お名前：<?=$name?></p>
  <p>性別：<?=$gender?></p>
  <p>血液型：<?=$blood?></p>
  <p>ご意見：<?=$opinion?></p>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>入力内容確認</h1>

</body>

</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コード

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <form action="post.php" method="post">
    <p>お名前：<input type="text" name="name"></p>
    <p>性別：
      <input type="radio" name="gender" value="男性">男性
      <input type="radio" name="gender" value="女性">女性
    </p>
    <p>血液型：
      <select name="blood">
        <option value="AB">AB</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="O">O</option>
      </select>
    </p>
    <p>ご意見：</p>
    <p><textarea name="opinion" cols="50" rows="5"></textarea></p>
    <p><input type="submit" name="submitBtn" value="送信"></p>
  </form>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>性別：

<input type="radio" name="gender" value="男性">男性

<input type="radio" name="gender" value="女性">女性

</p>

<p>血液型：

</select>

</p>

</form>

</body>

</html>

PHPコード

<?php

$name = $_POST["name"];
$gender = $_POST["gender"];
$blood = $_POST["blood"];
$opinion = $_POST["opinion"];

include "conf.html";

?>

<?php

$name = $_POST["name"];

$gender = $_POST["gender"];

$blood = $_POST["blood"];

$opinion = $_POST["opinion"];

include "conf.html";

まとめ

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

【初心者向け】PHP データベースに接続して操作する方法を解説

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

HTML　フォームの準備

フォーム部品の配置

送信側HTMLの作成

データ送受信の種類

GETメソッド

POSTメソッド

まとめ

コメントを残すコメントをキャンセル

プロフィール

最近の投稿

最近のコメント

アーカイブ

カテゴリー

HTML フォームの準備

フォーム部品の配置

送信側HTMLの作成

データ送受信の種類

GETメソッド

POSTメソッド

まとめ

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

AnacondaでPythonに入門してみました！

【初心者向け】Python 基本的な型を理解しよう！

MacのターミナルからVisual Studio Codeを起動する

【初心者向け】PHP 基本の型を理解しよう！

【JavaScript】簡単なスライドショー機能を実装してみる

【初心者向け】Python 条件分岐を理解しよう！

【初心者向け】PHP 繰り返し処理を理解しよう！

【p5js】自分だけのオリジナルパズルを簡単に作成する方法を解説します！

プロフィール

最近の投稿

最近のコメント

アーカイブ

カテゴリー

HTML　フォームの準備

コメントを残すコメントをキャンセル