フォームのエレメントへアクセスする

説明

入力フォームへのアクセス方法はいくつか用意されていますが、安全性／確実性を求めるのであれば従来通りの書き方を踏襲するのが良いでしょう。入力フォームへのアクセスはforms配列、エレメントへのアクセスはelements配列を使います。これらの配列に参照番号またはname属性で指定した名前をキーとして指定します。forms、elementsは連想配列でもあるため、このような書き方ができ、なおかつHTML文書内での出現順に番号が割り振られます。
ラジオボタンの場合はname属性で同じ名前が指定されます。この場合、JavaScriptではラジオボタングループとして扱われname属性で指定したラジオボタン名の配列として各ラジオボタンにアクセスすることができます。
セレクトメニューの場合は、さらにoptions配列を使用することで各項目にアクセスすることができます。
DOMへのアクセスを使った方法でも可能ですが、ブラウザによっては期待通りに動作しない場合があるため、フォーム名、エレメント名のid属性、name属性の指定には注意が必要です。どちらも同じ名前にしておくのも良いでしょう。また、Internet ExplorerではDOMアクセスを使った場合に、正しくアクセスできずにエラーとなってしまうエレメントもあるため注意が必要です。
JavaScriptテクニック ブック 　詳しい解説などはJavaScriptテクニック ブックを参照してください。

サンプルコード [実行]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>フォームのエレメントへアクセスする</h1>
<form action="./check.cgi" method="get" id="mainForm" name="mainForm">
テキストフィールド(1)：<input type="text" name="tfld1"><br>
テキストフィールド(2)：<input type="text" name="tfld2"><br>
テキストフィールド(3)：<input type="text" name="tfld3" id="tfld3"><br>
<input type="checkbox" name="cb">チェックボックス<br>
<input type="radio" name="rd">ラジオボタン(1)<br>
<input type="radio" name="rd">ラジオボタン(2)<br>
<select id="sel1" name="sel1">
<option value="item1">項目1</option>
<option value="item2" name="second">項目2</option>
</select>
<select id="sel2" name="sel2" multiple>
<option value="item1">項目1</option>
<option value="item2">項目2</option>
<option value="item3">項目3</option>
</select>
</form>
</body>
</html>
window.onload = function(){
document.forms[0].elements[0].value = "JavaScript";
document.forms["mainForm"].elements["tfld2"].value = "ECMAScript";
document.getElementById("tfld3").value = "JScript";
document.mainForm.cb.checked = true;
document.mainForm.rd[1].checked = true;
document.forms["mainForm"]["sel1"].options[1].selected = true;
document.forms["mainForm"]["sel2"].options[1].selected = true;
}