Wonder233
Wonder233

【表单脚本】介绍

1、在HTML中,表单是由

元素来表示的，而在JavaScript中，表单对应的则是HTMLFormElement类型。
2、HTMLFormElement继承了HTMLElement。因此它拥有HTML元素具有的默认属性，而且还独有自己的属性和方法：

HTMLFormElement属性和方法

属性/方法 说明
acceptCharset 服务器能够处理的字符集;
action 接受请求的URL;
elements 表单中所有控件的集合（HTMLCollection）;
enctype 请求的编码类型;
length 表单中控件的数量;
method 要发送的HTTP请求类型,通常是'get'或'post';
name 表单的名称;
target 用于发送请求和接受响应的窗口名称;
reset() 将所有表单重置;
submit() 提交表单;

获取元素的方法：

// 使用ID获取元素;
document.getElementById('myForm'); 

// 使用forms的数字下标获取元素;
document.forms[0];  //取得页面中的第一个表单

 // 使用forms的名称下标获取元素;
document.forms['myForm'];

// 使用获取form元素集合里的第一个元素;
document.getElementsByTagName('form')[0];

提交表单

1、单击提交按钮或图像按钮

用户单击提交按钮或图像按钮时，就会提交表单。
使用或

1、 只要表单中存在上面列出的任何一种按钮，那么在相应表单控件拥有焦点的情况下，按回车键就可 以提交该表单。（textarea 是一个例外，在文本区中回车会换行。）
2、如果表单里没有提交按钮，按回车 键不会提交表单。

以这种方式提交表单时，浏览器会在将请求发送给服务器之前触发 submit 事件。这样，我们就有机会验证表单数据，并据以决定是否允许表单提交。阻止这个事件的默认行为就可以取消表单提交。

var form = document.getElementById("myForm"); 
EventUtil.addHandler(form, "submit", function(event){ 
    //取得事件对象
    event = EventUtil.getEvent(event); 
    //阻止默认事件
    EventUtil.preventDefault(event); 
});

一般来说，在表单数据无效而不能发送给服务器时，可以使用这一技术。

2、以编程方式调用 submit()方法

这种方式无需表单包含提交按钮，任何时候都可以正常提交表单。

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

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

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

2. 重置表单

1、单击重置按钮

使用 type 特性值为"reset"的或

在重置表单时，所有表单字段都会恢复到页面刚加载完毕时的初始值。如果某个字段的初始值为空，就会恢复为空；而带有默认值的字段，也会恢复为默认值。 用户单击重置按钮重置表单时，会触发 reset 事件。利用这个可以在必要时取消重置操作。

var form = document.getElementById("myForm"); 
EventUtil.addHandler(form, "reset", function(event){ 
    //取得事件对象
    event = EventUtil.getEvent(event); 
    //阻止表单重置
    EventUtil.preventDefault(event); 
});

2、通过 JavaScript来重置表单

var form = document.getElementById("myForm"); 
//重置表单
form.reset();

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

表单字段

1、可以像访问页面中其它元素一样，使用原生DOM方法访问表单元素。
2、每个表单都有elements属性，该属性是表单中所有元素的集合。
3、elements集合是一个有序列表，其中包含着表单中所有字段，例如、