第2部 入力フォームの使い方

1.FORMタグ

 FORMタグは、HTML文書の中で書き込み(fill-out)フォームを記
述するためのタグです。また、FORMタグは、入れ子にできません。

<FORM ACTION="URL"> ... </FORM>
FORMタグでは、次の属性が使用できます。

ACTION
実行されるものをURLで記述します。
METHOD
サーバに対して実行するためのHTTP/1.0メソッドを記述します。
次の2通りの方法から選択できます。
ENCTYPE
書き込みフォームの内容をエンコードする方法を指定します。
この属性は、METHODPOSTに設定されている場合のみ、適用されます。

注意:METHODのタイプをPOSTで使いたい場合は、NCSA httpd が1.0a5
より新しいものを使う必要があります。

 FORMタグの中には、FORM以外のタグを置くことができます。特に
INPUTSELECTTEXTAREAタグがフォームのインタフェースを指定す
るために使います。

 FORMを複数記述した場合、フォーム形式の分割点がわからなくな
ってしまうので、HR(横線)などを使って区分けした方がはっきり
ます。

2.INPUTタグ

 INPUTタグは、FORMの中で簡単な入力エレメントを指定する場合に
使います。このタグは、IMGタグのように終了タグを表すものはあり
ません。INPUTタグで使われるフィールドなどは、X用Mosaicでは
Motifのウィジェットを使っています。

INPUTタグでは、つぎの属性が使えます。

TYPE
次のいずれかを指定しなければなりません。
NAME
入力フィールドのシンボリック名で、この名前は表示されません。
これはsubmitreset以外の全てのタイプで必要となります。
VALUE
text または password フィールド内にあらかじめ文字を挿入しておく
場合に用いられます。checkbox や radio ボタンの倍、指定された場合のデフォルト値を指定します。
CHECKED
チェックボックスやラジオボタンがあらかじめ選択されている状態にします。
SIZE
入力フィールドの物理的な長さを指定します。これは、text または password
エントリにのみ用いられます。指定されていない場合、デフォルト値は20です。
複数行にわたる場合は、SIZE=width,heightのように指定します。 (例:SIZE=60,12)
MAXLENGTH
入力で許される最大文字数を指定します。これは、text
または password エントリにのみ用いられ、フィールドが1行の場合に用いられます。
指定されていない場合は、制限はなくなります。

例1:非常にシンプルなフォームの例
The Text field:

Submit button:

Reset button:

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">
The Text field: <INPUT NAME="entry"> <P>
Submit button: <INPUT TYPE="submit" VALUE="Submit Query"> <P>
Reset button: <INPUT TYPE="reset"> <P>
</FORM>

例2:3つのtextフィールドを含んだフォームの例
The First Text field:

The Second Text field:

The Thrid Text field:

Submit button:

Reset button:

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">
The First Text field: <INPUT NAME="entry1"> <P>
The Second Text field: <INPUT NAME="entry2"> <P>
The Thrid Text field: <INPUT NAME="entry3"> <P>
Submit button: <INPUT TYPE="submit" VALUE="Submit Query"> <P>
Reset button: <INPUT TYPE="reset"> <P>
</FORM>

例3:テキストフィールドとチェックボックスの例
Type in your street address:

Type in your phone number:

  1. Sun.
  2. Dec.
  3. HP.

Reset button:

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">
Type in your street address: <INPUT NAME="address"> <P>
Type in your phone number: <INPUT NAME="phone"> <P>
<OL>
<LI> <INPUT TYPE="checkbox" NAME="computer" VALUE="sun"> Sun.
<LI> <INPUT TYPE="checkbox" NAME="computer" VALUE="dec"> Dec.
<LI> <INPUT TYPE="checkbox" NAME="computer" VALUE="hp"> HP.
</OL>
<INPUT TYPE="submit" VALUE="Order Computer"> <P>
Reset button: <INPUT TYPE="reset"> <P>
</FORM>

例4:デフォルト値を含んだテキストフィールドとチェックボックスの例
The first text entry field, with default value "foo":

The second text entry field, with no default value "foo":

  1. The first checkbox, on by default.
  2. The second checkbox, off by default.
  3. The third checkbox, on by default.
To submit the query, press this button:

Reset button:

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">
The first text entry field, with default value "foo": <INPUT NAME="def-entry1" VALUE="foo"> <P> 
The second text entry field, with no default value "foo": <INPUT NAME="def-entry2"> <P> 
<OL>
<LI> <INPUT TYPE="checkbox" NAME="box1" VALUE="first" CHECKED> The first checkbox, on by default.
<LI> <INPUT TYPE="checkbox" NAME="box2" VALUE="second"> The second checkbox, off by default.
<LI> <INPUT TYPE="checkbox" NAME="box3" CHECKED> The third checkbox, on by default.
</OL>
To submit the query, press this button:
<INPUT TYPE="submit" VALUE="Submit query"> <P>
Reset button: <INPUT TYPE="reset"> <P>
</FORM>

例5:textフィールドに属性をもたせた例
The first text entry field is twice as long (display up to 40 chars):

The second text entry field is limited to five chars, and beeps when the user tries to enter more:

To submit the query, press this button:

Reset button:

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">
The first text entry field is twice as long (display up to 40 chars): <INPUT SIZE=40 NAME="entry51"> <P> 
The second text entry field is limited to five chars, and beeps when the user tries to enter more: <INPUT SIZE=5 MAXLENGTH=5 NAME="entry52"> <P> 
To submit the query, press this button:
<INPUT TYPE="submit" VALUE="Submit query"> <P>
Reset button: <INPUT TYPE="reset"> <P>
</FORM>

例6:ラジオボタンの例
  1. Cash.
  2. Check.
  3. Credit card:
    • Mastercard.
    • Visa.
    • American Express.
Submit button: Type in your username:

Type in your password:

To log in, press this button: Type in your username:

Type in your password:

To log in, press this button:


3.SELECTタグ

<FORM> ... </FORM>の中で、複数のSELECTタグが使えます。X版Mosaic
では、SELECTタグは、Motifのオプションメニューやスクロールリス
トの機能を使っています。

 SELECTタグで使う選択肢は、OPTIONタグを使って指定します。通
常、つぎのようなソースとなります。SIZEを指定しない場合は、ポ
ップアップメニュー形式となります。

    <SELECT NAME="menu">
    <OPTION> 最初の選択肢
    <OPTION> 2番目の選択肢
    :
    :
    </SELECT>
SELECTタグには、つぎの属性があります。

NAME
SELECT要素のシンボリック名です。
SIZE
その数だけメニュー項目形式で表示されます。ここで指定さ
れた以上にオプションがある場合、スクロールリストになり
ます。
MULTIPLE
メニューの中で選択肢を複数選ぶことができる項目に対し
て使います。コントロールキーを押しながら複数選択できま
す。

OPTIONタグには、つぎの属性があります。

SELECTED
あらかじめ選択された状態にしておく項目に対して指定し
ます。
MULTIPLE
複数の選択を行う場合に指定しておく必要があります。

例8:<SELECT>タグの使用例
What would you like to do today?

Submit button:

Reset button:

<FORM METHOD="POST" ACTION="/cgi-bin/post-query"> 
What would you like to do today?
<SELECT NAME="what-to-do">
<OPTION> Drink Coffee
<OPTION SELECTED> Read A Book
<OPTION> Take A Walk
<OPTION> Buy A Bagel
<OPTION> Watch TV
</SELECT> <P>
Submit button: <INPUT TYPE="submit" VALUE="Submit Query">
<P>
Reset button: <INPUT TYPE="reset"> <P>
</FORM>

例9:<SELECT>のもう1つの例
What would you like to do today?

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">
What would you like to do today?
<SELECT NAME="what-to-do" SIZE=10>
<OPTION VALUE="drink"> Drink Coffee
<OPTION VALUE="read" SELECTED> Read A Book
<OPTION VALUE=walk> Take A Walk
<OPTION> Chop Down Rainforests
<OPTION> Buy A Bagel
<OPTION> Watch TV
<OPTION> Sell Art
<OPTION> Buy Jewelry
<OPTION> Attend A Concert
<OPTION> Read Poetry
<OPTION> Excercise
<OPTION> Whittle
<OPTION> Cook Stir Fry
<OPTION> Sip Espresso
<OPTION value="Pig Out"> Munch Teddy Grahams
</SELECT> <P>
</FORM>
What items of clothing do you plan to wear? (Hold down Control to select or deselect disjoint items.)

Submit button:

Reset button:

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">
What items of clothing do you plan to wear? (Hold down <I>Control</I> 
to select or deselect disjoint items.) <P>
<BLOCKQUOTE>
<SELECT NAME="what-to-wear" MULTIPLE SIZE=8>
<OPTION> T-Shirt
<OPTION SELECTED> Jeans
<OPTION> Sweater
<OPTION SELECTED> Sweatshirt
<OPTION SELECTED> Socks
<OPTION> Cotton Sweater
<OPTION> Rugby Shirt
<OPTION> Leather Jacket
<OPTION> Boots
<OPTION> Running Shoes
<OPTION> Windbreaker
<OPTION> Vest
<OPTION> Cape
</SELECT>  <P>
</BLOCKQUOTE>
Submit button: <INPUT TYPE="submit" VALUE="Submit Query"> <P>
Reset button: <INPUT TYPE="reset"> <P>
</FORM>

4.TEXTAREAタグ

 TEXTAREAタグは、複数行にわたる書き込みテキストフィールドを
作る際に使います。TEXTAREAにはつぎの属性があります。

TEXTAREAでは、textフィールドには自動的にスクロールバーが表示
されます。

TEXTAREA要素には、かならず終了タグ</TEXTAREA>が必要です。つぎ
のように指定します。

<TEXTAREA NAME="foo" ROWS=4 COLS=40></TEXTAREA>

開始タグと終了タグとの間にテキストを入れると、デフォルトでそ
のテキストがtextフィールドに挿入されます。


例10:<TEXTAREA>タグの例
Please enter any positive comments below:

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">
Please enter any positive comments below: <P>
<TEXTAREA NAME="positive" ROWS=10 COLS=50></TEXTAREA> <P>
Please enter any negative comments below:

Please enter your name below:

To submit your comments, press this button:

To clear the form, press this button:

Please enter any negative comments below: <P>
<TEXTAREA NAME="negative" ROWS=2 COLS=20></TEXTAREA> <P>
Please enter your name below: <P>
<TEXTAREA NAME="username" ROWS=1 COLS=40>Your Name Here</TEXTAREA> <P>
To submit your comments, press this button: <INPUT TYPE="submit" VALUE="Submit Query"> <P>
To clear the form, press this button: <INPUT TYPE="reset"> <P>
</FORM>

5.簡単な submit(cgi-bin)の処理方法

 FORMタグのsubmitによる処理系(cgi-bin)の記述は、シェルスク
リプト、Perl、C等を使って行われています。ここでは、シェルスク
リプト、Perl、Cを使った簡単なCGIプログラムのスケルトン(骨組
み)を説明します。

 submitボタンを押すことによって、FORMタグで入力されたデータ
が、指定されたCGIへの引数として渡され、CGIプログラムに渡され
ます。一般的なFORMタグおよびINPUTタグは、つぎのような方法で記
述します。

Press the button to submit:

<FORM METHOD="POST" ACTION="/cgi-bin/foo">
<INPUT NAME="Test"> <p>
Press the button to submit: <INPUT TYPE="submit" VALUE="Submit Query"> <p>
</FORM>
 INPUTタグで入力されたデータは、つぎの形でACTIONで指定した
URL(プログラム)に渡されます。各データは「&」で区切られてい
ます。このとき、スペースは「+」に変換されることに注意してくだ
さい。したがって、データを取り出す際には、これらの点を考慮し
て処理しなければなりません。

これらの点を考慮して処理しなければなりません。

  action?name=value&name=value&name=value...
 

5.1 シェルスクリプトでの記述例

#!/bin/sh
前処理(プログラムの定義、初期値の設定など)
cat << EOF
Content-type: text/html

<HEAD><TITLE>タイトル</TITLE></HEAD>
<BODY>
HTMLの文書
EOF
処理系(処理とその結果を記述する)
echo '</BODY>'
 <HEAD><BODY>は、古いバージョンとの互換性を保つために記述
するもので、特に必要はありません。

 前処理の段階で、処理系に渡すためにデータを分割する。データ
の分割方法は、sedやawkを使うのが一般的です。いろいろな記述方
法があると思います。Content-type: text/htmlを先頭にHTML文書の
ヘッダ、タイトルと前書きを記述する。分割したデータを使って、
処理系を記述する。

5.2 Perlでの記述例

 Perlでの記述でも基本的には、シェルスクリプトの場合と同じよ
うな記述となります。いろいろな記述方法があると思いますが、こ
こでは一例を説明します。

#!/usr/local/bin/perl
print "Content-type: text/html\n\n";
print "<TITLE>タイトル名</TITLE>;
print "<H1>本文中のタイトル</H1>;
read(STDIN, &buffer, $ENV{'CONTENT_LENGTH'});
@pairs = split(/&/, $buffer);
foreach $pair (@pairs)
{
($name, $value) = split(/=/, $pair);
$value =~ tr/+/ /;
$value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;
$FORM{$name} = $value;
}
入力データがなかったときの処理
処理系
 foreach文の部分で、INPUTタグで名前(input_name)をつけたも
のを$FORM{'input_name'}として処理できます。たとえば、INPUT
グで、

  <INPUT NAME="your_name">
としていた場合、$FORM{'your_name'}を使って処理できます。その
ままこの名前をログファイルに残したければ、処理系で、

open (LOG, ">>/foo/log.html") || die "Can't open file\n";
print LOG "<title>Loggin data</title>\n"
print LOG "<h1>Loggin data</h1>\n"
print LOG "\n";
print LOG "$FORM{'your_name'} <p>\n";
print LOG "\n";
のように書いておきます。

入力データが空の場合は、つぎのように処理します。

&empty_data unless $FORM{'name'};
:
:
sub empty_data
{
print "空である旨を伝える";
exit;
}
Perlでは、cgi-binを記述するための便利なライブラリもあります。

6.その他

6.1 画像情報を得るための方法

To reset the form, press this button:

<FORM METHOD="POST" ACTION="/cgi-bin/post-query"> 
<INPUT NAME="Testimg" TYPE="image" SRC="rose.gif">
<UL>
<LI> <INPUT TYPE="radio" NAME="zoom" VALUE="2" CHECKED> Zoom in 2x.
<LI> <INPUT TYPE="radio" NAME="zoom" VALUE="4"> Zoom in 4x.
<LI> <INPUT TYPE="radio" NAME="zoom" VALUE="8"> Zoom in 8x.
</UL>
To reset the form, press this button: <INPUT TYPE="reset"> <P>
</FORM>