フォームにアクセスする

フォームにアクセス - name 属性をつけた方法

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
function str_move() {	//┌────────←代入される←────────┐
	document.forms.form1.elements.text2.value = document.forms.form1.elements.text1.value;
}
// -->
</script>
</head>
<body>
<form action="#" name="form1">
<input type="text" name="text1" value="">
<input type="text" name="text2" value="">
<input type="button" value="文字移動" onclick="str_move();">
</form>
</body>
</html>

document.forms.フォームの名前.elements.エレメント（要素）の名前.value; として、フォームとその要素（ここでは <input>）に name 属性（または id 属性）をつけてフォームの値を取得します。

以下も同様です

document.forms["form1"].elements["text2"].value = document.forms["form1"].elements["text1"].value;

document.form1.text2.value = document.form1.text1.value;

document.form1["text2"].value = document.form1["text1"].value;

上記の例は、このページの form1 というフォーム名の text1 (text2) というエレメント名の値ということになります。

フォームにアクセス - 配列を用いた方法

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
function str_move2() {	//┌─────←代入される←─────┐
	document.forms[0].elements[1].value = document.forms[0].elements[0].value;
}
function str_move3() {
	document.forms[1].elements[1].value = document.forms[1].elements[0].value;
}
// -->
</script>
</head>
<body>
<form action="#">	<!-- 1つ目のフォーム - forms[0] -->
<input type="text">	<!-- 1つ目のフォームの1つ目のエレメント - elements[0] -->
<input type="text">	<!-- 1つ目のフォームの2つ目のエレメント - elements[1] -->
<input type="button" value="文字移動" onclick="str_move2();">
</form>

<form action="#">	<!-- 2つ目のフォーム - forms[1] -->
<input type="text">	<!-- 2つ目のフォームの1つ目のエレメント - elements[0] -->
<input type="text">	<!-- 2つ目のフォームの2つ目のエレメント - elements[1] -->
<input type="button" value="文字移動" onclick="str_move3();">
</form>
</body>
</html>

name 属性の代わりにフォームとエレメントの個数を参照して取得します。取得するには document.forms[n].elements[n].value; として、ソース内の上から数えて n 番目のエレメントというを取得方法を用います。

JavaScript 全般にもいえることですが、基本的に配列の一番初めの値（配列番号）は「0」なので、最初の <form> ～ </form> は1番目ですが forms[0] となります。そして2番目のフォームは forms[1] となります。

エレメント（要素）も同様に、1番目は elements[0]、2番目は elements[1]、3番目は elements[2] ... のようになります。

上記の例は、このページの n 番目のフォームの n 番目のエレメントの値ということになります。