Webアプリ開発事始 第10回

入力領域の生成とデータの送信 長谷川裕行
有限会社 手國堂

FORMタグとINPUTタグ

ブラウザにデータ入力用の領域を表示させるには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>


トップページ
FORMタグとINPUTタグ
入力と送信機能を実装できる
FORMタグの基本
データの送信
INPUTタグと入力領域
その他の入力コントロール
固定的なデータの送信
あとがき

Copyright © GrapeCity inc. All rights reserved.