14.表单脚本（1）

表单脚本：JavaScript 最初的一个应用，就是分担服务器处理表单的责任，打破处处依赖服务器的局面。尽管目前的Web 和JavaScript 已经有了长足的发展，但Web 表单的变化并不明显。由于Web 表单没有为许多常见任务提供现成的解决手段，很多开发人员不仅会在验证表单时使用JavaScirpt，而且还增强了一些标准表单控件的默认行为。

1.表单的基础知识：在HTML 中，表单是由<form>元素来表示的，而在JavaScript 中，表单对应的则是HTMLFormElement 类型。HTMLFormElement 继承了HTMLElement，因而与其他HTML 元素具有相同的默认属性。不过，HTMLFormElement 也有它自己下列独有的属性和方法。

1. acceptCharset：服务器能够处理的字符集；等价于HTML 中的accept-charset 特性。
2. action：接受请求的URL；等价于HTML 中的action 特性。
3. elements：表单中所有控件的集合（HTMLCollection）。
4. enctype：请求的编码类型；等价于HTML 中的enctype 特性。
5. length：表单中控件的数量。
6. method：要发送的HTTP 请求类型，通常是"get"或"post"；等价于HTML 的method 特性。
7. name：表单的名称；等价于HTML 的name 特性。
8. reset()：将所有表单域重置为默认值。
9. submit()：提交表单。
10. target：用于发送请求和接收响应的窗口名称；等价于HTML 的target 特性。

取得<form>元素引用的方式有好几种。其中最常见的方式就是将它看成与其他元素一样，并为其添加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 属性，但它们的值不一定相同。

• 提交表单：用户单击提交按钮或图像按钮时，就会提交表单。使用<input>或<button>都可以定义提交按钮，只要将其type特性的值设置为"submit"即可，而图像按钮则是通过将<input>的type 特性值设置为"image"来定义的。因此，只要我们单击以下代码生成的按钮，就可以提交表单。

<!-- 通用提交按钮 -->
<input type="submit" value="Submit Form">
<!-- 自定义提交按钮 -->
<button type="submit">Submit Form</button>
<!-- 图像按钮 -->
<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);
});

这里使用了EventUtil 对象，以便跨浏览器处理事件。调用prevetnDefault()方法阻止了表单提交。一般来说，在表单数据无效而不能发送给服务器时，可以使用这一技术。

在JavaScript 中，以编程方式调用submit()方法也可以提交表单。而且，这种方式无需表单包含提交按钮，任何时候都可以正常提交表单。来看一个例子。

var form = document.getElementById("myForm");
//提交表单
form.submit();

在以调用submit()方法的形式提交表单时，不会触发submit 事件，因此要记得在调用此方法之前先验证表单数据。

提交表单时可能出现的最大问题，就是重复提交表单。在第一次提交表单后，如果长时间没有反应，用户可能会变得不耐烦。这时候，他们也许会反复单击提交按钮。结果往往很麻烦（因为服务器要处理重复的请求），或者会造成错误（如果用户是下订单，那么可能会多订好几份）。解决这一问题的办法有两个：在第一次提交表单后就禁用提交按钮，或者利用onsubmit 事件处理程序取消后续的表单提交操作。

• 重置表单：在用户单击重置按钮时，表单会被重置。使用type 特性值为"reset"的<input>或<button>都可以创建重置按钮，如下面的例子所示。

<!-- 通用重置按钮 -->
<input type="reset" value="Reset Form">
<!-- 自定义重置按钮 -->
<button type="reset">Reset Form</button>

这两个按钮都可以用来重置表单。在重置表单时，所有表单字段都会恢复到页面刚加载完毕时的初始值。如果某个字段的初始值为空，就会恢复为空；而带有默认值的字段，也会恢复为默认值。

用户单击重置按钮重置表单时，会触发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 事件。

在Web 表单设计中，重置表单通常意味着对已经填写的数据不满意。重置表单经常会导致用户摸不着头脑，如果意外地触发了表单重置事件，那么用户甚至会很恼火。事实上，重置表单的需求是很少见的。更常见的做法是提供一个取消按钮，让用户能够回到前一个页面，而不是不分青红皂白地重置表单中的所有值。

• 表单字段：可以像访问页面中的其他元素一样，使用原生DOM 方法访问表单元素。此外，每个表单都有elements 属性，该属性是表单中所有表单元素（字段）的集合。这个elements 集合是一个有序列表，其中包含着表单中的所有字段，例如<input>、<textarea>、<button>和<fieldset>。每个表单字段在elements 集合中的顺序，与它们出现在标记中的顺序相同，可以按照位置和name 特性来访问它们。下面来看一个例子。

var form = document.getElementById("form1");
//取得表单中的第一个字段
var field1 = form.elements[0];
//取得名为"textbox1"的字段
var field2 = form.elements["textbox1"];
//取得表单中包含的字段的数量
var fieldCount = form.elements.length;

如果有多个表单控件都在使用一个name（如单选按钮），那么就会返回以该name 命名的一个NodeList。例如，以下面的HTML 代码片段为例。

<form method="post" id="myForm">
    <ul>
        <li><input type="radio" name="color" value="red">Red</li>
        <li><input type="radio" name="color" value="green">Green</li>
        <li><input type="radio" name="color" value="blue">Blue</li>
    </ul>
</form>

在这个HTML 表单中，有3 个单选按钮，它们的name 都是"color"，意味着这3 个字段是一起的。在访问elements["color"]时，就会返回一个NodeList，其中包含这3 个元素；不过，如果访问elements[0]，则只会返回第一个元素。来看下面的例子。

var form = document.getElementById("myForm");
var colorFields = form.elements["color"];
alert(colorFields.length); //3
var firstColorField = colorFields[0];
var firstFormField = form.elements[0];
alert(firstColorField === firstFormField); //true

以上代码显示，通过form.elements[0]访问到的第一个表单字段，与包含在form.elements["color"]中的第一个元素相同。

也可以通过访问表单的属性来访问元素，例如form[0]可以取得第一个表单字段，而form["color"]则可以取得第一个命名字段。这些属性与通过elements 集合访问到的元素是相同的。但是，我们应该尽可能使用elements，通过表单属性访问元素只是为了与旧浏览器向后兼容而保留的一种过渡方式。

1. 共有的表单字段属性：也可以通过访问表单的属性来访问元素，例如form[0]可以取得第一个表单字段，而form["color"]则可以取得第一个命名字段。这些属性与通过elements 集合访问到的元素是相同的。但是，我们应该尽可能使用elements，通过表单属性访问元素只是为了与旧浏览器向后兼容而保留的一种过渡方式。

• disabled：布尔值，表示当前字段是否被禁用。
• form：指向当前字段所属表单的指针；只读。
• name：当前字段的名称。
• readOnly：布尔值，表示当前字段是否只读。
• tabIndex：表示当前字段的切换（tab）序号。
• type：当前字段的类型，如"checkbox"、"radio"，等等。
• value：当前字段将被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件在计算机中的路径。

除了form 属性之外，可以通过JavaScript 动态修改其他任何属性。来看下面的例子：

var form = document.getElementById("myForm");
var field = form.elements[0];
//修改value 属性
field.value = "Another value";
//检查form 属性的值
alert(field.form === form); //true
//把焦点设置到当前字段
field.focus();
//禁用当前字段
field.disabled = true;
//修改type 属性（不推荐，但对<input>来说是可行的）
field.type = "checkbox";

能够动态修改表单字段属性，意味着我们可以在任何时候，以任何方式来动态操作表单。例如，很多用户可能会重复单击表单的提交按钮。在涉及信