lHTML　ＣＧＩ フォーム '99. 4.27
l.お知らせ　内容　LINK　FILE 　 HTML　Win　PC　Unix　MS-DOS　C　C++　Mfc　Java　
.全般_ .文字 _配置 　表 _リンク .フレ-ム 　ＣＧＩ .タグ一覧.
登録_ .音・画. .スタイル .マ-キ-. .ActiveX. 　---　 .色の名前. _色一覧
　CGI 　仕組  　フォ-ム 　具体例 　仕組   　 　カウンタ 　*  
 　メール → [リンク]
※　ＣＧＩのページは、作成予定はありません。
フォ-ム 　 一行入力 　 複数行入力 　 リストメニュー 　 選択ボタン 　 その他のボタン 　 付加情報 　 送信ボタン・リセットボタン 　 スタイルの併用
このペ-ジは、[具体例] のペ-ジとほぼ同じ内容です。
初期表示時間を節約するために、表を小さく分割しています。
メ-ルデコ-ダが使えないと実用性が少ないので、ＣＧＩのグループに含めました。

T⇔ フォーム
ページを見ている人がデータを入力できる場所を作ります。
デ-タは普通、@メ-ルデコ-ダが処理してから、Aメ-ルにして送られます。
メ-ルデコ-ダを使わない方法は、[仕組] のページを参照下さい。

<P> ←以下、ひとつの段落として表示されます。(空行が設けられます。)
<FORM METHOD="post" ACTION="/cgi-bin/usermail">
　ここに、下記の <INPUT> などの要素を書きます。
</FORM>
<P> ←以上、ひとつの段落として表示されます。(空行が設けられます。)

　METHOD=post　:　入力したデータを、メールで送る指定をします。
　ACTION="/cgi-bin/usermail"　:　メールで送るためのプログラムを指定します。
　※　プログラムが用意されていなければ、データをメールで送ることはできません。
　　　上記の usermail は、SANNET に用意されているプログラムの例です。
　※　アクションプログラムがなくても、フォームの表示だけはできます。
　※　ACTION には、開きたい HTMLファイルを指定することもできます。

T 一行入力
<INPUT NAME="F1" TYPE="text" VALUE="姓 名" SIZE="10" MAXLENGTH="5">

　NAME=F1　:　入力データをメールで受け取ったとき、他と区別するための名前。
　TYPE="text"　:　入力データがテキスト（文字列）であることを指定します。
　VALUE="姓 名"　:　デフォルトのデータを表示します。（省略可）
　SIZE="10"　:　入力窓の幅を、10 文字分にします。（省略可）
　MAXLENGTH="5"　:　実際に入力できる字数を、5 文字までに制限します。（省略可）
　※　全角文字は、半角換算で数えます。（ＡＢなら４文字と数えます。）
　　　入力窓に納まらない長い文のときは、文がスクロールします。→ abc
 　※　一行のみ入力でき、リターンキーを押すと送信されます。(１個のとき)
　※　&amp;、<BR> などや、半角カタカナも入力できます。 ( 以下同様。)
T 一行入力（パスワード）
<INPUT NAME="form-2" TYPE="password">
文字を入力するとこのように表示されます→
　NAME=form-2　:　他のデータと区別するための、名前を付けます。
　TYPE="password"　:　入力した文字を、全て * で表示する指定をします。
　※　VALUE　SIZE　MAXLENGTH　も指定できます。

T 複数行入力（テキストエリア）
<TEXTAREA NAME="form-3" COLS="50" ROWS="3">
ご意見をどうぞ （デフォルトの文章　・・・省略可）
</TEXTAREA>

　NAME=form-3　:　他のデータと区別するための、名前を付けます。
　COLS="30"　:　テキストエリアの横幅を、30 文字分の大きさにします。（省略可）
　ROWS="3"　:　テキストエリアの縦幅を、３行分の大きさにします。（　〃　）
　※ 複数行を入力でき、Enter キーを押すと改行されます。
送信ファイルの選択
<INPUT NAME="form-4" TYPE="file" SIZE="50">

文章を入力する代りに、ファイル名を入力します。
ファイルは、あらかじめ作っておく必要があります。
[参照]ボタンをクリックすると、ファイル選択のウィンドウが表示されます。

T リストメニュー（択一）
<SELECT NAME="form-5" SIZE="3">
<OPTION>りんご
<OPTION>ミカン
<OPTION SELECTED>バナナ
</SELECT>

　NAME=form-5　:　他のデータと区別するための、名前を付けます。
　SIZE="3"　:　リスト枠の大きさを、３行にします。
　　要素の数(この例では３個)より小さくすると、スクロールバーが設けられます。
　　記述を省略したり １を指定すると、ポップアップメニューになります。
　SELECTED　:　あらかじめ、[バナナ]を選択しておきます。
　OPTION　:　リストの項目です。
ポップアップメニューの例

 <SELECT NAME="form-51" SIZE="1">
<OPTION>りんご　 <OPTION>ミカン　 <OPTION>バナナ
</SELECT>
スクロールバーを設ける例

 <SELECT NAME="form-52" SIZE="2">
<OPTION>りんご <OPTION>ミカン <OPTION>バナナ
</SELECT>

T 選択ボタン
ラジオボタン（択一ボタン）
<INPUT NAME="form-6" TYPE="radio" VALUE="R" CHECKED>りんご</INPUT>
<INPUT NAME="form-6" TYPE="radio" VALUE="M">ミカン</INPUT>
<INPUT NAME="form-6" TYPE="radio" VALUE="B">バナナ</INPUT>
りんご　 ミカン　 バナナ
　NAME=form-6　:　ひとつのグループには、同じ名前を付けます。(択一にする為。)
　TYPE="radio"　:　ラジオボタンの指定をします。
　CHECKED　:　あらかじめ[りんご]を選択しておきます。（省略可）
　VALUE="R"　:　選択されたボタンが区別できるように、
　　　　それぞれのボタンに 別々の値を付けておきます。
　※　もしグループ内にボタンが１個だけなら、常にその１個が選択されます。
チェックボックス（任意個選択ボックス）
<INPUT NAME="form-7" TYPE="checkbox" VALUE="リ" CHECKED>りんご
<INPUT NAME="form-7" TYPE="checkbox" VALUE="ミ">ミカン
<INPUT NAME="form-7" TYPE="checkbox" VALUE="バ">バナナ
りんご　 ミカン　 バナナ
　NAME=form-7　:　ひとつのグループには、同じ名前を付けます。
　TYPE="checkbox"　:　チェックボックスの指定をします。
　CHECKED　:　あらかじめ[りんご]を選択しておきます。（省略可）
　VALUE="リ"　:　選択されたボックスを区別する為の値。

T その他のボタン
画像ファイルを使ったボタン
<INPUT NAME="form-x" TYPE="image"
SRC="../../gazou/big-BT_G.gif" BORDER="0">

　NAME=form-x　:　他のデータと区別するための、名前を付けます。
　TYPE=image&　:　ボタンのデザインに画像を使う指定をします。
　SRC=big-BT_G.gif　:　画像ファイルを指定します。（省略可）
　BORDER=0　:　画像ファイルの縁取り枠を０にします。（対 Netscape）
　※　あらかじめ画像ファイル（この例では big-BT_G.gif ）を作っておきます。
　※　下記の[送信ボタン]の機能も併せ持っています。
データは送らないボタン
<INPUT TYPE="button" VALUE="ボタン">

　用例　( JavaScript などで使用できます。)
<INPUT TYPE="button" VALUE="押して下さい" OnClick=alert('ありがとう')>
　

T 付加情報 （他のデータと一緒に、あらかじめ決めてあるデータを送ります。）
<INPUT NAME="form-8" TYPE="hidden" VALUE="フォームのデータ(1)">
hidden は、そのフォームを表示しない指定です。
この例では、[form-8]というデ-タ名で、[フォームのデータ(1)] というデ-タが送られます。
例えば、
<FORM>〜</FORM> がたくさんある場合に、それらを区別する目的で利用できます。

T 送信ボタン と リセットボタン
<INPUT TYPE="submit" VALUE="送信">
<INPUT TYPE="reset" VALUE="リセット">

　TYPE="submit"　:　入力された上記の全データを、メールにして送信します。
　TYPE="reset"　:　フォーム内の全データを、リセットします。（デフォルトの状態に戻します。）
　VALUE="送信"　:　上記の例のように、ボタンに名前を表示します。


T スタイルの併用 ( 色・背景は、IE4.0 専用。)
IE4.0 は、FONT SIZE で文字の大きさを設定できませんが、
スタイルを使用すると、文字の大きさの他に 背景なども設定できます。

<FORM STYLE="MARGIN-TOP:0PX;MARGIN-LEFT:10PX">
 <SELECT SIZE="1" STYLE="BACKGROUND-COLOR:E8FFE0;WIDTH:500PX;">
    <OPTION SELECTED>フォームの色は薄緑
    <OPTION STYLE="COLOR:blue;">文字の色は青色
    <!--省略-->
    <OPTION STYLE="BACKGROUND-COLOR:80E080;">背景色は濃緑色
 </SELECT>
</FORM>
<FORM STYLE="MARGIN-TOP:0PX;MARGIN-LEFT:10PX">
<INPUT TYPE="button" VALUE="クリック"
STYLE="FONT-SIZE:50PX; COLOR:FFF8F8; BACKGROUND-COLOR:E0E0FF;
BACKGROUND-IMAGE:URL(../gazou/Big-B050.gif);"
OnClick="alert('ありがとう')" >
</FORM>
TYPE=text なども同じです。


T
　　mtoga@sannet.ne.jp 　 登録日 '96. 6.15
URL : http://www.page.sannet.ne.jp/mtoga/index.html