lHTML CGI フォーム '99. 2.11整
l.お知らせ 内容 LINK FILE   HTML Win PC Unix MS-DOS C C++ Mfc Java 
.全般_ .文字 _配置   _リンク .フレ-ム  CGI .タグ一覧.
登録_ .音・画. .スタイル .--. .ActiveX.  ---  .名前. _一覧
 CGI  仕組   フォ-ム  具体例  仕組    カウンタ  *  
フォ-ム   一行入力   複数行入力   リストメニュー   選択ボタン   その他のボタン   付加情報   送信ボタン・リセットボタン   スタイルの併用
ページ内

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

同じ内容のメールが、実際に何通か送られてきます。なるべく送らないで・・・。
<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 文字までに制限します。(省略可)
 ※ 全角文字は、半角換算で数えます。(ABなら4文字と数えます。)
   入力窓に納まらない長い文のときは、文がスクロールします。→ abc
 ※ 一行のみ入力でき、リターンキーを押すと送信されます。(1個のとき)
 ※ &amp;、<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" : テキストエリアの縦幅を、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" : リスト枠の大きさを、3行にします。
  要素の数(この例では3個)より小さくすると、スクロールバーが設けられます。
  記述を省略したり 1を指定すると、ポップアップメニューになります。
  ※ Netscape では、必ずスクロールバーが表示されます。
 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" : 選択されたボタンを区別する為の値。
 ※ もしグループ内にボタンが1個だけなら、常にその1個が選択されます。

チェックボックス(任意個選択ボックス)
<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 : 画像ファイルの縁取り枠を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 なども同じです。


T

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