Formオブジェクト：テキストタイプ

Formオブジェクトには名前NAME属性を記述する。また、Form内のinputオブジェクトには名前(name)属性またはＩＤ(id)属性を付与する。

<body>
<form name="vs_sampleform" action="#">
テキスト0:<input type="text" size="30" /><br />
テキスト1:<input type="text" name="vs_text1" size="30" /><br />
テキスト2:<input type="text" id="vs_text2" size="30" /><br />
テキスト3:<input type="text" name="vs_text3" size="30" /><br />
テキスト4:<input type="text" name="vs_text4" size="30" /><br />
テキスト5:<input type="text" name="vs_text5" size="30" /><br />
テキスト6:<input type="text" id="vs_text6" size="30" /><br />
テキスト7:<input type="text" id="vs_text7" size="30" /><br />
<input type="button" value="書き込み:writeData(this.form)" onclick="writeData(this.form)" onkeypress="writeData(this.form); return false;" />
</form>
</body>
テキスト0:
テキスト1:
テキスト2:
テキスト3:
テキスト4:
テキスト5:
テキスト6:
テキスト7:

それぞれのテキストフィールドへの参照方法のいくつかを紹介する。上位より、Formオブジェクトを引数で受け取るものとする。
※引数での渡し方は、this.formで渡せる。

<script type="text/javascript">
function writeData(obj)
{
  document.forms[0].elements[0].value = "elements配列による参照";
  document.forms["vs_sampleform"].vs_text1.value = "name属性による参照";
  document.forms["vs_sampleform"].vs_text2.value = "id属性による参照";
  document.forms["vs_sampleform"].elements["vs_text3"].value = "elementsの連想配列による参照";
  document.forms["vs_sampleform"].elements[4].value = "組み合わせ";
  obj.elements[5].value = "thisによる参照(elements配列)";
  obj.vs_text6.value = "thisによる参照（name属性)";
  document.getElementById("vs_text7").value = "DOMによる参照";
}
</script>
TOPへ
ようこそオーガスの窓へ

IT用語辞典


 GOOGLE LOGO

inserted by FC2 system