JS和DOM的表单

表单处理分成五个部分：1、获取表单对象；2、访问表单元素；3、表单元素共性；4、提交表单；5、重置表单。

一、获取表单对象
1、使用ID来获取表单对象 var oForm = document.getElementByIdx("form1");
2、使用document.forms数组索引来获取表单对象 var oForm = document.forms[0];
3、使用document.forms数组名称属性来获取表单对象 var oForm = document.forms["formZ"];

参考下面的例子，一个html文档中允许多个表单。
document.getElementByIdx("form1") ==  document.forms[0] == document.forms["formZ"]
document.getElementByIdx("form2") ==  document.forms[1] == document.forms["formY"]

二、访问表单域中的元素
1、使用表单的elements(数组)属性。表单中的按钮，文本框或者其他表单元素集合都可以使用这些元素的name属性，抑或是索引值来访问表单元素
 var oForm = document.forms[0];    ///获取表单对象
var oFirstField = oForm.elements[0]; //使用索引值0 获取第一个表单元素
var oTextbox1 = oForm.elements[“textbox1”];//使用表单元素的name属性textbox1来获取该元素
2、简写模式，把表单元素的name属性textbox1当作表单的属性来访问该元素
var oTextbox1 = oForm.textbox1; //get the field with the name “textbox1”
3、把表单对象当作一个数组，用name属性访问表单对象
var oTextbox1 = oForm[“text box 1”]; //get the field with the name “text box 1”

下面这个例子当中 oForm.textbox1 == oForm[“textbox1”] == oForm.elements[“textbox1”] == oForm.elements[1]

三、表单域（元素）的共性（共同特征）
所有的表单元素 按钮 复选框 文本域 下拉菜单== 除了“隐藏域”之外都有共同的属性，方法和事件：
1、都具有disabled属性，即禁用该表单元素，使得只具有其外形特征，而不具备其功能
2、都具有form属性来指向这个某表单，表示是该表单的一部分
3、都具有blur()方法，使得当前表单域（元素）失去焦点
4、都具有focus()方法， 使得当前表单域（元素）获取焦点
5、都有onblur()事件，当表单域失去焦点时触发事件
6、都有onfocus()事件，当表单域获得焦点时触发事件

For example:
var oField1 = oForm.elements[0];
var oField2 = oForm.elements[1];
//禁用第一个表单元素
oField1.disabled = true;
//第二个表单元素获得焦点
oField2.focus();
//第一个表单元素的form属性是否指向（等于）oform表单
alert(oField1.form == oForm); //输出 “true”

四、提交表单
1、下面是两个按钮，一个是提交按钮，一个是图片按钮。提交表单的时候用alert()警告获取哪个按钮提交表单
<input type=”submit” value=”Submit” /> <!-- submit button -->
<input type=”image” src=”submit.gif” /> <!-- image button -->
<form method=”post” action=”javascript:alert(‘Submitted’)”>

2、不是提交表单按钮也可以使用oForm.submit(); 来提交表单，譬如
<input type=”button” value=”Submit Form” onclick=”document.forms[0].submit()” />

3、阻止表单提交
可以使用getEvent截取表单事件，使用preventDefault()来阻止该事件发生
function handleSubmit() {
var oEvent = EventUtil.getEvent();
oEvent.preventDefault();
}

4、只允许提交一次表单（防止重复提交）
这里有一个表单提交按钮
<input type=”submit” value=”Submit” />
我们可以添加onclick事件，当点击该按钮之后this.disabled=true;禁用该按钮，然后提交表单。
<input type=”button” value=”Submit”
onclick=”this.disabled=true; this.form.submit()” />

五、重置表单
（1）使用reset按钮
<input type=”reset” value=”Reset Values” />
（2）使用oForm.reset() 方法来重置表单

总结：
1、获取表单对象可以用DOM方法getElementById，数组索引 document.forms[0] 数组名称 document.form["form1"] 三种方法
2、访问表单元素可以使用oForm.elements[0] 表单.elements属性索引，或name属性。或者把表单对象当作数组oForm["textbox1"]，把表单元素当作表单的属性oForm.textbox1
3、表单元素除了hiden隐藏域之外，都具有disabled是否禁用属性，form属性表示该元素属于哪个表单，blur()失去焦点 focus()获得焦点。onblur() onfocus()事件这六个成员（属性|方法）
4、提交按钮提交表单，submit()方法提交表单，如何只允许提交表单一次
5、重置按钮重置表单，reset()方法重置表单