深入理解表单脚本系列第一篇——表单对象

首页 > 代码库 > 深入理解表单脚本系列第一篇——表单对象

深入理解表单脚本系列第一篇——表单对象

2024-08-13 10:32:10 223人阅读

前面的话

　　javascript最初的一个应用就是分担服务器处理表单的责任，打破处处依赖服务器的局面。尽管目前的web和javascript已经有了长足的发展，但web表单的变化并不明显。由于web表单没有为许多常见任务提供现成的解决方法，很多开发人员不仅会在验证表单时使用javascript，而且还增强了一些标准表单控件的默认行为。本文是表单脚本系列第一篇——表单对象

表单属性

　　在HTML中，表单是由form元素来表示的，而在javascript中，表单对应的则是HTMLFormElement类型，HTMLFormElement继承了HTMLElement，但也有自己独有的属性和方法

　　acceptCharset 　　服务器能够处理的字符集；等价于HTML中的accept-charset特性

　　关于accept-charset属性的详细情况移步至此

　　action 　　接受请求的URL；等价于HTML中的action特性

　　关于action属性的详细情况移步至此

　　enctype　　请求的编码类型；等价于HTML中的enctype特性

　　关于enctype属性的详细情况移步至此

<form name="form" action="#"></form><script>var form = document.form;console.log(form.acceptCharset);//‘‘console.log(form.action);//"file:///C:/Users/Administrator/Desktop/iframe.html#"console.log(form.enctype);//application/x-www-form-urlencoded</script>

　　elements 　　表单中所有控件的集合(HTMLCollection)

　　length 　　表单中控件的数量

<form name="form" action="#">    <input type="text">    <textarea></textarea></form>    <script>var form = document.form;console.log(form.elements)//[input,textarea]console.log(form.length)//2</script>

　　method 　　要发送的HTTP请求类型，通常是"get"或"post"；等价于HTML的method特性

　　关于method属性的详细情况移步至此

　　name 　　表单的名称；等价于HTML的name特性

　　关于name属性的详细情况移步至此

　　target 　　用于发送请求和接收响应的窗口名称；等价于HTML的target特性

　　关于target属性的详细情况移步至此

<form name="form" action="#"></form><script>var form = document.form;console.log(form.method);//getconsole.log(form.name);//formconsole.log(form.target);//‘‘</script>

表单事件

　　reset事件　　　　将所有表单域重置为默认值

　　submit事件　　提交表单

<form name="form" action="#">    <input name="test" value="1">    <input type="reset">    <input type="submit"></form><script>var form = document.form;form.onreset = function(){    form.test.value = "2";    //若不使用return false阻止默认事件，那么reset将会把form.test的value重新置成1    return false;}form.onsubmit = function(){    form.test.value = "3";}</script>

表单方法

submit()方法

　　在javascript中，以编程方式调用submit()方法也可以提交表单。而且，这种方式无需表单包含提交按钮，任何时候都可以正常提交表单　　

　　以调用submit()方法提交表单时，不会触发submit事件

reset()方法

　　在用户单击重置按钮时，表单会被重置。使用type特性值为"reset"的<input>或<button>都可以创建重置按钮

<input type="reset" value="Reset Form"><button type="reset">Reset Form</button>

　　与调用submit()方法不同，调用reset()方法会像单击重置按钮一样触发reset事件

　　点击外部提交按钮后，浏览器URL变成file:///C:/inetpub/wwwroot/test.html?test=1#，且没有触发onreset事件，input的value值没有变化

　　点击外部重置按钮后，触发reset事件，input的value值变成2

<form name="form" action="#">    <input name="test" value="1"></form><button id="btn1">外部提交</button><button id="btn2">外部重置</button><script>var form = document.form;form.onreset = function(){    form.test.value = "2";    return false;}form.onsubmit = function(){form.test.value = "3";}btn1.onclick = function(){form.submit();}btn2.onclick = function(){form.reset();}</script>

深入理解表单脚本系列第一篇——表单对象

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 深入理解表单脚本系列第一篇——表单对象