在HTML中,表单是由<form>元素来表示的,而在JavaScript中,表单对应的则是HTMLFormElement类型。HTMLFormElement继承了HTMLElement,因此它拥有HTML元素具有的默认属性,并且还独有自己的属性和方法:
HTMLFormElement属性和方法
属性或方法 | 说明 | 获取表单<form>对象的方法有很多种,如下: document.getElementById('myForm'); //使用ID获取<form>元素 document.getElementsByTagName('form')[0]; //使用获取第一个元素方式获取 document.forms[0]; //使用forms的数字下标获取元素 document.forms['yourForm']; //使用forms的名称下标获取元素 document.yourForm; //使用name名称直接获取元素 最后一种方法使用name名称直接获取元素,已经不推荐使用,这是向下兼容的早期用法。问题颇多,比如有两个相同名称的,变成数组;而且这种方式以后有可能会不兼容。 |
acceptCharset | 服务器能够处理的字符集 | |
action | 接受请求的URL | |
elements | 表单中所有控件的集合 | |
enctype | 请求的编码类型 | |
length | 表单中控件的数量 | |
name | 表单的名称 | |
target | 用于发送请求和接受响应的窗口名称 | |
reset() | 将所有表单重置 | |
submit() | 提交表单 |
提交表单:通过事件对象,可以阻止submit的默认行为,submit事件的默认行为就是携带数据跳转到指定页面。
我们可以可以使用submit()方法来自定义触发submit事件,也就是说,并不一定非要点击submit按钮才能提交。
在表单中尽量避免使用name="submit"或id="submit"等命名,这会和submit()方法发生冲突导致无法提交。
提交数据最大的问题就是重复提交表单。因为各种原因,当一条数据提交到服务器的时候会出现延迟等长时间没反映,导致用户不停的点击提交,从而使得重复提交了很多相同的请求,或造成错误、或写入数据库多条相同信息。
setTimeout(function (){fm.submit();}, 3000);
有两种方法可以解决这种问题:第一种就是提交之后,立刻禁用点击按钮;第二种就是提交之后取消后续的表单提交操作。
document.getElementById('sub').disabled = true; //将按钮禁用
在某些浏览器,F5只能起到缓存刷新的效果,有可能获取不到真正的源头更新的数据。那么使用ctrl+F5就可以把源头给刷出来。
重置表单:用户点击重置按钮时,表单会被初始化。虽然这个按钮还得以保留,但目前的Web已经很少去使用了。因为用户已经填写好各种数据,不小心点了重置就会全部清空,用户体验极差。
有两种方法调用reset事件,第一个就是直接type="reset"即可;第二个就是使用reset()方法调用即可。
- 本文固定链接: https://www.qingheluo.com/biaodanshuxingfangfayijitijiaozhongzhibiaodan/
- 转载请注明: qingheluo 于 清河洛 发表