JavaScript とフォームをくみ合わせることによって、いろいろなことができます。下記の例では、2つの入力フォームに入力した値の合計を表示します。
<script>
function func() {
var xx = parseFloat(document.F1.T1.value);
var yy = parseFloat(document.F1.T2.value);
document.F1.T3.value = xx + yy;
}
</script>
<form name="F1" action="#">
<input type="text" name="T1">
＋
<input type="text" name="T2">
<input type="button" value="＝" onclick="func()">
<input type="text" name="T3">
</form>
OK ボタンを押したとき（onclick）に、func() という名前の関数が呼び出されます。func() では、ドキュメント（document）の中の F1 という名前のフォーム（form）の中の、T1 という名前の部品の値（value）を数値に変換（parseFloat()）し、変数 xx に代入しています。同様に yy に T2 欄の値を入れて、その合計を T3 の欄に表示しています。
フォームの値は文字列なので、これを数値として扱う場合は、parseFloat() などの数値変換を用いてください。例えば次の例で、入力欄に 100 を代入して OK を押すと、100 + 100 で 200 になりそうですが実際には "100" + 100 が文字列演算と見なされて、結果は "100100" になってしまいます。
<script>
function func() {
alert(document.F1.T1.value + 100);
}
</script>
<form name="F1" action="#">
<input type="text" name="T1" value="100">
<input type="button" value="OK" onclick="func()">
</form>
forms は <form>～</form> に対応するフォームオブジェクトの配列を、length はその個数を示します。
個々のフォームオブジェクトを示します。0 から始まる通し番号の他、<form> タグの name 属性で指定したフォーム名（例では "FORM1"）を用いて直接参照することもできます。
f = document.forms[0]; f = document.forms["FORM1"]; f = document.FORM1;
それぞれ、<form> タグで指定した action、encoding、method、name、target 属性の値を示します。
それぞれ、フォームのサブミットボタン、リセットボタンを押したのと同じ効果を起こします。
フォームのイベントハンドラを呼び出します。
elements はフォームを構成する各々の部品（エレメント）オブジェクトの配列、length はその個数を示します。
フォームを構成する個々のエレメントオブジェクトを指定します。0 から始まる通し番号や、<input> タグなどの name 属性で指定したエレメント名（例では "ELEM1"）を用いて参照します。
e = document.FORM1.elements[0]; e = document.FORM1.ELEM1;
それぞれの部品は、共通プロパティや共通メソッドの他、そのタイプによって異なるプロパティやメソッドをサポートします。
name 属性で指定した、このフォーム部品の名前を示します。
"text" や "submit" などの、このフォーム部品のタイプを示します。
このフォーム部品を包含するフォームオブジェクトを示します。
このフォーム部品の値。text, password, textarea の場合は入力された文字列、button, submit, reset の場合はボタンに表示される文字列となります。textarea の場合、改行コードは通常、文字コード 0x0d 0x0a で表されますが、Netscape 6.1 は 0x0a のみになるようです。
focus() はこのエレメントにフォーカスを移し、blur() はこのエレメントからフォーカスをはずします。
テキスト部品（<input type="text">）、パスワード部品（<input type="password">）、ファイル部品（<input type="file">）、テキストエリア部品（<textarea>）は、共通プロパティや共通メソッドの他に下記のプロパティやメソッドをサポートしています。
初期値として表示する文字列を示します。ただし、セキュリティのため、ファイル部品に対しては設定することができません。
入力フィールド内の文字列を選択状態にします。下記のようにすることで、その入力フィールドにフォーカスが移った際に、入力済みの文字列をすべて選択状態にすることができます。
<input type="text" onfocus="this.select()">
チェックボックス部品（<input type="checkbox">）、 ラジオボタン部品（<input type="radio">）、 ボタン部品（<input type="button">）、サブミット部品（<input type="submit">）、 リセット部品（<input type="reset">）は、共通プロパティや共通メソッドの他に下記のプロパティやメソッドをサポートしています。
チェックボックスとラジオボタンにのみ有効です。defaultChecked は初期値としてチェックされていたかどうか、checked は現在チェックされているかどうかを示す真偽値を返します。checked に true や false を代入することもできます。
チェックボックスがチェックされているかどうかを調べるには次のようにします。
<script>
function func() {
if (document.F1.C1.checked) {
alert(document.F1.C1.value);
}
if (document.F1.C2.checked) {
alert(document.F1.C2.value);
}
}
</script>
<form name="F1" action="#">
<input type="checkbox" name="C1" value="AAA">AAA
<input type="checkbox" name="C2" value="BBB">BBB
<input type="button" value="OK" onclick="func()">
</form>
ラジオボタンがチェックされているかどうかを調べるには次のようにします。
<script>
function func() {
var i;
if (document.F1.R1.length) {
for (var i = 0; i < document.F1.R1.length; i++) {
if (document.F1.R1[i].checked) {
alert(document.F1.R1[i].value);
}
}
} else {
if (document.F1.R1.checked) {
alert(document.F1.R1.value);
}
}
}
</script>
<form name="F1" action="#">
<input type="radio" name="R1" value="AAA" checked>AAA
<input type="radio" name="R1" value="BBB">BBB
<input type="radio" name="R1" value="CCC">CCC
<input type="button" value="OK" onclick="func()">
</form>
このボタンををクリックした状態にします。
セレクト部品（<select>）は、共通プロパティや共通メソッドの他に下記のプロパティをサポートしています。
オプション部品の個数、下記の options.length と同じ意味を持ちます。
現在選択されているオプションオブジェクトを示すインデックス番号（0～）を示します。これに値を代入することにより、セレクションボックスの選択項目を変更することができます。
<script>
function func() {
var n = document.F1.S1.selectedIndex;
alert(document.F1.S1.options[n].text);
}
</script>
<form name="F1" action="#">
<select name="S1">
<option>AAAA
<option>BBBB
<option>CCCC
</select>
<input type="button" value="OK" onclick="func()">
</form>
オプション部品（<option>）は、共通プロパティや共通メソッドの他に下記のプロパティをサポートしています。
options は<option>に対応するオプションオブジェクトの配列、options[n] は個々のオブジェクト、length は配列の個数を示します。
defaultSelected は初期値として選択されていたかどうかを示す真偽値、selected は現在選択されているかどうかを示す真偽値を返します。
オプションとして表示されている文字列を返します。
<option> タグの value 属性の値を返します。