理解JavaScript表单的基础知识_javascript技巧

取得form元素的引用可以是getElementById、也可以是document.forms中数值索引或name值；

一、提交表单

提交表单的按钮有三种：

Submit Form

以上面这种方法提交表单会在浏览器请求发送给服务器之前触发submit事件，这样就可以验证表单数据和决定是否允许提交表单，如下面的代码就可以阻止表单的提交：

另外也可以通过js脚本调用submit()方法提交表单，在调用submit()提交表单不会触发submit事件。

第一次提交表单后如果长时间没有回应，用户会变得不耐烦，往往多次点击提交按钮，导致重复提交表单，因此应该在第一次提交表单后就禁用提交按钮或利用onsubmit事件阻止后续操作。

二、重置表单

重置表单应该使用input或button：

Reset Form

当用户单击重置按钮重置表单时，会触发reset事件，可以在必要的时候取消重置操作：

另外也可以通过js脚本调用reset()方法重置表单，在调用reset()方法重置表单时会触发reset事件。

三、表单字段

每个表单都有一个elements属性，该属性是表单中所有表单（字段）的集合：

多个表单控件使用一个name（单选按钮），那么会返回以该name命名的NodeList：

name都是color，在访问elements["color"]时，返回NodeList：

共有的表单字段属性

可通过submit事件在提交表单后禁用提交按钮，但不可以用onclick事件，因为onclick在不同浏览器中有“时差”；

共有表单字段方法

可以在侦听页面的load事件上添加该focus()方法：

需要注意，第一个表单字段是input，如果其type特性为“hidden”，或者css属性的display和visibility属性隐藏了该字段，就会导致错误。

在HTML5中，表单中新增加了autofocus属性，自动把焦点移动到相应字段。

autofocus
如：

或者检测是否设置了该属性，没有的话再调用focus()方法：

共有的表单字段事件

除了支持鼠标键盘更改和HTML事件之外，所有的表单字段都支持下列3个事件：

blur： 当前字段失去焦点时触发；
change：input元素和textarea元素，在它们失去焦点且value值改变时触发；select元素在其选项改变时触发（不失去焦点也会触发）；
focus：当前字段获得焦点时触发；
如：