Apache+PHPによる+PostgreSQLによるWebアプリケーション
−入門編−
第5章 インタラクティブなWebページ
前へ | 目次へ |次へ
5.1 HTMLフォームを使ったデータの入力とWebサーバ側での受信
5.2 URLによるデータの送受信
5.3 HTMLフォームを使ったデータの再表示

5.1 HTMLフォームを使ったデータの入力とWebサーバ側での受信

■HTMLフォーム

 クライアントのブラウザに表示されているWebページからデータを入力して、Webサーバにデータを送信することができます。このとき、HTMLの<form>タグを使います。<form>タグを使ったデータの入力様式をHTMLフォームといいます。HTMLフォームにはたとえば次のようなコントロールがあります。

・テキスト       1行の文字列を入力します
・ラジオボタン    複数の項目のうちの一つをオンにします
・チェックボックス  複数の項目のなかの任意の項目をオンにします
・テキストエリア   複数行の文字列を入力します
・選択メニュー    複数の一覧メニューから一つを選択します
・隠し項目      Webページには表示しないで、値のみをWebサーバに送信します、
・送信ボタン     HTMLフォームのデータをWebサーバに送信します

 各コントロールにはフィールド名をつけて識別します。

■メソッド

 HTMLフォームは<form>タグで始まり、</form>タグで終わります。<form>タグでは、WebページからWebサーバに向けてどのような方法でデータを送信するのか送信方法を指定する必要があります。これをメソッドといいます。メソッドにはGETメソッドとPOSTメソッドがあります。

 また、Webサーバに送信したデータをどのPHPファイルに引き継ぐのかも指定する必要があります。これにはACTION属性を使います。

■GETメソッド

 GETメソッドを使う場合、次のように記述します。

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

 つまり、これから記述するHTMLフォームのデータは送信ボタンがおされたときに、GETメソッドを用いて”file.php”というPHPファイルに引き継ぎなさいという意味になります。GETメソッドの場合、引き継がれるデータはURLに付加された形でWebサーバに送信され、次のPHPファイルに渡されます。たとえば、

URL http://www.abc.com/apl/file2.php?menu=main&id=12

の場合は、次に実行されるPHPファイルは"www.abc.com"というWebサーバの"/apl/file2.php"というPHPファイルで、引き継ぐデータはmenuという変数の値が"main"で、idという変数の値が12ということになります。

 GETメソッドで受信されたフォーム内のコントロールのデータをPHPで参照するには、次の書式とします。

$_GET["フィールド名"]

【注意】$_GET( )でなく、$GET_[ ]です。

■POSTメソッド

 POSTメソッドを使う場合、次のように記述します。

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

 つまり、これから記述するHTMLフォームのデータは送信ボタンがおされたときに、POSTメソッドを用いて”file.php”というPHPファイルに引き継ぎなさいという意味になります。POSTメソッドの場合、引き継がれるデータは標準入出力によりWebサーバに送信され、次のPHPファイルに渡されます。

 POSTメソッドで受信されたフォーム内のコントロールのデータをPHPで参照するには、次の書式とします。

$_POST["フィールド名"]

【注意】$_POST( )でなく、$POST_[ ]です。

■テキスト

 リスト5.1のPHPファイルform.phpは1行のテキストを入力するHTMLフォームをWebページに表示するためのPHPファイルです。

<input name="data" size=20>

は、テキスト入力コントロールを表示するためのHTMLタグで、type="text"が省略されています。nameは入力されたデータを格納するフィールド名です。sizeはテキスト入力コントロールの長さを半角文字数で示します。

<input type="submit" value=" OK ">

は、送信ボタンを表示するためのHTMLタグです。ボタンにはvalueの値が表示されます(図5.1)。

リスト5.1 form_text.php

<html>
<head>
<title>form_text.php</title>
<!-- form:テキスト -->
</head>
<body>
<form action="form_text2.php" method="post">
  入力:<input name="data" size=20>
  <input type="submit" value=" OK ">
</form>
</body>
</html>

 リスト5.1のPHPファイルでは、「OK」ボタンがクリックされると、次にform_text2.phpファイルを起動するようになっています。リスト5.2はそのform_text2.phpファイルのリストです。

リスト5.2 form_text2.php

<html>
<head>
<title>form_text2.php</title>
<!-- form:テキストデータの受信 -->
</head>
<body>
<?php
 print "入力データは[";
 print $_POST["data"];      // POSTメソッドでのフォームデータの受信
 print "]です。<br>";
?>
</body>
</html>

$_POST["data"]

は、HTMLフォームの中のフィールド名「data」の値をPOSTメソッドで取得(受信)するための文です。ここでは、受信したデータをそのままWebページに表示するようにしています。

 リスト5.1のfrom_text.phpファイルにアクセスすると、図5.1のWebページが表示されます。


図5.1

 テキスト入力コントロールに文字を記述し(図5.2)「OK」ボタンをクリックすると、リスト5.2のform_text2.phpファイルが起動され、form_text2.phpファイルは図5.3のWebページを生成します。


図5.2


図5.3

 form_text.phpファイルで入力された文字列「今日は」が、form_text2.phpファイルに正しく引き継がれていることがわかります。

 なお、form.text2.phpファイルは、リスト5.3のform.text2a.phpファイルのようにあるいはリスト5.4のform.text2b.phpファイルのように記述することもできます。

リスト5.3 form_text2a.php

<html>
<head>
<title>form_text2a.php</title>
<!-- form:テキストデータの受信 -->
</head>
<body>
入力データは[<?php print $_POST["data"];?>]です。
</body>
</html>

リスト5.4 form_text2b.php

<html>
<head>
<title>form_text2b.php</title>
<!-- form:テキストデータの受信 -->
</head>
<body>
入力データは[<?=$_POST["data"];?>]です。
</body>
</html>

■ラジオボタン

 リスト5.5のform_radio.phpファイルは、ラジオボタンを表示するためのPHPファイルの例です。次に起動するファイルとしては、前と同じform_text2.phpファイルを使用しています。

 同じnameをもつinputタグで一つのグループを作り、その内の一つが排他的に選択されます。

<input="radio" name="data" VALUE="男">1.男

リスト5.5 form_radio.php

<html>
<head>
<title>form_radio.php</title>
<!-- form:ラジオボタン -->
</head>
<body>
<form action="form_text2.php" method="post">
  入力:<br>
  <input type="radio" name="data" value="男">1、男
  <input type="radio" name="data" value="女">2、女
  <input type="submit" value=" OK ">
</form>
</body>
</html>

 リスト5.5のform_radio.phpファイルにアクセスすると、図5.4のWebページが表示されます。


図5.4

 たとえば、図5.5のように「1.男」のラジオボタンをオンにして、「OK」ボタンをクリックすると、図5.6のWebページが表示され、フィールド名「data」には、「男」が代入されていることがわかります。


図5.5


図5.6

 選択された項目の値を文字列でなく、数値にする場合は、リスト5.6のように記述します。結果は図5.7のようになります。

リスト5.6 form_radio2.php

<html>
<head>
<title>form_radio2.php</title>
<!-- form:ラジオボタン -->
</head>
<body>
<form action="form_text2.php" method="post">
  入力:<br>
  <input type="radio" name="data" value="1">1、男
  <input type="radio" name="data" value="2">2、女
  <input type="submit" value=" OK ">
</form>
</body>
</html>


図5.7

■チェックボックス

 リスト5.7のform_check.phpファイルは、チェックボックスを表示するためのPHPファイルの例です。次に起動するファイルとしては、form_check2.phpファイルを使用しています。

 チェックボックスのコントロールの書式は次のようにします。

<input type="checkbox" name="arr_data[0]" value="1">1、Windows

 typeは"checkbox"で、nameは"arr_data[0]"のように配列形式にします。PHPファイルで受信する場合は次のように記述します。受信して代入する変数も配列型となります。

$arr_data = $_POST["arr_data"];

 具体的には、以下のように代入されます。

$arr_data[0] = $_POST["arr_data"][0];
$arr_data[1] = $_POST["arr_data"][1];
$arr_data[2] = $_POST["arr_data"][2];

リスト5.7 form_check.php

<html>
<head>
<title>form_check.php</title>
<!-- form:チェックボックス -->
</head>
<body>
<form action="form_check2.php" method="post">
使用中のOSを選択してください(複数可能)。<br>
<input type="checkbox" name="arr_data[0]" value="1">1、Windows
<input type="checkbox" name="arr_data[1]" value="2">2、UNIX
<input type="checkbox" name="arr_data[2]" value="3">3、LINUX
  <br>
<input type="submit" value=" OK ">
</form>
</body>
</html>

 リスト5.8にform_check2.phpファイルを示します。

リスト5.8 form_check2.php

html>
<head>
<title>form_check2.php</title>
<!-- form:チェックボックスデータの受信 -->
</head>
<body>
<?php
 $arr_data = $_POST["arr_data"];       /* POSTメソッドでの
                             フォームデータの受信。
                             配列型のデータとなる。 */
 print "入力データは以下です。<br>";
 foreach ( $arr_data as $key => $val ) {
   print "[$key]=$val<br>";
 }
?>
</body>
</html>

 リスト5.7のform_check.phpファイルにアクセスすると、図5.8のWebページが表示されます。


図5.8

 たとえば、図5.9のように、1番目と3番目のチェックボックスをチェックして「OK」ボタンをクリックすると、図5.10のようにWebページが表示され、配列$arr_data[]の1番目と3番目にデータが入っていることがわかります。


図5.9


図5.10

■テキストエリア

 リスト5.9のform_textarea.phpファイルは、テキストエリアを表示するためのPHPファイルの例です。次に起動するファイルとしては、form_textarea2.phpファイルを使用しています。

 テキストエリアのコントロールを記述するHTMLタグの書式はたとえば次の通りです。

<textarea name="data" rows="5" cols="40"></textarea>

 <input>タグでなく<textarea>タグを使用します。「rows」属性でテキストエリアの行数を「cols」属性で文字数(半角換算)を設定します。最後に</textarea>タグが必要です。なお、下記のように

<textarea name="data" rows="5" cols="40">文字列</textarea>

<textarea>タグと</textarea>タグの間に文字列を記述すると、テキストエリアに初期値として表示されます。

リスト5.9 form_textarea.php

<html>
<head>
<title>form_textarea.php</title>
<!-- form:テキストエリア -->
</head>
<body>
<form action="form_textarea2.php" method="post">
入力:<br>
<textarea name="data" rows="5" cols="40"></textarea>
<br>
<input type="submit" value=" OK ">
</form>
</body>
</html>

 リスト5.10にform_textarea2.phpファイルを示します。テキストエリアに受信データを表示するために、次のように記述していますす。

<textarea name="data" rows="5" cols="40"><?=$_POST["data"]?></textarea>

<?=$_POST["data"]?>の部分はPHPのスクリプトで、<?php print $_POST["data"]; ?>と同義です。つまりブラウザにPOSTメソッドで受信したデータを折り返し出力しています。この出力された文字列は、テキストエリア内に表示されます。

リスト5.10 form_textarea2.php

<html>
<head>
<title>form_textarea2.php</title>
<!-- form:テキストエリアデータの受信 -->
</head>
<body>
<form action="form_textarea2.php" method="post">
入力データは以下です。<br>
<textarea name="data" rows="5" cols="40"><?=$_POST["data"]?></textarea>
<br>
<input type="submit" value=" OK ">
</form>
</body>
</html>

 リスト5.9のform_textarea.phpにアクセスすると、図5.11のWebページが表示されます。


図5.11

 たとえば、図5.12のように記入して、「OK」ボタンをクリックすると、図5.13のようにWebページが表示され、テキストエリアデータが受信されたことが確認できます。


図5.12

■選択メニュー

 リスト5.11のform_menu.phpファイルは、選択メニューを表示するためのPHPファイルの例です。次に起動するファイルとして、form2.phpファイルを使用しています。

 選択メニューのコントロールの書式は、たとえば以下のようにします。

  <select name="data">
    <option value="1">PHP</option>
    <option value="2">Perl</option>
    <option value="3">C++</option>
  </select>

 まず、<select>タグでフィールド名を定義します。次に<option>タグで選択肢を順次定義します。最後は</select>タグで閉じます。

リスト5.11 form_menu.php

<html>
<head>
<title>form_menu.php</title>
<!-- form:選択メニュー -->
</head>
<body>
<form action="form_text2.php" method="post">
  選択してください:<br>
  <select name="data">
    <option value="1">PHP</option>
    <option value="2">Perl</option>
    <option value="3">C++</option>
  </select>
  <input type="submit" value=" OK ">
</form>
</body>
</html>

 リスト5.11のform_menu.phpファイルにアクセスすると、図5.13のWebページが表示されます。


図5.13

 選択メニューコントロールの下向き矢印をクリックすると、図5.14のようにドロップダウン形式の選択メニューが表示されます。その内の1個のメニューたとえば2番目の「Perl」を選択し、図5.15のように「OK」ボタンをクリックします。その結果、図5.16のように値「2」が受信されたことが確認できます。


図5.14


図5.15


図5.16

■選択メニュー(複数選択可能)

 選択メニューは、同時に複数選択可能な形式もあります。リスト5.11のform_menu2.phpファイルは、複数選択型の選択メニューを表示するためのPHPファイルの例です。次に起動するファイルはform_menu2a.phpです。

 複数選択型の選択メニューコントロールの記述例を次に示します。

<select name="data[]" multiple size="3">

 受信するデータは配列型とするので、<select>タグ内のname属性に設定するフィールド名は"data[]"のように、変数名の後に「[]」をつけます。また、multiple属性を記入します。複数選択型メニューの場合、メニューはドロップダウン形式ではなくリスト表示とします。リストの行数をsize属性で指定します。

リスト5.12 form_menu2.php

<html>
<head>
<title>form_menu2.php</title>
<!-- form:複数選択型選択メニュー -->
</head>
<body>
<form action="form_menu2a.php" method="post">
  選択してください(複数可能):<br>
  <select name="data[]" multiple size="3"> <!-- multipleを記述 -->
    <option value="1">PHP</option>
    <option value="2">Perl</option>
    <option value="3">C++</option>
  </select>
  <input type="submit" value=" OK ">
</form>
</body>
</html>

 リスト5.13はform_menu2a.phpファイルです。

リスト5.13 form_menu2a.php

<html>
<head>
<title>form_menu2a.php</title>
<!-- form:複数選択メニューの受信 -->
</head>
<body>
<?php
  $arr_data = $_POST["data"];     /* POSTメソッドでの
                          フォームデータの受信。
                          配列型のデータとなる。 */
  print "入力データは以下です。<br>";
  foreach ( $arr_data as $key => $val ) {
    print "[$key]=$val<br>";
  }
?>
</body>
</html>

 リスト5.12のform_menu2.phpにアクセスすると、図5.17のWebページが表示されます。


図5.17

 Ctrlキーを押しながらたとえば1番目と3番目のメニューを選択し、「OK」ボタンをクリックします。


図5.18

 図5.19のWebページが表示され、配列に選択した「1」と「3」が格納されたことがわかります。


図5.19

■パスワード

 リスト5.13のform_password.phpファイルは、パスワードコントロールをWebページに表示するためのPHPファイルの例です。次に起動するファイルをform_password2.phpとしています。

パスワードコントロールの書式を次に示します。

<input type="password" name="user_passwd" size=20>

type属性に"password"と記述します。あとは、テキストコントロールと同じです。

リスト5.13 form_password.php

<html>
<head>
<title>form_password.php</title>
<!-- form:パスワード -->
</head>
<body>
 <form action="form_password2.php" method="post">
   ユーザ名 :
   <input type="text" name="user_name" size=20><br>
   パスワード:
   <input type="password" name="user_passwd" size=20><br>
   <input type="submit" value=" OK ">
 </form>
</body>
</html>

 リスト5.14はform_password2.phpファイルです。

リスト5.14 form_password2.php

<html>
<head>
<title>form_password2.php</title>
<!-- form:パスワードデータの受信 -->
</head>
<body>
  ユーザ名 は[<?=$_POST["user_name"];?>]です<br>
  パスワードは[<?=$_POST["user_passwd"];?>]です。
</body>
</html>

 リスト5.13のform_password.phpファイルにアクセスすると、図5.20のようなWebページが表示されます。


図5.20

 パスワードを入力すると、図5.21のように入力した文字のかわりに「*」が表示され、パスワードが表示されないようになります。


図5.21

 「OK」ボタンをクリックすると、図5.221が表示され、リスト5.14のform_password2.phpファイルにパスワード等が送信されたことがわかります。


図5.22

■ボタン

 ボタンはクリックしたときに、特定の処理を行うようにするコントロールです。主なものに送信ボタンとリセットボタンがあります。

 送信ボタンは、フォームに入力されたデータを送信するためのコントロールです。送信ボタンの書式は次のいずれかです。

<button type="submit">OK</button>
あるいは
<input type="submit" value="OK">

 リセットボタンはフォームの内容を初期値に戻すためのコントロールです。リセットボタンの書式は次のいずれかです。

<button type="resett">リセット</button>
あるいは
<input type="reset" value="リセット">

 サンプルをリスト5.15に示します。

リスト5.15 form_button.php

<html>
<head>
<title>form_button.php</title>
<!-- form:ボタン -->
</head>
<body>
 <form action="form_text2.php" method="post">
   入力:<br>
   <input type="text" name="data" size=20>
   <input type="reset" value="reset"><br>     <!-- リセットボタン -->
   <input type="submit" value=" OK ">        <!-- 送信ボタン -->
 </form>
</body>
</html>

 リスト5.15のform_button.phpファイルにアクセスすると、図5.23のようなWebページが表示されます。


図5.23

 図5.24のように間違えて記入したような場合に、「reset」ボタンをクリックすると、図5.23の初期状態に戻ります。


図5.24

■隠しコントロール

 「送信ボタン」によってフォームに入力したデータが、action属性で指定されたPHPファイルに送信されますが、フォームに入力したデータ以外のデータも送信することができます。その場合には隠しコントロールを使います。

 リスト5.16は隠しコントロールを使用したPHPファイルの例です。次に起動されるファイルはform_hidden2.phpファイルとしています。

 隠しコントロールの書式を次に示します。

<input type="hidden" name="access_date" value="<?=$str_date?>">

 <input>タグでtype属性を"hidden"にします。そして、value属性を値か変数に設定します。ここではPHPスクリプトでの変数$str_dateを設定しています。

リスト5.16 form_hidden.php

<html>
<head>
<title>form_hidden.php</title>
<!-- form:隠しコントロール -->
</head>
<body>
 <form action="form_hidden2.php" method="post">
   入力:<br>
   <input type="text" name="data" size="20">
   <?php $str_date = date("Y-m-d"); ?>       <!-- date関数の呼び出し -->
   <input type="hidden" name="access_date" value="<?=$str_date?>">
                                 <!-- 隠しコントロール -->
   <input type="submit" value=" OK ">
 </form>
</body>
</html>

 リスト5.17にform_hidden2.phpファイルを示します。

リスト5.17 form_hidden2.php

<html>
<head>
<title>form_hidden2.php</title>
<!-- form:隠しコントロールの受信 -->
</head>
<body>
 入力は[<?=$_POST["data"]?>]です<br>
 隠しコントロールは[<?=$_POST["access_date"]?>]です。
</body>
</html>

 リスト5.16のform_hidden.phpファイルにアクセスすると、図5.25のWebページが表示されます。隠れコントロールのデータはWebページ上には表示sあれません。


図5.25

 文字を入力し、「OK」ボタンをクリックすると、図27のようにデータが表示されます。


図5.26

 


図5.27


前へ | 目次へ |次へ  | YCポータルサイト

執筆 山田豊通
更新日:2003年6月4日