十年专注于品牌网站建设 十年专注于品牌网站建设,低调、有情怀的网络应用服务商!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

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

百恒网络 2017-01-16 3403

javaScript 初的一个应用,就是分担服务器处理表单的责任,打破处处依赖服务器的局面。尽 管目前的 Web 和 JavaScript已经有了长足的发展,但 Web 表单的变化并不明显。由于 Web 表单 没有为许多常见任务提供现成的解决手段,很多开发人员不仅会在验证表单时使用 JavaScirpt,而且还 增强了一些标准表单控件的默认行为。
       在 HTML 中,表单是由<form>元素来表示的,而在 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 特性。 取得<form>元素引用的方式有好几种。其中常见的方式就是将它看成与其他元素一样,并为其 添加 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. 提交表单
       用户单击提交按钮或图像按钮时,就会提交表单。使用<input>或<button>都可以定义提交按钮, 只要将其 type 特性的值设置为"submit"即可,而图像按钮则是通过将<input>的 type 特性值设置为 "image"来定义的。因此,只要我们单击以下代码生成的按钮,就可以提交表单。 
        <!-- 通用提交按钮 --> 
       <input type="submit" value="Submit Form">
        <!-- 自定义提交按钮 -->
        <button type="submit">Submit Form</button>
        <!-- 图像按钮 --> 
       <input type="image" src="graphic.gif">
       只要表单中存在上面列出的任何一种按钮,那么在相应表单控件拥有焦点的情况下,按回车键就可 以提交该表单。(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"的<input>或<button>都 可以创建重置按钮,如下面的例子所示。 
        <!-- 通用重置按钮 -->
        <input type="reset" value="Reset Form"> 
        <!-- 自定义重置按钮 --> 
       <button type="reset">Reset Form</button> 
       这两个按钮都可以用来重置表单。在重置表单时,所有表单字段都会恢复到页面刚加载完毕时的初始值。如果某个字段的初始值为空,就会恢复为空;而带有默认值的字段,也会恢复为默认值。 用户单击重置按钮重置表单时,会触发 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 如转载请注明出处!

400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

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

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×