複数のフォーム

Index Back Next
複数のフォームがある場合,それぞれのフォームはforms[0],form[1],forms[2]・・・のように配列として割り当てられます.このことを利用して,簡単なサンプルを作成してみます.

[例]

	<SCRIPT LANGUAGE="JavaScript">
	<!--
	function display( i ){		
		document.forms[i].val.value= i + "番目のフォームです";		//(1)
	}
	//-->
	</SCRIPT>
	
	forms[0]
	<form name ="a">					//forms[0]またはforms["a"]
	<input name="val" size=30 maxlength=30>
	</form><br>
	forms[1]	
	<form name ="b">					//forms[1]またはforms["b"]
	<input name="val" size=30 maxlength=30>
	</form><br>
	forms[2]
	<form name ="c">					//forms[2]またはforms["c"]	
	<input name="val" size=30 maxlength=30>
	</form><p>					//forms[3]またはforms["d"]
	ボタンを押すと,その番号に対応しているフォーム内のテキストボックスへ文字を表示します.<p>
	<form name ="d">			
	<input type=button value="Button0" onclick="display(0)">	//(2)
	<input type=button value="Button1" onclick="display(1)">
	<input type=button value="Button2" onclick="display(2)">
	</form>

【解説】

(1)ここでi番目のフォームに文字を出力します.
(2)各ボタンを押すと,それぞれのボタンの番号に対応したフォームに文字列を表示します.

form[0],form[1]などは,NAMEオプションでそれぞれ"a","b"と定義しているので,form["a"],form["b"]と置き換えることも可能です.また,直接フォームのNAMEでdocument.a.val.valueとすることもできます.さらに各フォームがいくつかの要素(テキストボックス,ボタン,リスト等)で構成されている場合,それぞれの要素は順番にelements[0],elements[1]といった,elements配列として割り当てられます.

【実行してみよう】

forms[0]

forms[1]

forms[2]

ボタンを押すと,その番号に対応しているフォーム内のテキストボックスへ文字を表示します.


1998(C) Motonari Morikawa