ホームページからデータを受け取る

FormタグとCGI

　
1. FORMタグ
  FORMタグはブラウザで利用できるGUI部品です。このタグを利用すると、ブラウザから入力されたデータをサーバー経由でCGIが取得することができます。以下に例を示します。
  　<INPUT TYPE="text" NAME="NAME" SIZE=10>は1行の文字入力が可能で、その文字列の名前をNAMEとします。
```
  <FORM METHOD=GET ACTION="../cgi-bin/query.cgi">
     名前：  <INPUT TYPE="text" NAME="NAME" SIZE=10>
     E-Mail：<INPUT TYPE="text" NAME="MAIL" SIZE=20>
    <INPUT TYPE="submit" VALUE="送信">
  </FORM>
```
  これを、ブラウザで表示すると、次のようになります。
  　
  
  送信ボタンを押すと、ブラウザは入力された値を、名前=値　の形で、サーバーに送り、サーバーはその値の処理を、ACTION部で記述された、../cgi-bin/query.cgi　に委託します。
  　値の渡し方は、FORMタグのMETHODの値で異なります。GETの場合は環境変数　QUERY_STRING　でわたされ、PUTの場合は、標準入力経由で渡されます。詳細は、次項で説明します。
2. FORMの入力用タグ
  1. その他の入力
    FORMタグには、文字入力以外に、メニュー選択やボタンによる選択形式があります。
  2. 複数行入力
    複数の行が入力できます。colsで行の文字数、rowで行数を指定します。改行入力が可能です。
```
      <textarea name="message" cols="60" rows="8"></textarea>
      
```
  3. メニュー選択
    複数の項目を設定しておき、選択する方法です。name=option value　が出力されます。
```
<select name="etc1">
 <option value="">性別
 <option value="男性">男 性
 <option value="女性">女性
</select> 
```
  4. ラジオボタン
    複数の項目のどれか一つを選択します。リストと組み合わせた例を示します。選択された項目の　name=value　が出力されます。
```
<UL>
<LI><INPUT type="radio" checked name="1" value="1"> １年生
<LI><INPUT type="radio" name="1" value="2">２年生
<LI><INPUT type="radio" name="1" value="3">３年生
<LI><INPUT type="radio" name="1" value="4">４年生
</UL>
```
  5. チェックボタン
    複数の項目を選択できます。選択された項目の　name=value　が出力されます。
```
<UL>
 <LI><INPUT type="checkbox" name="2" value="1"> デスクトップ
 <LI><INPUT type="checkbox" name="2" value="2">　ノート型
 <LI><INPUT type="checkbox" name="2" value="3">　携帯型
 <LI><INPUT type="checkbox" name="2" value="4">　携帯電話
</UL>
```
  6. 例
    これらの入力を統合した例を、紹介します。
    form.html への表示
Formタグの値の取得
1. Formタグの値を取得する
  　実際にPerlによる、FORMの値の取得例を紹介します。FORMタグの値を取得するには、GETあるいはPOSTのどちらの方法でデータが設定されたかを知る必要があります。
  　この情報は、次のように、「環境変数」から取得できます。環境変数は、perlでは連想配列　%ENV　から取得できます。
  　$ENV{'REQUEST_METHOD'}
  REQUEST_METHOD　は、GETまたはPUTの区別をするキーワードになります。このキーに対応する値がGETの場合、FORMタグの値は、環境変数から
  　$ENV{'QUERY_STRING'}
  で、取り出すことができます。
  　POSTの場合、標準入力から　
  　read( STDIN, $buffer, $ENV{'CONTENT_LENGTH'} );
  で取得できます。STDINは標準入力、$ENV{'CONTENT_LENGTH'}は、取得する文字列の長さです。
2. Formタグを取得し、表示する(query.cgi)
  Formタグの値を取得し、ホームページに表示する　cgi　プログラムを紹介します。
  'REQUEST_METHOD'により、GETとPUTの区別を知ります。いずれの場合も、取得した値(文字列)を変数$bufferに記録し、それを、text形式でブラウザに送ります。
```
#!/usr/bin/perl

# GETメソッドの場合
if( $ENV{'REQUEST_METHOD'} eq "GET" ) {
    $buffer = $ENV{'QUERY_STRING'};

# POSTメソッドの場合
} else {
    read( STDIN, $buffer, $ENV{'CONTENT_LENGTH'} );
}

print "Content-Type: text/html\n\n\n";
print "<b>Method</b> ", $ENV{'REQUEST_METHOD'}, "<br>\n";
print "<b>Data</b> ", $buffer, "\n";
```
3. URLエンコード
  FORMタグで入力された文字は、英数字はそのままですが、空白はプラス（ + ）に、特殊記号や漢字などはパーセント（ % ）を先頭に付けた16進数に変換されてサーバーに送られます。これを、URLエンコードといいます。
  　例えば　Sato　Kenji　と入力すると　Sato+Kenji　となります。また、漢字の場合は16進文字に変換されます。たとえば、佐藤　は　%8D%B2%93%A1　として送られます。
4. 実行
  下記にリンクからこのwebサーバーを利用して　cgi　を実行します。
  　　form.htmの実行
  
  ホームページで次のように入力します。
  
  　これを　send　すると、次の結果が得られます。
  
  各入力項目は、&　で分離されます。subjectは1行入力、message2行入力で%0D%0Aは改行コードです。etc1の次は、選択メニューで、%92j%90%AB　は「男性」の漢字コードです。続く、1=　がラジオボタン、2=　はチェックボタンの出力で、2種あります。
  POSTの場合でも、表示される内容は同じです。GETの方が取得の方法は簡単ですが、長い文字列の場合に、制限長で切られてしまいます。POSTの場合、この制約はありません。また、GETメソッドの場合、FORMの値が、cgiのurlの後ろに　?　で区切られて表示されます。

FormタグとCGI

FORMタグ

FORMの入力用タグ

Formタグの値の取得

Formタグの値を取得する

Formタグを取得し、表示する(query.cgi)

URLエンコード

実行