14.1 表单元素
2016-07-28 23:14
239 查看
HTMLFormElement extends HTMLElement
表单类型,从上面可以看出与其他HTML元素具有相同的默认属性。不过HTMLFormElement也有它自己独有的属性和方法。
获取表单
方式一:
方式二:forms
提交表单
第一类方式:用户单击表单按钮或图片按钮,就会提交表单。 使用input 、button 都可以定义提交按钮
已这种方式提交的表单时,浏览器会在将请求发送服务器之前触发submit事件。这样我们就有验证表单数据,并据以决定是否允许提交表单。 阻止事件的默认行为就可以取消表单提交。
第二类:在JavaScript中,以编程方式调用 submit()方法也可以提交
注意:通过这种方式提交的表单,并不会触发submit事件。所以在调用该方法之前应该先对表单进行处理。
给表单中一个元素添加点击事件,用调用方法的形式提交表单,只执行了click处理函数, submit处理函数并未执行。
★★★★★★
提交表单时可能出现的最大问题,就是重复提交表单。在第一个提交表单后,如果长时间没有反应,用户可能会变得不耐烦。这时可能会返回点击提交按钮。
解决这问题最好常用的方式:
★★★:在第一次提交表单后就禁用提交按钮。
★★★:利用onsubmit 事件处理程序取消后续的表单提交操作。
重置表单
重置表单就是恢复表单元素到页面刚刚加载完毕时的初始值。如果某个字段的初始值为空,就会恢复为空;默认值则恢复默认值
与重置相关的一个事件: reset 事件,该事件与submit有点区别,不管用那种方式提交都会触发 reset事件。
当出现这样情况时会出现错误:不能使用关键之作为其 id 或 name 的名称
表单字段
可以像访问页面中的元素一样,使用原生DOM方法访问表单元素。每个表单都有elements属性,该属性是表单中所有元素的集合。
elements集合
是一个有序列表,其中包含着表单中的所有字段,例如 input textarea button fieldset 。 每个表单字段在elements集合中顺序, 与它们出现在标记中顺序相同,可以按照位置或name特性来访问。
表单类型,从上面可以看出与其他HTML元素具有相同的默认属性。不过HTMLFormElement也有它自己独有的属性和方法。
acceptCharset | 服务器处理的字符集 |
action | 接受请求的url |
elements | 表单所有控件的集合(HTMLCollection) |
enctype | 请求编码类型; 等价HTML中的enctype |
length | 表单中控件的数量 |
method | 要发送的HTTP请求类型,通常是 get 或 method |
name | 表单的名称 |
Function | |
reset() | 将所有表单重置为默认值 |
submit() | 提交表单 |
target | 用于发送请求和接收响应的窗口名称 |
方式一:
getElementById()
方式二:forms
document.forms
提交表单
第一类方式:用户单击表单按钮或图片按钮,就会提交表单。 使用input 、button 都可以定义提交按钮
<!--通用--> <input type="submit" value="Submit Form"> <!--自定义--> <button type="submit">Submit Form</button> <!--图像按钮--> <input type="image" value="**.gif">
已这种方式提交的表单时,浏览器会在将请求发送服务器之前触发submit事件。这样我们就有验证表单数据,并据以决定是否允许提交表单。 阻止事件的默认行为就可以取消表单提交。
var form = document.getElementById("form"); form.addHandler(form,"submit",function(evennt){ //取得事件对象 event = EventUtil.getEvent(event); //阻止more事件 event.preventDefault(); });
第二类:在JavaScript中,以编程方式调用 submit()方法也可以提交
注意:通过这种方式提交的表单,并不会触发submit事件。所以在调用该方法之前应该先对表单进行处理。
var form = document.getElementById("form"); var btn = document.getElementById("btn"); EventUtil.addHandler(form,"submit",function(evennt){ //取得事件对象 event = EventUtil.getEvent(event); //阻止more事件 event.preventDefault(); alert("进入submit事件中"); }); EventUtil.addHandler(btn,"click",function(evennt){ alert("进入执行点击"); //进入执行点击 form.submit(); });
给表单中一个元素添加点击事件,用调用方法的形式提交表单,只执行了click处理函数, submit处理函数并未执行。
★★★★★★
提交表单时可能出现的最大问题,就是重复提交表单。在第一个提交表单后,如果长时间没有反应,用户可能会变得不耐烦。这时可能会返回点击提交按钮。
解决这问题最好常用的方式:
★★★:在第一次提交表单后就禁用提交按钮。
★★★:利用onsubmit 事件处理程序取消后续的表单提交操作。
重置表单
重置表单就是恢复表单元素到页面刚刚加载完毕时的初始值。如果某个字段的初始值为空,就会恢复为空;默认值则恢复默认值
与重置相关的一个事件: reset 事件,该事件与submit有点区别,不管用那种方式提交都会触发 reset事件。
var form = document.getElementById("form"); EventUtil.addHandler(form,"reset",function(evennt){ //取得事件对象 event = EventUtil.getEvent(event); //阻止more事件 event.preventDefault(); alert("进入reset事件中"); });
当出现这样情况时会出现错误:不能使用关键之作为其 id 或 name 的名称
<form id="form"> <input value="" type="text"> <input type="reset" id="reset" value="重置"> <input type="submit" value="submit"> <button type="button" id="btn">重置</button> </form >
var form = document.getElementById("form"); var btn = document.getElementById("btn"); EventUtil.addHandler(form,"reset",function(event){ //取得事件对象 event = EventUtil.getEvent(event); //阻止more事件 event.preventDefault(); alert("进入reset事件中"); }); EventUtil.addHandler(btn,"click",function(event){ //alert("进入执行点击"); //进入执行点击 form.reset() });
表单字段
可以像访问页面中的元素一样,使用原生DOM方法访问表单元素。每个表单都有elements属性,该属性是表单中所有元素的集合。
elements集合
是一个有序列表,其中包含着表单中的所有字段,例如 input textarea button fieldset 。 每个表单字段在elements集合中顺序, 与它们出现在标记中顺序相同,可以按照位置或name特性来访问。
相关文章推荐
- Android Gradle插件之最新TransfomAPI解析
- 设计模式之禅-抽象工厂模式
- java Map及Map.Entry详解
- 15.奖学金
- 短信猫 pdu发信息
- Hust oj 1397 XianGe的游戏II(KMP)
- java远程通信
- 14.6174问题
- Windows下用PIP安装scipy出现 no lapack/blas resources found
- Codeforces Round #249 (Div. 2)B Pasha Maximizes(贪心)
- 韩国 DBA 博客
- dp水一天
- 校外实习-7.28
- Codeforces Round #249 (Div. 2)B Pasha Maximizes(贪心)
- 为什么要使用SLF4J而不是Log4J
- iOS中UIButton详解
- Intellij IDEA 远程debug、远程tomcat部署项目
- 13.阶乘因式分解
- Android开发艺术探索--singleTask的启动模式--笔记
- 字符串反转