cgiの作り方(2)

FORM について

FORMタグは、html4.01で定義されています。html文書の中で、ユーザにテキスト入力させたり、チェックボックスやラジオボタンで選択させるのに用います。

FORMタグの具体例

FORMタグの具体例をあげて、説明します。

<form method="POST" action="cgi-bin/test.cgi">
 姓： <input type="text" name="FAMILYNAME"><br>
 名： <input type="text" name="FIRSTNAME"><br>
 <input type="submit" value="送信">
</form>

これをブラウザで見ると次のようになります。

まず、<form>～</form>（大文字でも良い）です。このFORMタグの役割は次の２つです。

１　この<form>～</form>の間が、テキスト入力や、チェックボックスなどの要素を並べられる範囲であるということを示す。
２　この FORM の内容を送信するときの、送信先の情報などを示す。

１について、先ほどの例ではどのようになっているかをみます。<form>～</form> の間には、３つの要素が含まれています。最初の２つは、テキスト入力のためのもので、後で詳しく説明します。最後の１つは送信用のボタンです。これも後で詳しく説明します。

２について、例をみます。<form> タグの中に、method="POST" というのがあります。このメソッドというのは、HTTP プロトコルで定義されているもので、送信におけるデータの渡し方のことで、GET と POST があります。ここでは、POST での受け渡しのみを取り扱う予定なので、お呪いのように、とにかくこれを FORM タグの中に書いておけばよいでしょう。次に action="cgi-bin/test.cgi" というのがあります。これは、送信先の CGI ファイルの場所です。今回は自分のPCにあるウェブ・サーバでテストしていますので、このようになりますが、インターネット上のサーバにアクセスする場合は、action="http: //サーバー名/~CGIの設置者名/cgi-bin/test.cgi" のような形になります。

テキストの入力

テキストの入力には、INPUT タグのタイプを text にします。さきほどの例では、

 姓： <input type="text" name="FAMILYNAME">

これでテキスト入力用の枠が表示されます。ここに、Robinson と名字を入力したとします。入力後にデータを送信すると、サーバには「FAMILYNAME=Robinson」という形で渡されます。これで分かると思いますが、name="FAMILYNAME" の役割は、入力枠の名前をつけておくことです。このおかげで、どの入力枠にどのデータが入ったのかを区別することができます。

submit ボタン

データの入力が終わったら、送信をしなければなりません。その送信を開始するためのボタンが submitボタンです。INPUT タグのタイプを submit にします。

 <input type="submit" value="送信">

value="送信"とすると、ボタンに「送信」という名前がついてブラウザ上に表示されます。

ラジオボタン，チェックボックス

FORMタグの中に、ラジオボタンとチェックボックスを加えてみましょう。

<form method="POST" action="cgi-bin/test.cgi">
--- 氏名 ---<br>
 姓： <input type="text" name="FAMILYNAME"><br>
 名： <input type="text" name="FIRSTNAME"><br>
--- 性別 ---<br>
<input type="radio" name="SEX" value="male" checked>男性
<input type="radio" name="SEX" value="female">女性
<br>
--- 持ち物 ---<br>
<input type="checkbox" name="PROPERTY" value="book">本
<input type="checkbox" name="PROPERTY" value="notePC">ノートPC
<input type="checkbox" name="PROPERTY" value="stationary">文房具
<br>
<input type="submit" value="送信">
</form>

ラジオボタンは、INPUTタグのタイプを「radio」にして、次のように表します。

<input type="radio" name="SEX" value="male" checked>男性
<input type="radio" name="SEX" value="female">女性

性別のように、選択肢の中から1つだけを選ぶようなときにラジオボタンを使います。例では、男性の方が選択された状態で表示されます。女性の方をデフォルトにしたければ、「value="female" checked」とこちらにcheckedを加え、男性の方のcheckedを削除します。

<input type="checkbox" name="PROPERTY" value="book">本
<input type="checkbox" name="PROPERTY" value="notePC">ノートPC
<input type="checkbox" name="PROPERTY" value="stationary">文房具

持ち物のように、何個でもチェックを入れられるような質問については、チェックボックスを使います。持ち物のチェックボックスには、PROPERTYという名前(name)をつけ、その選択肢を値(value)にします。
この例はブラウザ上に次のように表示されます。図は表示されたフォームに入力した後の状態です。

図のように文字の入力とボタンのチェックを入れて、送信ボタンを押すとサーバにデータが転送されます。転送されたデータは次のような形になります。

FAMILYNAME=Jeaou&FIRSTNAME=Robinson&SEX=male&PROPERTY=notePC&PROPERTY=stationary

3番目の「SEX=male」がラジオボタンで男を選択したことを示しています。4番目と5番目はチェックボックスの選択した2つの要素を示しています。そしてそれぞれの項目は「&」で区切られています。

まとめ

FORMの内容をサーバに送ると、
１　項目は、「&」で区切られる。
２　それぞれの項目は、「名前 = 値」という形で表される。
ということになります。