INPUTタグでは単純なテキストボックスやオプションボタンしか生成できませんが、他のタグを使うと、リストボックスや長文入力のできるテキストボックスが生成できます。また、INPUTタグでファイルを送信させることも可能です。
- リストボックス -
複数の選択肢から１つを選べるようにするには、オプションボタンの他にリストボックスが使えます。リストボックスはSELECTタグを使います。nameオプションで識別名を設定した上で、リストに表示する項目をOPTIONタグで１つずつ設定します。
リストボックスを生成するための書式は、以下のようになります。
<SELECT name="識別名" size="リスト行数">
<OPTION>項目名1</OPTION>
<OPTION>項目名2</OPTION>
:
</SELECT>
１つの項目をあらかじめ選択した状態とするには、OPTIONタグにselectedオプションを付け、値を"selected"とします。
SELECTタグのオプション
| ・ |
name
リストボックスの名前を指定します。 |
| ・ |
size
表示するリストの行数を指定します。省略すると、ドロップダウン式のリストボックスとなります。 |
OPTIONタグのオプション
| ・ |
selected
特定の項目を選択したい場合に"selected"とします。省略すると、選択されていない状態となります。どの項目にもselected="selected"のオプションが指定されていなければ、先頭（一番上）の項目が選択状態となります。
selectedオプションの規定値は"selected"なので、値を省略して単にselectedとだけ記述しても同じ結果となります。 |
リストボックスの前には、通常「何を選択すればよいのか」を示す項目名を、テキストデータとして表示します。
例)
所属を「総務／人事／経理」の中から選択するためのリストを表示します。初期状態では「総務」が選択されているようにします。
所属を選択してください：
<SELECT name="sect">
<OPTION>総務</OPTION>
<OPTION>人事</OPTION>
<OPTION selected="selected">経理</OPTION>
</SELECT>
ユーザーが「人事」の項目を選択して送信すると、CGIプログラムには“sect”の値が“人事”となったデータが渡されます。
- 長文用テキストボックス -
typeオプションに"text"を指定したテキストボックスは、１行しか入力できません。複数行にわたる長い文章を受け取りたい場合は、TEXTAREAタグを使います。TEXTAREAタグでは、nameオプションでテキストボックスの識別名を設定します。
長文用テキストボックスを生成するための書式は、以下のようになります。
<TEXTAREA name="識別名" rows="行数" cols="1行の文字数">
初期値
</TEXTAREA>
| ・ |
name
長文用テキストボックスの識別名です。 |
| ・ |
rows
入力領域の行数を指定します。 |
| ・ |
cols
１行の文字数をバイト数で指定します。 |
TEXTAREAタグは閉じるための指示</TEXTAREA>が必要で、その間に書かれたテキストを入力領域の初期とします。
例)
自由意見を求める入力領域を、40文字×６行で表示します。
<TEXTAREA name="opinion" rows="6" cols="40">
ここに自由なご意見をお書きください。
</TEXTAREA>
- ファイルの送信 -
テキストボックスなどを使ってブラウザでデータを入力してもらう代わりに、ユーザーがあらかじめ用意したファイルを送信してもらうことも可能です。
ファイルを送信するにはINPUTタグのtypeオプションを"file"とし、FORMタグのenctype属性で"multipart/form-data"を指定します。
ファイル送信のための書式は、以下のようになります。
<FORM action="CGIプログラム名"
method="post" enctype="multipart/form-data">
:
<INPUT type="file" name="識別名">
:
</FORM>
typeオプションに"file"を設定すると、ファイル名入力用のテキストボックスと共に、ダイアログボックスからファイルを選択するための[参照]ボタンが表示されます。[参照]ボタンをクリックしてオープンするファイル選択のダイアログボックスは、ブラウザの動作するOSによって異なります。
FORMタグのenctypeオプションは、送信されてきたデータのエンコード方法を示すもので、標準ではURLエンコードを示す
"application/x-www-form-urlencoded"となっています。テキストボックスなどの小さなデータはこれで構いませんが、大きなサイズのファイルを扱う場合、URLエンコードでは処理しきれないことがあるため、"multipart/form-data"を指定してメールに用いられるMIMEエンコードを適用します。
例)
ファイルを送信するための画面を生成します。
<FORM action="cgi-bin/test.cgi"
method="post" enctype="multipart/form-data">
氏名：<INPUT type="text" name="operator" size="20">
ファイル：<INPUT type="file" name="datafile">
</FORM>
エンコード方法をMIME(multipart/form-data)とした場合、データは以下のような形式で送られてきます。
“boundary”とはデータの境界を示す記号で、これによって各入力要素とそれに対する値が区切られます。
Content-Type: maltipart/form-data; boundary=---AabbZ
---AabbZ
Content-Disposition: form-data; name="operator"
YAMAZAKI, kunio
---AabbZ
Content-Disposition: form-data; name="submitfile"; filename="cstmlist.csv"
Content-Type: text/plain
......（ファイルの内容）......
---AabbZ--
 |
|
|
