js中表单的基础知识及提交表单和重置表单的操作方法

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

元素来表示的，而在 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 特性。取得元素引用的方式有好几种。其中常见的方式就是将它看成与其他元素一样，并为其添加 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 属性，但它们的值不一定相同。
1. 提交表单
用户单击提交按钮或图像按钮时，就会提交表单。使用或

只要表单中存在上面列出的任何一种按钮，那么在相应表单控件拥有焦点的情况下，按回车键就可以提交该表单。（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 事件处理程序取消后续的表单提交操作。
2. 重置表单
在用户单击重置按钮时，表单会被重置。使用 type 特性值为"reset"的或
这两个按钮都可以用来重置表单。在重置表单时，所有表单字段都会恢复到页面刚加载完毕时的初始值。如果某个字段的初始值为空，就会恢复为空；而带有默认值的字段，也会恢复为默认值。用户单击重置按钮重置表单时，会触发 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 表单设计中，重置表单通常意味着对已经填写的数据不满意。重置表单经常会导致用户摸不着头脑，如果意外地触发了表单重置事件，那么用户甚至会很恼火。事实上，重置表单的需求是很少见的。更常见的做法是提供一个取消按钮，让用户能够回到前一个页面，而不是不分青红皂白地重置表单中的所有值
本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广大技人员有所帮助。原创文章出自:南昌APP开发公司-百恒网络 http://www.jxbh.cn/app/index.html 如转载请注明出处!

js中表单的基础知识及提交表单和重置表单的操作方法

欢迎您的光顾，我们将竭诚为您服务×