11.フォームエレメントのイベント処理
   フォームエレメントへのアクセス方法には以下のようなものがあります。
 1)フォームのオブジェクト配列を使う方法
   フォームのオブジェクト配列「forms[]」と「elements[]」を使ってフォームエレメントにアクセスすることができます。
   forms[]は、<form>~</form>を一つのオブジェクト配列として扱います。
   たとえば、
    <form name="a">
      |
      |
    </form>

    <form name="b">
      |
      |
    </form>

   のように二つのフォームがあった場合は、
   forms[0]は、上のフォームがオブジェクト配列になります。
   forms[1]は、下のフォームがオブジェクト配列になります。

   一つのフォームの中のエレメントは、以下のように上から順にオブジェクト配列に格納されます。

   <form name="c">
   <input type="text" name="d" id="d"> ← elements[0]に格納されます。
   <input type="text" name="e" id="e"> ← elements[1]に格納されます。
   <input type="submit" name="f" id="f" value="f"> ← element[2]に格納されます。
   </form>

   上記プログラムでテキストフィールド(name="d")の「value」属性を書きかえるには、以下のようにします。

    document.forms[0].elements[0].value="テキストフィールド";

   連想配列で指定することもできます。

    document.forms["c"].elements["d"].value="テキストフィールド";

   上記プログラムでテキストフィールド(name="f")の「value」属性を書きかえるには、以下のようにします。

    document.forms[0].elements[2].value="クリックしてね!";

   連想配列で指定することもできます。

    document.forms["c"].elements["f"].value="クリックしてね!";

 2)「name」属性名をオブジェクトとしてアクセスする方法
   フォームエレメントにアクセスする方法として、以下のように「name」属性名をオブジェクトとして
  アクセスすることができます。
   <form name="c">
   <input type="text" name="d" id="d">
   <input type="text" name="e" id="e">
   <input type="submit" name="f" id="f" value="f">
   </form>

   document.c.d.value="テキストフィールド"; ← テキストフィールド「name="d"」の「value」属性を変更しています。
   document.c.f.value="クリックしてね!"; ← ボタン「name="f"」の「value」属性を変更しています。

 3)多次元配列でアクセスする方法
   フォームエレメントにアクセスする方法として、以下のように多次元配列でオブジェクトに
  アクセスすることができます。
   <form name="c">
   <input type="text" name="d" id="d">
   <input type="text" name="e" id="e">
   <input type="submit" name="f" id="f" value="f">
   </form>

   document.forms["c"]["d"].value="テキストフィールド"; ← テキストフィールド「name="d"」の「value」属性を変更しています。
   document.forms["c"]["f"].value="クリックしたな!";  ← ボタン「name="f"」の「value」属性を変更しています。

   document.forms[0][0].value="テキストフィールド"; ← テキストフィールド「name="d"」の「value」属性を変更しています。
   document.forms[0][2].value="クリックしたな!"; ← ボタン「name="f"」の「value」属性を変更しています。

 4)「id」属性や「name」属性を持つエレメントをオブジェクトとしてアクセスする方法
   getElementById(),getElementsByName()を使って、それぞれのエレメントをオブジェクト化してアクセスします。
   <form name="c">
   <input type="text" name="d" id="d">
   <input type="text" name="e" id="e">
   <input type="submit" name="f" id="f" value="f">
   </form>

   var element1=document.getElementById("d"); ←テキストフィールド「id="d"」をオブジェクト化しています。
   element1.value="テキストフィールド"; ← テキストフィールド「id="d"」の「value」属性を変更しています。

   var element2=document.getElementsByName("f"); ←ボタン「name="f"」をオブジェクト化しています。
   element2[0].value="クリックしたな!"; ← ボタン「name="d"」の「value」属性を変更しています。

 <サンプル>
   ファイル名:js11-1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>フォームエレメントにアクセスする方法</title>
<script type="text/javascript" src="js11-1.js"></script>
</head>
<body>
フォームエレメントにアクセスする方法<br />
<form id="formId" name="formName">
氏名:<input type="text" name="tfName1" id="tfId1"><br>
住所:<input type="text" name="tfName2" id="tfId2"><br>
E-Mail:<input type="text" name="tfName3" id="tfId3"><br>
性別:<input type="radio" value="男" name="rdName" id="rdId1">男
<input type="radio" value="女" name="rdName" id="rdId2">女<br>
貴方の趣味は:<input type="checkbox" valu="パソコン" name="cbName1" id="cbId1">パソコン
<input type="checkbox" valu="ドライブ" name="cbName2" id="cbId2">ドライブ<br>
貴方の出身地は:<select name="selName1" id="selId1">
<option value="大阪府" name="osakaName" id="osakaId">大阪府</option>
<option value="京都府" name="kyotoName" id="kyotoId">京都府</option>
<option value="奈良県" name="naraName" id="naraId">奈良県</option>
<option value="滋賀県" name="shigaName" id="shigaId">滋賀県</option>
<option value="兵庫県" name="hyogoName" id="hyogoId">兵庫県</option>
<option value="和歌山県" name="wakayamaName" id="wakayamaId">和歌山県</option>
</select><br />
貴方のアイテムは:<select name="selName2" id="selId2" multiple>
<option value="携帯電話" name="keitaiName" id="keitaiId">携帯電話</option>
<option value="iPhone" name="iPhoneName" id="iPhoneId">iPhone</option>
<option value="Android" name="androidName" id="androidId">Android</option>
<option value="iPad" name="iPadName" id="iPadId">iPad</option>
<option value="iPod" name="iPodName" id="iPodId">iPod</option>
</select>
</form>
</body>
</html>
   ファイル名:js11-1.js
setEventListener(window,"load",window_onLoad);
function setEventListener(obj,event,func){
if(navigator.appName.indexOf("Microsoft")>-1){
obj.attachEvent("on"+event,func);
}
else{
obj.addEventListener(event,func,false);
}
}
function window_onLoad(){
document.forms[0].elements[0].value="名前を入力してね。"; //①
document.forms["formName"].elements["tfName2"].value="住所を入力してね。"; //②
document.formName.tfName3.value="メルアドを入力してね。"; //③
document.formName.rdName[0].checked=true; //④
var p=document.getElementsByName("cbName1"); //⑤
p[0].checked=true;
var d=document.getElementById("cbId2"); //⑥
d.checked=true;
var s1=document.getElementsByName("selName1"); //⑦
s1[0].options[3].selected=true;
document.forms[0][8].options[0].selected=true; //⑧
document.forms["formName"]["selName2"].options[2].selected=true; //⑨
var s2=document.getElementById("selId2"); //⑩
s2.options[4].selected=true;
}
    ①フォームエレメントへ配列オブジェクト(インデックス)を使ってアクセスしている。
    ②フォームエレメントへ配列オブジェクト(連想配列:ハッシュ)を使ってアクセスしている。
    ③フォームエレメントのname属性の値をオブジェクト名としてアクセスしている。
    ④フォームエレメントのラジオボタンの「男」の方にアクセスしている。
      ラジオボタンは、同じグループにする場合、name属性の値を同じにするためオブジェクト配列でアクセスします。
      document.formName.rdName[0].checked=trueは、男のエレメントの「checked」プロパティを「true」にしているので、
     男の方にチェックが入ります。
      document.formName.rdName[1]は、女の方のエレメントを表すオブジェクトになります。
    ⑤document.getElementsByName("cbName1") は、name属性の値が「cbName1」を指定しているエレメントをオブジェクト配列「p」に
     格納されます。p[0]には、最初(パソコン)のエレメントがオブジェクト化されて格納されます。p[1]には、二つ目(ドライブ)のエレメントが
     オブジェクト化されて格納されます。
      p[0].checked=trueにするとそのエレメント(チェックボックス)にチェックが入ります。
    ⑥document.getElementById("cbId2")は、id属性の値が「cbId2」を指定しているエレメントをオブジェクト変数「d」に格納している。
      d.checked=true にするとそのエレメント(チェックボックス)にチェックが入ります。
    ⑦document.getElementsByName("selName1") name属性の値が「selName1」を指定しているエレメントをオブジェクト配列「s1」に
     格納されます。
       options[3].selected=trueは、このエレメント(セレクトメニュー)の4番目を選択状態にします。
    ⑧document.forms[0][8].options[0].selected=trueは、フォームエレメントの9番目のエレメントの1番目を選択状態にします。
    ⑨document.forms["formName"]["selName2"].options[2].selected=true は、フォームエレメントのmame属性の値が「selName2」の
      エレメントの3番目の3番目を選択状態にしています。
    ⑩document.getElementById("selId2")は、id属性の値が「selId2」を指定しているエレメントをオブジェクト変数「s2」に格納している。
       s2.options[4].selected=trueは、フォームエレメントのid属性の値が「selId2」 のエレメントを選択状態にしています。