浅谈表单脚本
一、表单的基础知识
取得<form>元素引用的方式：
1) 为<form>元素添加id，然后通过getElementById()方法来访问；
var myForm = document.getElementById("form1");2) 通过document.forms取得页面中的所有表单，再通过下标或name值来访问：
① 通过下标：
var myForm = document.forms[0];② 通过name值：
var myForm = document.forms["form1"];3) document对象直接通过name值来访问（不推荐，一是容易出错，二是将来的浏览器可能会不支持）。
var myForm = document.form1;
1、提交表单
1) 提交按钮类型
① 通用提交按钮：<input type="submit" value="...">
② 自定义提交按钮：<button>type="submit">...</button>
③ 图像按钮：<input type="image" src="...">
2) 提交表单的方法
① 若表单里存在以上任何一种提交按钮，在表单控件拥有焦点的情况下，按回车键就可以提交表单；若表单里面没有提交按钮，按回车键不会提交表单。这种提交方式会触发submit事件，通过监听submit事件可以验证表单数据，并决定是否允许表单提交（阻止submit事件的默认行为preventDefault()就可以取消表单提交）。
② JavaScript中调用submit()方法也能提交表单，而且这种方式无需包含提交按钮，任何时候都可以正常提交表单，但这种提交方式不会触发submit事件，因此要记得在调用此方法之前先验证表单数据。
3) 重复提交表单
提交表单可能出现的最大问题：重复提交表单。
解决方法1：在第一次提交表单后就禁用提交按钮。
解决方法2：利用onsubmit()事件处理程序取消后续的表单提交工作。
2、重置表单
1) 重置按钮类型
① 通用重置按钮：<input type="submit" value="">
② 自定义重置按钮：<button>type="submit">...</button>
2) 重置表单的方法
① 若表单里存在以上任何一种重置按钮，在表单控件拥有焦点的情况下，按回车键就可以重置表单；若表单里面没有重置按钮，按回车键不会提交表单。这种提交方式会触发reset事件，通过监听reset事件可以决定是否允许表单重置（阻止reset事件的默认行为preventDefault()就可以取消表单重置）。
② JavaScript中调用reset()方法也能重置表单，而且这种方式无需包含重置按钮，任何时候都可以正常重置表单，但这种提交方式会触发reset事件。
3、表单字段
每个表单都有elements属性，该属性是表单中所有表单元素（字段）的集合，可以通过下标或name特性来访问它们。
var myForm = document.getElementById("form1");
var field1 = myForm.elements[0];
var field2 = myForm.elements["text1"];
var len = myForm.elements.length;若表单中存在多个name特性相同的字段，如radio单选按钮，elements属性会返回以该name命名的一个nodeList。若访问element[0]，则只会返回第一个元素，即：
myForm.elements["radio"][0] = myForm.elements[0];
1) 共有的表单字段属性
① disabled：布尔值，表示当前字段是否被禁用；
② form：指向当前字段所属表单的指针，只读；
③ name：当前字段的名称；
④ readOnly：布尔值，表示当前字段是否只读；
⑤ tabIndex：表示当前字段的切换（tab）序号；
⑥ type：当前字段的类型；
⑦ 当前字段将提交到服务器的值
除了form属性，其他属性可以通过JavaScript动态修改。
<input>和<button>的type属性是可以动态修改的，而<select>元素的type属性时只读的。
2) 共有的表单字段方法
① focus()方法：
可以侦听页面的load事件，并将该事件发生时在表单的第一个字段上调用focus()方法：
window.addEventListener(“load”, function() {
document.forms[0].elements[0].focus();
});HTML5为表单字段新增了一个autofocus属性（布尔值属性），在支持该属性的浏览器中，不需要JavaScript就可以自动把焦点移动到相应字段。
可以先检测是否设置了autofocus属性，若未设置再调用focus()：
window.addEventListener(“load”, function() {
var element = document.forms[0].elements[0]；
if (element.autofocus != true)
element.focus();
});② blur()方法：
调用blur()方法时，并不会把焦点移到某个特定的元素上，仅仅是将焦点从调用这个方法的元素上移走而已。
3) 共有的表单字段事件
① blur：当前字段失去焦点时触发；
② change：对于<textarea>和<input>元素，在失去焦点且value值改变时触发；对于<select>元素，在其选项改变时触发；
③ focus：当前字段获得焦点时触发。
通常可以使用focus和blur事件来以某种方式改变用户界面，要么是向用户给出视觉提示，要么是向界面中添加额外的功能。而change事件则经常用于验证用户在字段中输入的数据。