フォームに入力した内容を取得する

この研修では、htdocs/LetsEngineer/curriculum/2-11フォルダに課題を作成してください。
今回の研修では、よくある入力フォームを作成し、その内容を次のページで表示させることを実施します。

入力フォームの作成


それではまず、index.phpを作成し、そこに下記のソースコードをコピペしてください。

<form action="result.php" method="get">
  名前:<input type="text" name="my_name" />
  <br>
  パスワード:<input type="password" name="password" />
  <br>
  <input type="submit" value="送信" />
</form>

 

また、同じフォルダにresult.phpというファイルを作成し、下記をコピペしてください。

<?php
$my_name = $_GET['my_name'];
$password = $_GET['password'];
?>
<p>私の名前は、<?php echo $my_name; ?></p>
<p>私のパスワードは、<?php echo $password; ?></p>

このページを表示すると、冒頭の写真のような入力フォームができていると思います。
http://localhost/LetsEngineer/curriculum/2-11/index.php

入力欄に何か入力して送信してみましょう。
画面が変わり、その文字が表示されたと思います。

index.phpの説明


さて、既にお気付きかもしれませんが、このソースコードにはPHPの部分がありません。
HTMLだけで構成されております。
こういう入力フォームは formタグ を使用して作成します。

それでは上からソースコードを見ていきます。

<form action="result.php" method="get">

<!-- 省略 -->

</form>

このワンセットが formタグ です。
この中に入力欄を作成することで、ページ間のデータの受け渡しをすることが可能です。

formタグには設定しなければならない属性があります。

  • action・・・データを渡す先のページ(ボタンを押すと、そのページに移ります。)
  • method・・・通信するプロトコル(手段)を指定します。後ほど解説しますが、今回は GET で送ります。

さて、それでは中身を見ていきましょう。

  名前:<input type="text" name="my_name" />
  <br>
  パスワード:<input type="password" name="password" />
  <br>
  <input type="submit" value="送信" />

<br>はもういいですね?
その場所で改行しています。

さて、重要なのはinputです。
インプットというくらいなので、入力を示していることはなんとなく分かるかと思います。

このinputタグはそれ自体が入力フォームであるため、閉じタグは必要ありませんが、分かりやすくタグの最後で/>としてあげます。(このタグはここで終わりだよ、という印)
また、formと同様、設定しておくべき属性があります。

type


これは入力欄の種類を指定します。
例えば、今回のケースでいえば、名前はtype="text"、パスワードはtype="password"となっています。

入力してみると、名前の方は普通に入力できますが、パスワードの方は黒丸で隠れてしまいます。
このtype属性にはまだまだ種類があります。
今回は解説しませんが、気になる方は調べてみましょう。
HTMLタグクイックリファレンス-input-

name


次のページに送る際に、入力した値を箱に入れるイメージを持ってください。
その箱につける名前を決めることができます。
(この辺りは変数とデータ型のときやった、変数のイメージと同様で大丈夫です。)

今回で言えば、

  • my_nameという箱・・・名前の入力欄に入力した値が入っている。
  • passwordという箱・・・パスワードの入力欄に入力した値が入っている。

この箱を、この後のresult.phpで受け取ります。

result.phpの説明


<?php
$my_name = $_GET['my_name'];
$password = $_GET['password'];
?

さて、本項のキモはここです。
GETで送信された値を受け取るためには、$_GETを使用します。
そこで、先ほどname属性で名付けた箱を指定することで、その中に入っている値を取得できます。
ちなみに、$_GETには連想配列でそれぞれの箱が収納されているので、下記で全体を確認することも可能です。

var_dump($_GET);

 

あとは大丈夫ですね?
変数に入れた値をHTMLに埋め込んで出力させています。

GETとPOST


formタグのmethod属性ですが、主に GETPOST の2種類があります。
先ほど作成したものはmethod=getなので、 GET通信 になります。

入力フォームに値を入力し、「送信」ボタンを押した後のURLを見てみましょう。

先ほど送信したデータが?より後ろについています。
このように、送信したデータの値を見ることができるのがGETの特徴です。

とはいえ、パスワードなど、見られたくない情報もありますよね?
そういうときに使用するのが POST です。

POST通信を試してみましょう。
まずは、index.phpformタグmethod属性をpostにします。

<form action="result.php" method="post">

次に、result.php$_GET$_POSTに修正します。
POSTで送られてきた値は$_POSTで受け取ります。

<?php
$my_name = $_POST['my_name'];
$password = $_POST['password'];
?>

さて、これでもう1度試してみましょう。
今度はURLに?以降がついていないと思います。

GETとPOSTの使い分け


「見える」ということは「書き換える」ことも可能です。
このように、「見られたくない」、「書き換えられたくない」データはPOSTで送信します。

また、大量のデータを送信する場合もPOSTで送信します。

課題


  • 本項で作成した入力フォームに、新たにemailを追加しましょう。
  • POSTで送信してください。
  • inputタグのtype属性はtextです。
  • name属性は自由に設定してください。

IT用語 SESに向けて準備しよう


3章では一つ一つの項目で数個のIT用語について調べていただきます。
どの用語もSESでよく耳にする言葉なのできちんと調べていきましょう!

下記の用語について、調べてみましょう。
※IT用語についてはチェックテストの範囲外です。

1. 仕様書・設計書
2. Git
3. マージツール

用語の意味を調べて同じく2-11フォルダ内に記載してください。
Hello Worldでやった時のように用語については記載するようにしてください。

カテゴリー

アーカイブ

Close Bitnami banner
Bitnami