本文介绍了JS表单脚本的基础知识，希望大家对表单脚本有初步的理解，后续还会详细整理各类表单的知识
HTML元素 <form>
HTMLFormElement继承了HTMLElement，它自己独有的属性和方法有：
- acceptCharset:服务器能够处理的字符集，等价于HTML的accept-charset特性
- action：接收请求的URL，等价于HTML中的action特性。
- elements：表单中所有控件的集合（HTMLCollection）
- enctype：请求的编码类型
- length：表单中控件的数量
- method:要发送的HTTP请求类型，通常是get或post
- name：表单的名称
- reset():将所有表单域重置为默认值
- submit():提交表单
- target:用于发送请求和接收响应的窗口名称；
取得form元素的引用可以是getElementById、也可以是document.forms中数值索引或name值；
1.提交表单
提交表单的按钮有三种：
//通过提示提交
<input type="submit" value="Submit Form">
//自定义提交按钮
<button type="submint">Submit Form</button>
//图像按钮
<input type="image" src="">
以上面这种方法，会在浏览器请求发送给服务器之前，触发submit事件，这样就可以验证表单数据和决定是否允许提交表单
如下面的代码就可以阻止表单的提交：
var form = document.getElementById("myForm");
form.addEventListener("submit", function () {
event.preventDefault();
});
另外也可以通过js脚本调用submit()方法提交表单，不需要表单包含提交按钮，任何时候都可以提交，但要注意，提交前需要进行验证。在调用submit()提交表单不会触发submit事件。
var form = document.getElementById("myForm");
form.submit();
问题：第一次提交表单后如果长时间没有回应，用户会变得不耐烦，往往多次点击提交按钮，导致重复提交表单，
解决：在第一次提交表单后就禁用提交按钮或利用onsubmit事件阻止后续操作。
var submitBtn = document.getElementById("submitBtn");
submitBtn.onsubmit = function () {
//处理表格和提交等等
submitBtn.disabled = true;
};
注意：为什么不用onclick事件监听，因为不同浏览器存在时差，有的会先触发click再触发submit;这种submit会在提交前被禁用。所以监听submit事件是最好的。
2.重置表单
重置表单应该使用 type=”reset” 的input或button：
//通用重置按钮
<input type="reset" value = "Reset Form">
//自定义重置按钮
<button type="reset">Reset Form</button>
//通过js脚本调用reset()方法重置表单
var form = document.getElementById("myForm");
form.reset();
取消重置操作：
var resetBtn = document.getElementById("resetBtn");
resetBtn.addEventListener("reset", function () {
//阻止重置事件
event.preventDefault();
});
3.表单字段
每个表单都有一个elements属性，该属性是表单中所有表单（字段）的集合：
var form = document.forms["myForm"];
//建立一个List
var list = [];
//取得表单中第一个字段
var field1 = form.elements[0];
list.push(field1.name);
//取得表单中名为Text的字段
var field2 = form.elements["Text"];
list.push(field2.name);
// 取得表单中包含的字段的数量
var fieldCount = form.elements.length;
list.push(fieldCount);
console.log(list.toString()); //first,Text,4
多个表单控件使用一个name（单选按钮），那么会返回以该name命名的NodeList：
<form id="myForm" name="myForm">
<ul>
<li><input type="radio" name="color" value="red">red</li>
<li><input type="radio" name="color" value="yellow">yellow</li>
<li><input type="radio" name="color" value="blue">blue</li>
</ul>
<button type="submint">Submit Form</button>
<button type="reset">Reset Form</button>
</form>
name都是color，在访问elements["color"]时，返回NodeList：
var list = [];
var form = document.forms["myForm"];
var radios = form.elements["color"];
console.log(radios.length) //3
下面介绍几个表单特性
共有表单字段属性
共有表单字段方法
共有表单字段事件
3.1共有表单字段属性
- disabled: 布尔值，表示当前字段是否被禁用；
- form: 指向当前字段所属表单的指针：只读；
- name: 当前字段的名称；
- readOnly: 布尔值，表示当前字段是否只读；
- tabIndex: 表示当前字段的切换（tab）序号；
- type: 当前字段的类型；
- value: 当前字段被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件在计算机中的路径；
除了form属性外，都可以通过JS动态修改。
3.2 共有表单字段方法
两个方法：focus()和blur()
- focus(): 激活字段，使其可以响应键盘事件；
- blur(): 失去焦点，触发；使用的场合不多；
实例：在页面加载完毕后，焦点转移到表单第一个字段
思路：可以在侦听页面的load事件上添加该focus()方法：
window.addEventListener("load", function () {
document.forms["myForm"].elements[0].focus();
});
注意：如果第一个表单字段是input，且其type特性为“hidden”，或者css属性的display和visibility属性隐藏了该字段，就会导致错误。
在HTML5中，表单中新增加了autofocus属性，自动把焦点移动到相应字段。
autofocus
如：
<input type="text" name="lastName" autofocus>
或者检测是否设置了该属性，没有的话再调用focus()方法：
window.addEventListener("load", function () {
var form = document.forms["myForm"];
if (form["lastName"].autofocus !== true) {
form["lastName"].focus();
};
});
blur方法用法与之类似。
3.3共有表单字段事件
调用方法的时候，触发相应的事件
除了支持鼠标键盘更改和HTML事件之外，所有的表单字段都支持下列3个事件：
blur： 当前字段失去焦点时触发；
change：input元素和textarea元素，在它们失去焦点且value值改变时触发；select元素在其选项改变时触发（不失去焦点也会触发）；
focus：当前字段获得焦点时触发；
如：
var form = document.forms["myForm"];
var firstName = form.elements["firstName"];
firstName.addEventListener("focus", handler);
firstName.addEventListener("blur", handler);
firstName.addEventListener("change", handler);
function handler() {
switch (event.type) {
case "focus":
if (firstName.style.backgroundColor !== "red") {
firstName.style.backgroundColor = "yellow";
};
break;
case "blur":
if (event.target.value.length < 1) {
firstName.style.backgroundColor = "red";
} else {
firstName.style.backgroundColor = "";
};
break;
case "change":
if (event.target.value.length < 1) {
firstName.style.backgroundColor = "red";
} else {
firstName.style.backgroundColor = "";
};
break;
}
}
