情報システム科
HTMLとcgiのインターフェイス
目次
? は QUERY_STRING へ
クエスチョン( ? )より後の文字列データは QUERY_STRING という環境変数に入ります。
http://******/?hohoho
出力結果
query_string: hohoho
cgiプログラム
#! /usr/local/bin/perl
print "Content-type: text/html", "\n\n";
print "query_string: ", $ENV{'QUERY_STRING'}, "\n";
エキストラパス情報 PATH_INFO
CGIプログラムの名前に続いて追加の情報を記し、CGIプログラムに追加のデータを渡すことができます。環境変数 PATH_INFO から参照することができます。
CGIプログラム名の直後からhref文字列の中で最初にあらわれるクエスチョン（ ? ） マークの直前までの間の文字列となります。
URL:http://www.****/***/hahaha?hohoho
出力結果:
PATH_INFO: /hahaha
QUERY_STRING: hohoho
cgiプログラム
#! /usr/local/bin/perl
print "Content-type: text/html", "\n\n";
print "PATH_INFO: ".$ENV{'PATH_INFO'}."<br>\n";
print "QUERY_STRING: ".$ENV{'QUERY_STRING'}."\n";
テキストボックス フォーム input
1行分の入力データが必要な場合に使用します。
表示結果
メールアドレス :
書式
メールアドレス : <input TYPE="text" SIZE="28" NAME="email" VALUE="a@sk.cojp">
テキストエリア フォーム textarea
複数行にわたるテキストが必要な場合に使用します。このフィールドは、テキストの量に応じてスクロールします。
表示結果
コメント :
書式
コメント :
<textarea name="comment" cols="40" rows="4">CGIプログラムの名前に続いて追加の情報を記し、CGIプログラムに追加のデータを渡すことができます。環境変数 PATH_INFO から参照することができます。 CGIプログラム名の直後からhref文字列の中で最初にあらわれるクエスチョン（ ? ） マークの直前までの間の文字列となります。
</textarea>
チェックボックス input TYPE="checkbox"
オン・オフを選択させたい場合に使用します。
表示結果
メールによる最新情報を受ける
書式
<input TYPE="checkbox" NAME="mailling_list" VALUE="ON" CHECKED>メールによる最新情報を受ける
ラジオボタン input TYPE="radio"
複数の選択肢から項目を1つだけ選択させたい場合は、ラジオボタンを使用します。
表示結果−−選んで送信を押してください
送信を押すと
REQUEST_METHOD: POST
query_string:
CONTENT_LENGTH: ba=takyo&bb=hawaii
書式
<FORM METHOD="post" ACTION="../cgi-bin/t28_po28.cgi">
<INPUT TYPE="radio" NAME="ba" VALUE="takyo">東京
<INPUT TYPE="radio" NAME="ba" VALUE="nagoya" CHECKED>名古屋
<BR>
<INPUT TYPE="radio" NAME="bb" VALUE="hawaii">ハワイ
<INPUT TYPE="radio" NAME="bb" VALUE="bali" CHECKED>バリ島
<BR>
<INPUT TYPE="submit" VALUE="送信">
</FORM>
ドロップダウンメニュー select
選択肢の一覧を表示する場合は、ドロップダウンメニューを使用します。一度に選択できる項目の数は、1つまたは複数に設定できます。
表示結果
住所 :
書式
住所 :
<select NAME="address" SIZE="1">
<option VALUE="1">都道府県を選択してください
<option VALUE="2">北海道
<option VALUE="3">青森県
<option VALUE="4">岩手県
<option VALUE="5">沖縄県
</select>
プッシュボタン 「button」「submit」「reset」
フォームのデータを送信させるために使用します。そのほか、フィールド内に入力されたり選択された情報を消去することもできます。
プッシュボタンの種類は「button」、「submit」、「reset」の3種類です。
button
通常のボタンを表示
submit
フォームデータを送信するためのボタン
reset
フォームに入力された内容をリセットするためのボタン
表示結果
書式
<INPUT TYPE="button" VALUE="ボタン">
<INPUT TYPE="submit" VALUE="送信">
<INPUT TYPE="reset" VALUE="リセット">
インプット画像 INPUT TYPE="image"
プッシュボタンのSUBMITオプションと同じ効果があります。
表示結果
書式
<INPUT TYPE="image" SRC="button.gif" BORDER="0">
隠しインプット
このタイプはブラウザに表示されませんが、データとしてはGETやPOSTによって送られます。
表示結果
書式
<INPUT TYPE="hidden" NAMFE="post_data" VALUE="1">
フォームを使ったプログラムの作成 FORM
<FORM> タグで指定しているフォームの属性は METHOD と ACTION です。METHOD 属性には CGI と交信する手段、ACTION 属性には呼び出すプログラム名を指定できます。
INPUTタグはTYPE 属性でフォームの部品を指定することができます。たとえば、次の例ではテキストフィールド2つとサブミットボタンを表示させています。
表示結果
書式
<FORM METHOD="post" ACTION="../cgi-bin/test.cgi">
名前：<INPUT TYPE="text" NAME="name" SIZE=10>
E-Mail：<INPUT TYPE="text" NAME="mail" SIZE=10>
<INPUT TYPE="submit" VALUE="送信">
</FORM>
テキストボックスやプルダウンなどのフォームフィールドを記述するタグには NAME 属性があります。NAME 属性には個々のフォームフィールドを区別するためのフィールド名を指定することができます。
<INPUT TYPE="text" NAME="mail">
NAME 属性に「mail」というフィールド名を指定しています。
[送信] ボタンを押すと、テキストフィールドに入力されたデータがPOSTを使ってプログラムに渡されます。プログラムに渡されるデータは「フィールド名=値」という文字列になります。
たとえば、フィールド名が「mail」のテキストボックスに「user@sk.jp」と入力された場合は、「mail=user@sk.jp」という文字列が送信されます。
入力フィールドが複数あるときは「フィールド名=値&フィールド名=値...」と、それぞれのフィールドがアンパサンド( & )で連結されます。
GETメソッドからデータの受け取り
フォームデータを送る手法としては、GET と POST という２つのメソッドがあります。
GET
GETの一般的な使い方は、URLにクエリを追加します。
<a href="../cgi-bin/***.cgi?mail=user@sk.jp">...</a>
クエスチョン( ? )以降の「mail=user@sk.jp」がクエリデータとして環境変数 QUERY_STRING に格納されます。ただし、渡されるデータがリミットを越えると、超えた分の値が切り捨てられます。
環境変数 QUERY_STRING を使用すれば、このクエリ情報にアクセスすることができます。環境変数を参照するには、下記のように %ENV 変数を使って呼び出します。
表示結果−−データを入れて、送信を押してみてください
書式
<FORM METHOD="get" ACTION="../cgi-bin/t28_po28.cgi">
名前：<INPUT TYPE="text" NAME="name" SIZE=10>
e-mail：<INPUT TYPE="text" NAME="mail" SIZE=10>
<INPUT TYPE="submit" VALUE="送信">
</FORM>
cgiプログラム
#!/usr/local/bin/perl
print ("Content-type: text/html\n\n");
print ("<html>\n<body><br><br><br><br>\n");
print "REQUEST_METHOD: ".$ENV{'REQUEST_METHOD'}."<br>\n"; #getかpostか
print "query_string: ".$ENV{'QUERY_STRING'}."<br>\n"; #getデータ
read (STDIN, $a, $ENV{"CONTENT_LENGTH"}); #postデータ
print "CONTENT_LENGTH: $a<br>\n"; #postデータ
print ("<br><br><br><br></body>\n</html>\n");
POSTメソッドからデータの受け取り
POSTはHTTPヘッダのボディ部でデータを送信します。パラメータは標準入力で渡されます。データの長さ(バイト数)は環境変数 CONTENT_LENGTH に格納されています。
POSTの主な特徴は、クエリのサイズに制限がないことです。したがって、クライアントやサーバがデータを切り捨ててしまうことはありません。POSTによって送られたデータは、標準出力から取得することができます。
表示結果−−データを入れて、送信を押してみてください
表示
REQUEST_METHOD: POST
query_string:
CONTENT_LENGTH: name=&mail=
書式
<FORM METHOD="post" ACTION="../cgi-bin/t28_po28.cgi">
名前は：<INPUT TYPE="text" NAME="name" SIZE=10>
e-mailは：<INPUT TYPE="text" NAME="mail" SIZE=10>
<INPUT TYPE="submit" VALUE="送信">
</FORM>
cgiプログラム
#!/usr/local/bin/perl
print ("Content-type: text/html\n\n");
print ("<html>\n<body><br><br><br><br>\n");
print "REQUEST_METHOD: ".$ENV{'REQUEST_METHOD'}."<br>\n"; #getかpostか
print "query_string: ".$ENV{'QUERY_STRING'}."<br>\n"; #getデータ
read (STDIN, $a, $ENV{"CONTENT_LENGTH"}); #postデータ
print "CONTENT_LENGTH: $a<br>\n"; #postデータ
print ("<br><br><br><br></body>\n</html>\n");
フォームデータのデコード
クライアントが GET と POST のどちらのメソッドで送られたかは、環境変数 REQUEST_METHOD を使います。この値が GET リクエストを示していると、クエリ文字列または エキストラパス情報 から環境変数から入手しなければなりません。一方、これがPOSTリクエストなら、環境変数 CONTENT_LENGTH によって指定されたバイト数を標準入力から読み込む必要があります。
フォームデータをデコード
REQUEST_METHOD をチェックしてリクエストプロトコル（GET or POST）を判断する。
GETであれば、QUERY_STRING からクエリを読み込む。
(PATH_INFOからエキストラパス情報を読み込む方法もある)
POSTであれば、CONTENT_LENGTH を使用してリクエストのサイズを調べ、標準入力からクエリを読み込む。
以下、post に絞っている。
入力情報の空白は + となる。+ をスペースに置き換える。
$a =~ tr/+/ /;
キーと値に分割（名前=値&名前=値...）。& で分割
my @line = split (/&/, $a);
16進数にエンコードされた文字列をデコード
foreach $x(@line){
my ($index, $value) = split (/=/, $x);
$value =~ s/%([0-9a-fA-F][0-9a-fA-F])/pack("C",hex($1))/eg;
$value =~ s/</</g;
$value =~ s/>/>/g;
$form_data{$index} = $value;
}
ホームへ