Formの扱い方
Java Scriptでは、フォーム（form)の各項目は、
ウィンドウ．フレーム．document．フォーム．エレメント．value
で表す。同じウィンドウ内・同じフレーム内であれば、ウィンドウ・フレームは省略する。

フォーム（form)や各エレメント(elements)は、番号と名称のどちらで表してもよい。
従って、下の例で

document.forms[0].elements[0].value
document.forms[0].ele_a.value
document.frm_a.elements[0].value
document.frm_a.ele_a.value

 は、すべて同じものである。
以下のような2個のフォームがあり、それぞれに2個・3個の入力項目がある場合、
入力項目Data-AとData-Eの表現は、次のようになる。
Data-Adocument.forms[0].elements[0].value
document.frm_a.ele_a.value
Data-Edocument.forms[1].elements[2].value
document.frm_b.ele_c.value


 <form method="post" name="frm_a">
<input type="text" name="ele_a" size="16">
<input type="text" name="ele_b" size="16">
</form>



<form method="post" name="frm_b">
<input type="text" name="ele_a" size="16">
<input type="text" name="ele_b" size="16">
<input type="text" name="ele_c" size="16">
</form>
フォームの値の操作は、
変数＝ ウィンドウ．フレーム．document．フォーム．エレメント．value
ウィンドウ．フレーム．document．フォーム．エレメント．value ＝変数
で右辺から左辺への代入を行えばよい。同じウィンドウ内・同じフレーム内であれば、ウィンドウ・フレームは省略する。

［例］

var xa=document.forms[0].elements[0].value
document.forms[0].ele_a.value=xa




四則計算




この部分をHTMLファイルでセーブすればよい 

<HTML>
<HEAD>
<TITLE>Form IO</TITLE>
<SCRIPT LANGUAGE="JavaScript">

function keisan()
{
  var xa=eval(document.calc.value_a.value) ;
  var xb=eval(document.calc.value_b.value) ;
  var op=document.calc.operator.value ;

  if(op=="+")
  {
    xc=xa+xb ;
    document.calc.answer.value=xc ;
  }
  else if(op=="-")
  {
    xc=xa-xb ;
    document.calc.answer.value=xc ;
  }
  else if(op=="*")
  {
    xc=xa*xb ;
    document.calc.answer.value=xc ;
  }
  else if(op=="/")
  {
    if(xb!=0)
    {
      xc=xa/xb ;
      document.calc.answer.value=xc ;
    }
    else
    {
      document.calc.answer.value="Divide Check" ;
    }
  }
  else
  {
    document.calc.answer.value="Invalid" ;
  }
}

</SCRIPT>
</HEAD>
<body bgcolor="#aaccff" text="#000000" background="bk04.jpg">
<center>
<table cellpadding=10 background="bj/20.jpg" width=700>
<tr><td>

<form method="post" name="calc">
<input type="text" name="value_a" size="16">
<select name="operator" onchange="keisan()">
<option value=" " selected>OP</option>
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" name="value_b" size="16">
<input type="button" value="=" name="kotae" onclick="keisan()">
<input type="text" name="answer" size="36">
</form>

</td></tr>
</table>
</center>
</BODY>
</HTML>
説　　明
（上の例の部分をHTMLファイルにした場合） 
<HTML>
<HEAD>
<TITLE>Disp time</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function keisan()
{
変数xaに
１番目入力フォームcalcの
１番目のエレメントvalue_aの値value
を代入する
関数eval(引数)は
引数が文字列の場合、それが表す数値を値とする。
例えば、va=eval("123")では、vaの値は百二十三となる。
なお、引数が数値でもよく、その場合はそのままの値となる。
 

  var xa=eval(document.calc.value_a.value) ;
変数xbに
calcという名称の入力フォーム（forms[0]と同じ物）の
value_bという名称のエレメント（elements[2]と同じ物）の値value
を代入する 

  var xb=eval(document.calc.value_b.value) ;
変数opに
１番目入力フォームcalcの
２番目のエレメントoperatorの値value
を代入する 

  var op=document.calc.operator.value ;


  if(op=="+")
  {
    xc=xa+xb ;
１番目入力フォームcalcの
answerという名称のエレメント（elements[4]:５番目のエレメントと同じ物）の値valueを
変数xcの値とする（以下の演算子でも共通） 

    document.calc.answer.value=xc ;

  }
  else if(op=="-")
  {
    xc=xa-xb ;
    document.calc.answer.value=xc ;
  }
  else if(op=="*")
  {
    xc=xa*xb ;
    document.calc.answer.value=xc ;
  }
  else if(op=="/")
  {
    if(xb!=0)
    {
      xc=xa/xb ;
      document.calc.answer.value=xc ;
    }
    else
    {
      document.calc.answer.value="Divide Check" ;
    }
  }
  else
  {
    document.calc.answer.value="Invalid" ;
  }
}
</SCRIPT>
</HEAD>
<body bgcolor="#aaccff" text="#000000" background="bk04.jpg">
<center>
<table cellpadding=10 background="bj/20.jpg" width=700>
<tr><td>
入力フォームの始まり
Java Script内で
「１番目のフォームforms[0]」または「calcという名称」で参照される 
<form method="post" name="calc">
１番目のエレメント
テキストボックス←ここに値を入力する

Java Script内でelements[0]または名称value_aで参照される 
<input type="text" name="value_a" size="16">
２番目のエレメント
セレクトボックス ▼矢印を押してメニューを出して選択する

Java Script内でelements[1]または名称operatorで参照される
ここでは、選択項目が変わると関数keisan()が実行される 
<select name="operator" onchange="keisan()">
<option value=" " selected>OP</option>
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
３番目のエレメント
テキストボックス←ここに値を入力する

Java Script内でelements[2]または名称value_bで参照される 
<input type="text" name="value_b" size="16">
４番目のエレメント
ボタン←ここをクリックする

Java Script内でelements[3]または名称kotaeで参照される
ここでは、ボタンをクリックすると関数keisan()が実行される 
<input type="button" value="=" name="kotae" onclick="keisan()">
５番目のエレメント
テキストボックス←ここに値を入力する

ここでは、計算結果をJava Scriptが書き込む
Java Script内でelements[4]または名称answerで参照される 
<input type="text" name="answer" size="36">
入力フォームの終了 
</form>

</td></tr>
</table>
</center>
</BODY>
</HTML>


■ <input type=タイプ>の各種タイプ

◆ テキスト入力フィールド（type="text"）

通常のテキストを入力する、最も一般的なフィールドです。

名前：
◆ パスワード入力フィールド（type="password"）

他の人にパスワードを見られないように、入力した文字がすべてアスタリスク（*）で表示されます。

パスワード：
◆ ファイル名入力フィールド（type="file"）

ブラウザからWWWサーバーにファイルをアップロードする際に用います。入力フィールドの横には参照ボタンが表示されます。WWWサーバー側にはファイルを受け取るための特別なCGIスクリプトなどを設置しておく必要があります。セキュリティのために、初期値を設定したり、スクリプトで値を操作することはできません。

転送ファイル：
◆ チェックボックス（type="checkbox"）

オン・オフの値を持つチェックボックスを表示します。

チェックボックス（A)
チェックボックス（B)
◆ ラジオボタン（type="radio"）

同じ name 属性を持つラジオボタンでひとつのラジオボタングループを形成します。複数の内、どれかひとつしかチェックできない点がチェックボックスと異なります。

Yes No
◆ 隠しフィールド（type="hidden"）

画面上には表示されません。ユーザに気づかれない値をこっそりと<form> の action で指定したアクションに渡すために用いられます。

◆ 実行ボタン（type="submit"）

このボタンを押すと、<form> タグの action属性で指定したアクションが呼び出されます。

◆ 取消ボタン（type="reset"）

このボタンを押すと、それまでに入力した情報をすべてキャンセルして、最初から入力をやり直すことができます。

◆ 汎用ボタン（type="button"）

<input type="button" onclick="...">のように、ボタンを押した時にJavaScriptなどを起動する際によく用いられます。

◆ 画像ボタン（type="image"）

例えば、<input type=image name="AAA" height=100 width=100 src="momo.gif"> という画像ボタンをクリックすると、クリックした座標が AAA.x=n AAA.y=n という形式でアクションに送信されます。