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

电话：0

手机：0

联系人：刘先生

E_mail：2074917417@qq.com

地址：成都市金牛区

您当前的位置是：主页 > 行业资讯 > news >

news

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

发布时间：2022/01/11 丨文章来源：未知丨浏览次数：

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.huicuiwang.cn/app/index.html 如转载请注明出处!

PS：所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！

上一篇：深圳坐标软件开发有限公司[怎么样]

下一篇：电视节目APP开发如何满足用户的痛点？

返回列表页