html-ＣＧＩ(フォ-ム : 具体例)　

lHTML　ＣＧＩフォーム '99. 2.11整

.お知らせ　内容　 LINK　FILE 　 HTML　Win　PC　Unix　MS-DOS　C　C++　Mfc　Java　

.全般_	.文字	_配置	表	_リンク	.フレ-ム	ＣＧＩ	.タグ一覧.
登録_	.音・画.	.スタイル	.マ-キ-.	.ActiveX.	---	.色の名前.	_色一覧

　CGI 　仕組

　フォ-ム　 具体例 　仕組

　カウンタ　 *

フォ-ム　一行入力　複数行入力　リストメニュー　選択ボタン　その他のボタン　付加情報　送信ボタン・リセットボタン　スタイルの併用

ページ内

T⇔ フォーム
ページを見ている人がデータを入力できる場所を作ります。
デ-タは普通、①メ-ルデコ-ダが処理してから、②メ-ルにして送られます。

同じ内容のメールが、実際に何通か送られてきます。なるべく送らないで・・・。

<P> ←以下、ひとつの段落として表示されます。(空行が設けられます。)
<FORM METHOD="post" ACTION="/cgi-bin/usermail">
　METHOD=post　:　入力したデータを、メールで送る指定をします。
　ACTION="/cgi-bin/usermail"　:　メールで送るためのプログラムを指定します。
　※　プログラムが用意されていなければ、データをメールで送ることはできません。
　　　上記の usermail は、SANNET に用意されているプログラムの例です。
　※　アクションプログラムがなくても、フォームの表示だけはできます。
　※　IExplorer だけで使うなら、ACTION に開きたいファイルを指定することもできます。

T 一行入力
<INPUT NAME="form-1" TYPE="text" VALUE="姓名" SIZE="40" MAXLENGTH="30">

　メールアドレスでも書いてください。

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

一行入力（パスワード）
<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"　:　リスト枠の大きさを、３行にします。
　　要素の数(この例では３個)より小さくすると、スクロールバーが設けられます。
　　記述を省略したり１を指定すると、ポップアップメニューになります。
　　※　Netscape では、必ずスクロールバーが表示されます。
　SELECTED　:　あらかじめ、[りんご]を選択しておきます。
　OPTION　:　リストの項目です。

ポップアップメニューの例

スクロールバーを設ける例

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="ボタン">

　_用例
　 <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="送信"　:　上記の例のように、ボタンに名前を表示します。

</FORM>
<P> ←以上、ひとつの段落として表示されます。(空行が設けられます。)

T スタイルの併用 ( Netscape では確認していません。)

<FORM>
  <SELECT SIZE="1" STYLE="BACKGROUND-COLOR:E8FFE0;WIDTH:500PX;">
    <OPTION SELECTED>フォームの色は薄緑
    <OPTION STYLE="COLOR:blue;">文字の色は青色
    <!--省略-->
    <OPTION STYLE="BACKGROUND-COLOR:80E080;">背景色は濃緑色
  </SELECT>
</FORM>

<FORM>
<INPUT TYPE="button" VALUE="クリック"
STYLE="BACKGROUND-COLOR:D04000;FONT-SIZE:50PX;COLOR:FFFF00;"
OnClick="alert('ありがとう')" >
</FORM>
TYPE=text なども同じです。

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