入力フォームの説明の前に、ちょっとここで、
復習してください。
この要点をまとめると次のようになります。
【1】 Webサーバー内の所定の所にHTMLファイルを配置しておく。
【2】 Webブラウザ(Internet Explorerなど)のアドレス入力で、Webサーバー内のhtmlを指定する。
【3】 Webブラウザが、ネットワークを介してWebサーバーにそのHTMLファイルを要求！
【4】 要求に応じたWebサーバーがそのHTMLをWebブラウザに送る。それが見える。
このやり取りのプロトコルは、HTTPと呼ばれており、少し詳しい動作のイメージは
このページで解説しています。確認してみましょう。
結論として これまで行ってきたHTMLは、HTMLファイルを Webサーバー内の所定の所に配置していれば
それを見る仕組みがあるということでした。
しかし「入力フォーム」を使うということは、そう単純ではありません。
Webブラウザの閲覧者にデータを入力してもらい、その情報を上記【3】の
要求と共にwebサーバーへ送ることになります。
また【4】のサーバー側では、ブラウザから送られてきた情報を読み取ってそれを利用し、
「レスポンスとしてブラウザへ送り返すHTML」を
生成するプログラムを用意しなくてなりません。
Webサーバーは、自発的に（勝手に）動作してクライアントに接続して情報を送ることをしません。
Webブラウザから接続されるのを待って、何か要求されたら対応する動作をするように作られています。
このWebサイトのログインページでも、ボタンによってサーバー側のプログラムが実行されて、
入力したユーザー名やパスワードが正しいかどうかチェックしています。
同様に、ショッピングサイトへの名前や住所登録、アンケートサイトのデータ集計など
いろいろな、入力ページがありますが、いずれの場合も入力データを使うサーバー側のプログラムを
起動しなければなりません。
そして formタグが、送信するデータの範囲を指定し、サーバー側のプログラムを指定するものなのです。
サーバーの位置のアドレスと実行させるプログラム指定は、
URI の表現方法を使い
action属性に書きます。
送信データは、formタグで囲んだinputタグのvalue属性の内容です。
ただしname属性で名前を付けておかなければなりません。
また、サーバーへの情報送信は、inputタグのtype属性が
"submit"になっている特別なボタンのクリックで行われます。
以下に例を示します。これは、
で確認できます。送信ボタンでサーバーの応答を確認しましょう。
<html lang="ja"><head> <title>test</title> </head> <body> <form action="../cgi-bin/w_test2.cgi" method="get"> 名前<input type="text" value="yamada tarou" size="20" name="username"><br> 住所<input type="text" value="ochanomizu chiyoda-ku tokyo" size="40" name="address"><br> 性別<input type="radio"name="sex" value="male" checked>男性 <input type="radio"name="sex" value="female">女性<br> <input type="submit" value="送信"> </form > <p>ボタンをクリックすると、<br> actionで指定したサーバーのプログラムへ移動し、<br> それに情報が送られます。<br> サーバーで そのプログラムが動作できる設定になっていれば、<br> 受け取った情報で、HTMLを表示する実行が行われ、<br> それが見えることになります。</p> </body> </html>
w_test2.cgi
info2.php
info3.php
上記の確認画面で、送信ボタンをクリックした時にサーバーで実行するプログラムが
の部分で、そのサーバー側プログラムのソースを以下に示します。
これは上記のラジオボタンにより、切り替えて実験することができます。
ラジオボタンの切り替えで、
サーバーで実行せせるプログラムを変えて説明しています。
このように応答するHTMLを、サーバーのプログラムで生成することにより 自由に表現させることができます。
さて、
サーバープログラムのw_test2.cgiやw_test3.cgiでは、Webブラウザから送られてきたデータを
単純にそのまま表示させています。
「送信」のボタンをクリックした時、例えば次のような情報が表示されます。
username=yamada+tarou&address=ochanomizu+chiyoda-ku+tokyo&sex=male
ここで、&がデータを区切っています。
そして が、formの範囲中において inputのname属性で指定した名前です。
yamada+tarouや
ochanomizu+chiyoda-ku+tokyoが
maleは、ブラウザで入力したデータでinputタグのvalue属性の内容に相当します。
例えば、usernameの名前のinputでyamada tarouと入力すると
yamada+tarouに変換され送られてきます。（スペースが+に置き換わっています。）
仮にブラウザで、「山田 太郎」と入力するとこの部分は、
%E5%B1%B1%E7%94%B0+%E5%A4%AA%E9%83%8Eに変換されて送られるでしょう。
これは、URLエンコードと
呼ばれる変換を行って送っているからです。
（上記リンクで、この変換やURLデコードと呼ばれる逆変換の実験ができます。）
この例では、UTF-8の文字列をURLエンコードしたものになっており、それで逆に変換をすると、
入力した文字列に戻すことができます。
そしてこの逆変換を行って、各inputの入力値を列挙することまで行っている
サーバーのプログラム例がラジオボタンで選択できるinfo2.phpやinfo3.phpです。
perlのプログラムでも可能ですが、より簡単なphpのプログラムで紹介しています
また、formタグ内のmethod属性で、サーバーへ送るデータの方法を指定しています。
基本的には、getかpostが使われます。
w_test2.cgi や info2.php で、getを指定しています。
getは、httpリクエストのヘッダー内に送信情報を埋め込む方法です。この方法の場合は
ブラウザのアドレス欄で次のように表示されます。
http://・・省略・・/cgi-bin/w_test2.cgi?username=yamada+tarou&address=ochanomizu+chiyoda-ku+tokyo&sex=male
上記の の部分で、サーバーへ情報を送っているのです。
この場合、送信データをブラウザで目視できるので確認しやすいのですが、大きなデータを送ることができません。
対して、info3.php では、postを指定しています。
これは、リクエストのボディに送信情報を埋め込んむ方法で、
getのようにブラウザで送出情報を簡単に確認することはできませんが、大きなデータの送出が可能です。
inputの情報がactionで指定されるサーバープログラムに送られますが、その送られ方は typeによって違いがあります。
typeがbuttonの場合はクリックしても、nameとvalueが記述されていても送信対象になりません。
submitのボタンをクリックすることで、それが存在する<form>〜<form>の中のinputなどのnameとvalueが、URIエンコードされてサーバに送られます。
そのためにサーバープログラムと連係をformには、一つ以上のsubmitのボタンを用意します。
なお、submitボタンは複数あっても構いません。その場合はクリックしたsubmiボタンのnameとvalueだけが送られます。
よって、サーバ側では受信した文字列内の中にsubmitボタンのname情報を確認するだけで どのボタンがクリックされたのかを知ることができます。
なお、formタグのonsubmitに関数を指定してsubmitボタンをクリックしたらその関数（script）を実行させることもできます。
これを利用すると関数の処理が終わった時に送信されるので、送る情報の制御が可能になります。
この場合、この関数の戻り値をfalseにすることでsubmitを中断させることができます。
またボタンを使わずに、formオブジェクトのsubmit()メソッドで送信することも可能です。
| disabled | 全てに使える属性で、この記述があるタグの機能を無効化します。 |