JS高级程序设计读书笔记（第十四章 表单脚本）
14.1 表单的基础知识
在 HTML 中，表单是由 元素来表示的，而在 JavaScript 中，表单对应的则是 HTMLFormElement 类型。 HTMLFormElement 继承了 HTMLElement ，因而与其他 HTML 元素具有相同的默认属性。不过， HTMLFormElement 也有它自己下列独有的属性和方法。
acceptCharset ：服务器能够处理的字符集；等价于 HTML 中的 accept-charset 特性。
action ：接受请求的 URL；等价于 HTML 中的 action 特性。
elements ：表单中所有控件的集合（ HTMLCollection ）。
enctype ：请求的编码类型；等价于 HTML 中的 enctype 特性。
length ：表单中控件的数量。
method ：要发送的 HTTP 请求类型，通常是 “get” 或 “post” ；等价于 HTML 的 method 特性。
name ：表单的名称；等价于 HTML 的 name 特性。
reset() ：将所有表单域重置为默认值。
submit() ：提交表单。
target ：用于发送请求和接收响应的窗口名称；等价于 HTML 的 target 特性。
取得 元素引用的方式有好几种。其中最常见的方式就是将它看成与其他元素一样，并为其添加 id 特性，然后再像下面这样使用 getElementById() 方法找到它。
var form = document.getElementById("form1");
其次，通过 document.forms 可以取得页面中所有的表单。在这个集合中，可以通过数值索引或name 值来取得特定的表单，如下面的例子所示。
var firstForm = document.forms[0]; //取得页面中的第一个表单
var myForm = document.forms["form2"]; //取得页面中名称为"form2"的表单
另外，在较早的浏览器或者那些支持向后兼容的浏览器中，也会把每个设置了 name 特性的表单作为属性保存在 document 对象中。例如，通过 document.form2 可以访问到名为 “form2” 的表单。不过，我们不推荐使用这种方式：一是容易出错，二是将来的浏览器可能会不支持。
注意，可以同时为表单指定 id 和 name 属性，但它们的值不一定相同。
14.1.1 提交表单
用户单击提交按钮或图像按钮时，就会提交表单。使用 或 都可以定义提交按钮，只要将其 type 特性的值设置为 “submit” 即可，而图像按钮则是通过将 的 type 特性值设置为"image" 来定义的。因此，只要我们单击以下代码生成的按钮，就可以提交表单。
<input type="submit" value="Submit Form">
<button type="submit">Submit Formbutton>
<input type="image" src="graphic.gif">
只要表单中存在上面列出的任何一种按钮，那么在相应表单控件拥有焦点的情况下，按回车键就可以提交该表单。（ textarea 是一个例外，在文本区中回车会换行。）如果表单里没有提交按钮，按回车键不会提交表单。
以这种方式提交表单时，浏览器会在将请求发送给服务器之前触发 submit 事件。这样，我们就有机会验证表单数据，并据以决定是否允许表单提交。阻止这个事件的默认行为就可以取消表单提交。例如，下列代码会阻止表单提交。
var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止默认事件
EventUtil.preventDefault(event);
});
这里使用了第 13 章定义的 EventUtil 对象，以便跨浏览器处理事件。调用 prevetnDefault()方法阻止了表单提交。一般来说，在表单数据无效而不能发送给服务器时，可以使用这一技术。
在 JavaScript 中，以编程方式调用 submit() 方法也可以提交表单。而且，这种方式无需表单包含提交按钮，任何时候都可以正常提交表单。来看一个例子。
var form = document.getElementById("myForm");
// 提交表单
form.submit();
在以调用 submit() 方法的形式提交表单时，不会触发 submit 事件，因此要记得在调用此方法之前先验证表单数据。
提交表单时可能出现的最大问题，就是重复提交表单。在第一次提交表单后，如果长时间没有反应，用户可能会变得不耐烦。这时候，他们也许会反复单击提交按钮。结果往往很麻烦（因为服务器要处理重复的请求），或者会造成错误（如果用户是下订单，那么可能会多订好几份）。解决这一问题的办法有两个：在第一次提交表单后就禁用提交按钮，或者利用 onsubmit 事件处理程序取消后续的表单提交操作。
14.1.2 重置表单
在用户单击重置按钮时，表单会被重置。使用 type 特性值为 “reset” 的 或 都可以创建重置按钮，如下面的例子所示。
<input type="reset" value="Reset Form">
<button type="reset">Reset Formbutton>
这两个按钮都可以用来重置表单。在重置表单时，所有表单字段都会恢复到页面刚加载完毕时的初始值。如果某个字段的初始值为空，就会恢复为空；而带有默认值的字段，也会恢复为默认值。用户单击重置按钮重置表单时，会触发 reset 事件。利用这个机会，我们可以在必要时取消重置操作。例如，下面展示了阻止重置表单的代码。
var form = document.getElementById("myForm");
EventUtil.addHandler(form, "reset", function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止表单重置
EventUtil.preventDefault(event);
});
与提交表单一样，也可以通过 JavaScript 来重置表单，如下面的例子所示。
var form = document.getElementById("myForm");
// 重置表单
form.reset();
与调用 submit() 方法不同，调用 reset() 方法会像单击重置按钮一样触发 reset 事件。
14.1.3 表单字段
可以像访问页面中的其他元素一样，使用原生 DOM 方法访问表单元素。此外，每个表单都有elements 属性，该属性是表单中所有表单元素（字段）的集合。这个 elements 集合是一个有序列表，其中包含着表单中的所有字段，例如 、 之间，如下面的例子所示。
<textarea rows="25" cols="5">initial valuetextarea>
另一个与 的区别在于，不能在 HTML 中给