14.1 表单的基础知识
获取form元素：
- 同其他DOM元素一样
var form = document.getElementById("form1"); - 通过 document.forms 可以取得页面中所有的表单,再通过数值索引或name 值来取得特定的表单
var firstForm = document.forms[0]; //取得页面中的第一个表单
var myForm = document.forms["form2"]; //取得页面中名称为"form2"的表单
form元素的特殊性：
在JavaScript中，<form>元素对应的是 HTMLFormElement 类型，它继承了HTMLElement，因而与其他 HTML 元素具有相同的默认属性，同时有自己独特的属性和方法。
常用的方法包括
form.reset() //重置表单
form.submit() //提交表单
form.action：接受请求的 URL；等价于 HTML 中的 action 特性。
form.elements：表单中所有控件的集合（HTMLCollection）。
提交表单
- 点击提交元素
提交元素：
<!-- 通用提交按钮 -->
<input type="submit" value="Submit Form">
<!-- 自定义提交按钮 -->
<button type="submit">Submit Form</button>
<!-- 图像按钮 -->
<input type="image" src="graphic.gif">
以这种方式提交表单时，浏览器会在将请求发送给服务器之前触发 submit 事件。这样，我们就有机会验证表单数据，并据以决定是否允许表单提交。阻止这个事件的默认行为就可以取消表单提交
- 使用form.submit()提交表单
调用 submit()方法的形式提交表单时，不会触发 submit 事件，因此要记得在调用此方法之前先验证表单数据。
重置表单
- 通过 input 或者 button 的 reset 属性
<!-- 通用重置按钮 -->
<input type="reset" value="Reset Form">
<!-- 自定义重置按钮 -->
<button type="reset">Reset Form</button>
- 通过js
var form = document.getElementById("myForm");
form.reset()
调用 reset()方法会像单击重置按钮一样触发form表单的 reset 事件
防止重复提交表单
在第一次提交表单后，如果长时间没有反应，用户可能会变得不耐烦。这时候，他们也许会反复单击提交按钮。结果往往很麻烦（因为服务器要处理重复的请求），或者会造成错误
解决办法：
- 在第一次提交表单后就禁用提交按钮，（可以直接给type=‘submit’ 元素添加disable属性）
- 利用 onsubmit 事件处理程序取消后续的表单提交操作。
有的浏览器会在触发表单的 submit 事件之前触发 click 事件，
而有的浏览器则相反.因此，最好是通过 submit 事件来禁用提交按钮。不过，这种方式不适合表单中不包含提交按钮的情况；如前所述，只有在包含提交按钮的情况下，才有可能触发表单的 submit事件。
选择框脚本
除了所有表单字段共有的属性和方法外，HTMLSelectElement 类型还提供了下列属性和方法：
add(newOption, relOption)：向控件中插入新<option>元素，其位置在相 关项（relOption）之前。
multiple：布尔值，表示是否允许多项选择；等价于 HTML 中的 multiple 特性。
options：控件中所有<option>元素的 HTMLCollection。
remove(index)：移除给定位置的选项。
selectedIndex：基于 0 的选中项的索引，如果没有选中项，则值为-1。对于支持多选的控件，
只保存选中项中第一项的索引。
size：选择框中可见的行数；等价于 HTML 中的 size 特性
每个<option>元素都有一个 HTMLOptionElement 对象表示:
index：当前选项在 options 集合中的索引。
label：当前选项的标签；等价于 HTML 中的 label 特性。
selected：布尔值，表示当前选项是否被选中。将这个属性设置为 true 可以选中当前选项。
text：选项的文本。
value：选项的值（等价于 HTML 中的 value 特性）。
查看选中项的方法
var selectBox = document.forms[0].elements.fruit;
var selectedOption = selectBox.options[selectBox.selectedIndex];
####表单序列化：
网友评论