本节示例讲解 JavaScript 的提交 form 表单和重置 form 表单。
提交表单
使用 和 标签都可以定义提交按钮，只要将 type 属性值设置为“submit”即可，而图像按钮则是通过将 的 type 属性值设置为“image”。当单击提交按钮或图像按钮时，就会提交表单。
示例1
在下面示例中，当在表单内的文本框中输入文本之后，单击“提交”按钮会触发 submit 事件，该函数将禁止表单提交数据，而是弹出提示对话框显示输入的文本信息。
var t = document.getElementsByTagName("input")[0];
// 获取文本框的引用指针
var f = document.getElementsByTagName("form")[0];
// 获取表单的引用指针
f.onsubmit = function(e){ // 在表单元素上注册submit事件处理函数
alert(t.value);
return false; // 禁止提交数据到服务器
}
示例2
在下面示例中，当表单内没有包含“提交”按钮时，在文本框中输入文本之后按 Enter 键也一样能够触发 submit 事件。
var t = document.getElementsByTagName("input")[0];
// 获取文本框的引用指针
var f = document.getElementsByTagName("form")[0];
// 获取表单的引用指针
f.onsubmit = function(e){
alert(t.value);
}
在 文本区中按 Enter 键只会换行，不会提交表单。
以这种方式提交表单时浏览器会在将请求发送给服务器之前触发 submit 事件，用户有机会验证表单数据，并决定是否允许表单提交。
示例3
阻止事件的默认行为可以取消表单提交。下面示例先验证文本框中是否输入字符，如果为空，则调用 preventDefault() 方法阻止表单提交。
var t = document.getElementsByTagName("input")[0]; // 获取文本框的引用指针
var f = document.getElementsByTagName("form")[0]; // 获取表单的引用指针
f.onsubmit = function(e){
if(t.value.length < 1){
var event = e || window.event;
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
}
}
示例4
如果要禁止按 Enter 键提交响应，可以监测键盘响应，当按下 Enter 键时设置其返回值为 false，从而取消键盘的默认动作，禁止按 Enter 键提交响应行为。
var t = document.getElementsByTagName("input")[0];
// 获取文本框引用指针
t.onkeypress = function(e){ // 为文本框绑定键盘keypress事件处理函数
var e = e || window.event; // 标准化事件对象
return e.keyCode != 13;
// 当按下回车键时，设置返回值为false，禁止默认键盘行为
}
示例5
调用 submit() 方法也可以提交表单，这样就不需要表单包含“提交”按钮，任何时候都可以正常提交表单。
var t = document.getElementsByTagName("input")[0]; // 获取文本框的引用指针
var f = document.getElementsByTagName("form")[0]; // 获取表单的引用指针
t.onchange = function(){
f.submit();
}
调用 submit() 方法不会触发 submit 事件，因此在调用此方法之前要先验证表单数据。
在实际应用中，会出现用户重复提交表单现象。例如，在第 1 次提交表单后，如果长时间没有反应，用户可能会反复单击提交按钮，这样容易带来严重后果，服务器反复处理请求组，或者错误保存用户多次提交的订单。解决方法：在第一次提交表单后禁用提交按钮，或者在 onsubmit 事件处理函数中取消表单提交操作。
重置表单
为 或 标签设置 type="reset" 属性可以定义重置按钮。
重置按钮
当单击重置按钮时，表单将被重置，所有表单字段恢复为初始值。这时会触发 reset 事件。
示例1
下面示例设计当单击【重置】按钮时，弹出提示框，显示文本框中的输入值，同时恢复文本框的默认值，如果没有默认值，则显示为空。
var t = document.getElementsByTagName("input")[0];
// 获取文本框的引用指针
var f = document.getElementsByTagName("form")[0];
// 获取表单的引用指针
f.onreset = function(e){ // 在表单元素上注册reset事件处理函数
alert(t.value);
}
示例2
也可以利用这个机会，在必要时取消重置操作。下面示例检测文本框中的值，如果输入 10 个字符以上，就不允许重置了，避免丢失输入的文本。
var t = document.getElementsByTagName("input")[0]; // 获取文本框的引用指针
var f = document.getElementsByTagName("form")[0]; // 获取表单的引用指针
f.onreset = function(e){
if(t.value.length > 10){
var event = e || window.event;
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
}
}
用户也可以使用 form.reset() 方法重置表单，这样就不需要包含重置按钮。
