ブラウザにデータ入力用の領域を表示させるにはINPUTタグ、入力された値をサーバーが受け取るようにするためにはFORMタグを使います。
- 入力と送信機能を実装できる -
FORMタグとINPUTタグを使ったデータの入力画面は、ユーザーとのやり取りが必要なWebアプリケーションにとって必須の存在です。
これらを使えば、テキストボックスによる文字列入力、チェックボックスやオプションボタン(ラジオボタン)、リストボックスなどによる項目の選択、[送信]ボタンによる入力データの送信などの機能が、ブラウザに実装できます。
テキストボックスや[送信]ボタンなどブラウザに表示される要素を、一般にコントロールと呼びます。INPUTタグでコントロールの<外観と動作>を定義し、FORMタグでコントロールに対するユーザーの操作(テキストボックスなら文字列の入力、[送信]ボタンならクリックなど)<Webサーバーに伝える方法>を定義します。
- FORMタグの基本 -
FORMタグの書式は、以下のようになります。
<FORM method="post | get" action="プログラム名">
methodオプションでWebサーバー内で稼働するCGIプログラムにデータを渡す方法を、actionオプションでデータを受け取って処理をするプログラムを指定します。
methodオプションでは"POST"または"GET"を指定できます。前回の記事で説明したように、POSTはサーバーの標準入力から、GETは環境変数から、CGIプログラムにデータを渡します。
渡されるデータは、<FORM ...>~</FORM>の間にINPUTタグを使って記述したコントロールに対して、クライアントのユーザーが操作した結果(テキストボックスに入力された文字列、選択された項目など)です。
- データの送信 -
[送信]ボタンはINPUTタグによって生成され、他のコントロールと同じく<FORM ...>~</FORM>の間に記述します。[送信]ボタンをクリックすると、<FORM ...>~</FORM>の間に記述された他のコントロールの操作結果がWebサーバーに送られ、さらにFORMのactionオプションで指定したプログラムに対して、methodオプションで指定する方法を使って渡されます。
例えば、“cgi-bin/test.cgi”というプログラムを起動し、標準入力からデータを渡したいなら、以下のように記述します。
<FORM method="post" action="CGIのURI">
:
... データ入力用コントロールの定義 ...
... [送信]ボタンの定義など ...
</FORM>
|
|
|