在HTML中，表单是由<form>来表示的。取得<form>元素引用的方式有好几种，最常见的就是为其添加id特性，然后使用getElementById()方法获取它。其次，是通过document.forms可以取得页面中所有的表单。在这个集合中，可以通过数值索引或name值来取得特定的表单。
提交表单
用户单击提交按钮或图像按钮时，就会提交表单。
<!-- 通用提交按钮 --> <input type="submit" value="Submit Form"> <!-- 自定义提交按钮 --> <button type="submit">Submit Form</button> <!-- 图像按钮 --> <input type="image" src="graphic.gif">
以这种方式提交表单时，浏览器会在将请求发送给服务器之前触发submit事件。这样，就有机会验证表单数据，并决定是否允许表单提交。阻止这个事件的默认行为就可以取消表单提交。 （调用preventnDefault()方法可以阻止表单提交）
在JS中，调用submit()方法也可以提交表单。
var form = document.getElementById("myForm");
//提交表单
form.submit();
在以调用submit()方法的形式提交表单时，不会触发submit 事件，因此要记得在调用此方法之前先验证表单数据。
提交表单时可能出现的最大问题，就是重复提交表单。解决这一问题的办法有两个：在第一次提交表单后就禁用提交按钮，或者利用onsubmit 事件处理程序取消后续的表单提交操作。
重置表单
当用户单击重置按钮时，表单会被重置。
<!-- 通用重置按钮 --> <input type="reset" value="Reset Form"> <!-- 自定义重置按钮 --> <button type="reset">Reset Form</button>
在重置表单时，所有表单字段都会恢复到页面刚加载完毕时的初始值。用户单击重置按钮重置表单时，会触发reset 事件。
在JS中，调用reset()方法也可以重置表单。
var form = document.getElementById("myForm");
//重置表单
form.reset();
与调用submit()方法不同，调用reset()方法会像单击重置按钮一样触发reset 事件。
表单字段
共有的表单字段属性：
disabled：布尔值，表示当前字段是否被禁用。
form：指向当前字段所属表单的指针；只读。
name：当前字段的名称。
readOnly：布尔值，表示当前字段是否只读。
tabIndex：表示当前字段的切换（tab）序号。
type：当前字段的类型，如"checkbox"、"radio"，等等。
value：当前字段将被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件在计算机中的路径。
共有的表单字段方法：
每个表单字段都有两个方法：focus()和 blur()。
共有的表单字段事件：
除了支持鼠标、键盘、更改和HTML 事件之外，所有表单字段都支持下列3 个事件：
blur：当前字段失去焦点时触发。
change：对于<input>和<textarea>元素，在它们失去焦点且value 值改变时触发；对于<select>元素，在其选项改变时触发。
focus：当前字段获得焦点时触发。
change 事件在不同表单控件中触发的次数会有所不同。对于<input>和<textarea>元素，当它们从获得焦点到失去焦点且value 值改变时，才会触发change 事件。对于<select>元素，只要用户选择了不同的选项，就会触发change 事件；换句话说，不失去焦点也会触发change 事件。
注意：关于blur 和change 事件的关系，并没有严格的规定。在某些浏览器中，blur事件会先于change 事件发生；而在其他浏览器中，则恰好相反。
文本框脚本
在HTML 中，有两种方式来表现文本框：一种是使用<input>元素的单行文本框，另一种是使用<textarea>的多行文本框。
选择文本
上述两种文本框都支持select()方法，这个方法用于选择文本框中的所有文本。（在文本框获得焦点时选择其所有文本）
取得选择的文本
HTML5添加了两个属性：selectionStart和seletionEnd。这两个属相中保存的是基于0的数值，表示所选择的的文本范围。
function getSelectedText(textbox){
return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
}
IE8 及更早的版本中有一个document.selection 对象，其中保存着用户在整个文档范围内选择的文本信息。要取得选择的文本，首先必须创建一个范围，然后再将文本从其中提取出来。
function getSelectedText(textbox){
if (typeof textbox.selectionStart == "number"){
return textbox.value.substring(textbox.selectionStart,
textbox.selectionEnd);
} else if (document.selection){
return document.selection.createRange().text;
}
}
选择部分文本
HTML5添加了setSelectionRange()方法。这个方法接收两个参数：要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引。
HTML5约束验证API
为了在将表单提交到服务器之前验证数据，HTML5 新增了一些功能。
1.必填字段
<input type="text" name="username" required>
2.其他输入类型
HTML5 为<input>元素的type 属性又增加了几个值。这些新的类型不仅能反映数据类型的信息，而且还能提供一些默认的验证功能。其中，"email"和"url"是两个得到支持最多的类型。
"email"类型要求输入的文本必须符合电子邮件地址的模式，而"url"类型要求输入的文本必须符合URL 的模式。
3.数值范围
除了"email"和"url"，HTML5 还定义了另外几个输入元素。这几个元素都要求填写某种基于数字的值："number"、"range"、"datetime"、"datetime-local"、"date"、"month"、"week"，还有"time"。
对所有这些数值类型的输入元素，可以指定min 属性（最小的可能值）、max 属性（最大的可能值）和step 属性（从min 到max 的两个刻度间的差值）。
4.输入模式
HTML5 为文本字段新增了pattern 属性。这个属性的值是一个正则表达式，用于匹配文本框中的值。
<input type="text" pattern="\d+" name="count">
注意，模式的开头和末尾不用加^和$符号。
5.检测有效性
使用checkValidity()方法可以检测表单中的某个字段是否有效。所有表单字段都有个方法，如果字段的值有效，这个方法返回true，否则返回false。
if (document.forms[0].elements[0].checkValidity()){
//字段有效，继续
} else {
//字段无效
}
validity 属性则会告诉你为什么字段有效或无效。这个对象中包含一系列属性，每个属性会返回一个布尔值：
customError ：如果设置了setCustomValidity()，则为true，否则返回false。
patternMismatch：如果值与指定的pattern 属性不匹配，返回true。
rangeOverflow：如果值比max 值大，返回true。
rangeUnderflow：如果值比min 值小，返回true。
stepMisMatch：如果min 和max 之间的步长值不合理，返回true。
tooLong：如果值的长度超过了maxlength 属性指定的长度，返回true。有的浏览器（如Firefox 4）会自动约束字符数量，因此这个值可能永远都返回false。
typeMismatch：如果值不是"mail"或"url"要求的格式，返回true。
valid：如果这里的其他属性都是false，返回true。checkValidity()也要求相同的值。
valueMissing：如果标注为required 的字段中没有值，返回true。
6.禁用验证
通过设置novalidate 属性，可以告诉表单不进行验证。
<form method="post" action="signup.php" novalidate> <!--这里插入表单元素--> </form>
如果一个表单中有多个提交按钮，为了指定点击某个提交按钮不必验证表单，可以在相应的按钮上添加formnovalidate 属性。
<form method="post" action="foo.php"> <!--这里插入表单元素--> <input type="submit" value="Regular Submit"> <input type="submit" formnovalidate name="btnNoValidate" value="Non-validating Submit"> </form>
选择框脚本
选择框是通过<select>和<option>元素创建的。
HTMLSelectElement 类型还提供了下列属性和方法：
add(newOption, relOption)：向控件中插入新<option>元素，其位置在相关项（relOption）之前。
multiple：布尔值，表示是否允许多项选择；等价于HTML 中的multiple 特性。
options：控件中所有<option>元素的HTMLCollection。
remove(index)：移除给定位置的选项。
selectedIndex：基于0 的选中项的索引，如果没有选中项，则值为-1。对于支持多选的控件，只保存选中项中第一项的索引。
size：选择框中可见的行数；等价于HTML 中的size 特性。
HTMLOptionElement 对象添加了下列属性：
index：当前选项在options 集合中的索引。
label：当前选项的标签；等价于HTML 中的label 特性。
selected：布尔值，表示当前选项是否被选中。将这个属性设置为true 可以选中当前选项。
text：选项的文本。
value：选项的值（等价于HTML 中的value 特性）。
选择选项
对于只允许选择一项的选择框，访问选中项的最简单方式，就是使用选择框的selectedIndex 属性。
var selectedOption = selectbox.options[selectbox.selectedIndex];
另一种选择选项的方式，就是取得对某一项的引用，然后将其selected 属性设置为true。
selectbox.options[0].selected = true;
添加选项
添加选项的方式有很多，第一种方式就是使用如下所示的DOM 方法。
var newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("Option text"));
newOption.setAttribute("value", "Option value");
selectbox.appendChild(newOption);
第二种方式是使用Option 构造函数来创建新选项。
var newOption = new Option("Option text", "Option value");
selectbox.appendChild(newOption); //在IE8 及之前版本中有问题
第三种添加新选项的方式是使用选择框的add()方法。DOM 规定这个方法接受两个参数：要添加的新选项和将位于新选项之后的选项。
var newOption = new Option("Option text", "Option value");
selectbox.add(newOption, undefined); //最佳方案
移除选项
与添加选项类似，移除选项的方式也有很多种。首先，可以使用DOM 的removeChild()方法，为其传入要移除的选项。
selectbox.removeChild(selectbox.options[0]); //移除第一个选项
其次，可以使用选择框的remove()方法。这个方法接受一个参数，即要移除选项的索引。
selectbox.remove(0); //移除第一个选项
最后一种方式，就是将相应选项设置为null。
selectbox.options[0] = null; //移除第一个选项
移动和重排选项
使用DOM 的appendChild()方法，就可以将第一个选择框中的选项直接移动到第二个选择框中。
var selectbox1 = document.getElementById("selLocations1");
var selectbox2 = document.getElementById("selLocations2");
selectbox2.appendChild(selectbox1.options[0]);
移动选项与移除选项有一个共同之处，即会重置每一个选项的index 属性。
要将选择框中的某一项移动到特定位置，最合适的DOM 方法就是insertBefore()。
var optionToMove = selectbox.options[1]; selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index-1]); //在选择框中向前移动一个选项的位置
表单序列化
将表单内容序列化成一个字符串。这样在ajax提交表单数据时，就不用依一列举出每一个参数。