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

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

×
目录
[1]表单属性 [2]表单事件 [3]表单方法

前面的话

  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>

<iframe style="width: 100%; height: 50px;" src="http://sandbox.runjs.cn/show/lxdhdjiu" frameborder="0" width="320" height="240"></iframe>

表单方法

submit()方法

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

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

reset()方法

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

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

<iframe style="width: 100%; height: 40px;" src="http://sandbox.runjs.cn/show/knmw1sja" frameborder="0" width="320" height="240"></iframe>

  与调用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>

<iframe style="width: 100%; height: 80px;" src="http://sandbox.runjs.cn/show/a4qb9yuv" frameborder="0" width="320" height="240"></iframe>

<script type="text/javascript">// 0){ return; } if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){ if(select[i+1].getBoundingClientRect().top > 0){ change(oCon.children[i+2]) } }else{ change(oCon.children[select.length+1]) } }}document.body.onmousewheel = wheel;document.body.addEventListener(‘DOMMouseScroll‘,wheel,false);var oCon = document.getElementById("content");var close = oCon.getElementsByTagName(‘span‘)[0];close.onclick = function(){ if(this.innerHTML == ‘显示目录‘){ this.innerHTML = ‘ב; this.style.background = ‘‘; oCon.style.border = ‘2px solid #ccc‘; oCon.style.width = ‘‘; oCon.style.height = ‘‘; oCon.style.overflow = ‘‘; oCon.style.lineHeight = ‘30px‘; }else{ this.innerHTML = ‘显示目录‘; this.style.background = ‘#3399ff‘; oCon.style.border = ‘none‘; oCon.style.width = ‘60px‘; oCon.style.height = ‘30px‘; oCon.style.overflow = ‘hidden‘; oCon.style.lineHeight = ‘‘; }}for(var i = 2; i < oCon.children.length; i++){ oCon.children[i].onmouseover = function(){ this.style.color = ‘#3399ff‘; } oCon.children[i].onmouseout = function(){ this.style.color = ‘inherit‘; if(this.mark){ this.style.color = ‘#3399ff‘; } } oCon.children[i].onclick = function(){ change(this); } }function change(_this){ for(var i = 2; i < oCon.children.length; i++){ oCon.children[i].mark = false; oCon.children[i].style.color = ‘inherit‘; oCon.children[i].style.textDecoration = ‘none‘; oCon.children[i].style.borderColor = ‘transparent‘; } _this.mark = true; _this.style.color = ‘#3399ff‘; _this.style.textDecoration = ‘underline‘; _this.style.borderColor = ‘#2175bc‘; }// ]]></script><script type="text/javascript" src="http://files.cnblogs.com/files/xiaohuochai/contextMenu.js"></script>

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