表单脚本

表单的基础知识

在HTML中，表单是由<form>元素来表示的，而在JavaScript中，表单对应的则是HTMLForm-Element类型。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特性

取得<form>元素引用的方式有好几种。其中最常见的方式就是将它看成与其他元素一样，并为其添加id特性，然后再像下面这样使用getElementById()方法找到它。

var form=document.getElementById("form1");

其次，通过document.forms可以取得页面中所有的表单。在这个集合中，可以通过数值索引或name值来取得特定的表单，如下面的例子所示：

var firstForm=document.forms[0];                         //取得页面中的第一个表单

var myForm=document.forms["form2"];                //取得页面中名称为“form2”的表单

 

提交表单

用户单击提交按钮或图像按钮时，就会提交表单。使用<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对象，以便跨浏览器处理事件。调用preventDefault()方法阻止了表单提交。一般来说，在表单数据无效而不能发送给服务器时，可以使用这一技术。

在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("myFrom");

EventUtil.addHandler(form,"reset",function(event){

   //取得事件对象

   event=EventUtil.getEvent(event);

   //阻止表单重置

   EventUtil.preventDefault(event);

});

与提交表单一样，也可以通过JavaScript来重置表单，如下面的例子所示：

var form=document.getElementById("myForm");

//重置表单

form.reset();

与调用submit()方法不同，调用reset()方法会像单击重置按钮一样触发reset事件。