第28回　「フォームへの参照」

　前回はフォームのボタンがクリックされたら処理する（アラートダイアログを表示する）方法について触れました。今回はテキストフィールドの内容を調べ空欄だったら警告を出すスクリプトを作成します。
　テキストフィールドの内容を参照するには、いくつか方法があります。参照時にはHTMLのform、inputタグのname属性を指定したかどうか、HTML内での出現順番はどうか、などHTML側の影響を受けることがあります。一時的に使えればよいのか汎用性を持たせた方がよいか、どうかでも書き方が変わってきます。
　まず順番を指定する方法について書きます。HTMLで
　
<html>
<head>
<title></title>
</head>
<body>
<form>
<input type="text">
</form>
</body>
</html>

　のようにformタグとinputタグが書かれている場合には

document.forms[参照番号].elements[参照番号]

のように指定します。formsの参照番号はHTML内でのformタグの出現番号になります。0から始まるので一番最初に出てきた場合はforms[0]になります。２番目であればforms[1]となります。
　elementsの参照番号は、そのformタグで囲まれた中でのフォーム関連のタグの出現番号になります（optionsタグは除く）。これも一番最初が0になります。最初のものを参照するにはelements[0]になります。
　
　次は上記同様の方法ですがelementsを使わずに以下のようにformsのみで指定します。
　
document.forms[参照番号][参照番号]

elements部分を省略して記述しても参照することができます。

　次にHTML側でformタグ、inputタグなどにname属性で名前がつけられていれば、その名前を使って参照することもできます。例えば
　
<html>
<head>
<title></title>
</head>
<body>
<form name="FDB">
<input type="text" name="ADRS">
</form>
</body>
</html>

　のようにnameが指定されている場合には以下のように指定することができます。
　
document.FDB.ADRS
document.FDB.elements["ADRS"]
document.forms["FDB"].elements["ADRS"]
document.forms["FDB"]["ADRS"]

　ここまで説明した方法ではformタグの順番が変わったり、他のページで利用しようとしてスクリプトをコピーして使おうと思っても、何カ所か変更をする必要が出てきます。formタグの順番や名前に依存しないようにするにはthisを使います。これは自分自身を示すもので
　
<input type="text" onChange="alert(this.value)">

とするとinutタグに入力されている値がアラートダイアログに表示されます。このようにするとHTML内での出現位置やnameによる名前に依存しなくなるため、再利用しやすくなります。thisが、どこを示しているかどうかを見るには

<input type="text" onChange="alert(this)">

のようにすると、参照オブジェクト（種類／名称など）が表示されます。

　Internet ExplorerやNetscape 6以降ではこれ以外の書き方も可能です（別の機会に説明します）。上記のような書き方は、古いブラウザであっても新しいブラウザであってもマイナーなブラウザであっても動作します。
　
　次回はテキストフィールドが空欄かどうかを調べるスクリプトを作成します。
　
　
　
　

第28回 「フォームへの参照」

第28回　「フォームへの参照」