(1) 下边的写法使得表单frm能够自动提交 :下边的这个form,将鼠标点进的文本框中然后按键盘的回车键,则页面自动进入百度页面:http://www.baidu.com
<form name='frm' action="http://www.baidu.com ">
<input type="hidden" name= "userName1"/>
</form>
注意:将上边的“<input type="hidden" name= "userName1"/>”去掉或者增加上,都不能改变页面的自动提交!
(2)而同样的写法,进行如上的操作,却不会提交
可能是有两个文本输入框的缘故吧(注意:上边仅有一个)。
<form name='frm' action="http://www.baidu.com ">
<input type="text" name= "userName"/>
<input type="text" name= "pass"/>
</form>
(3)下面试试,同一个页面有多个from的情况
这里先试试多个form、每个form中仅有一个文本输入框
<form name='frm1' action="http://www.baidu.com ">
<input type="text" name= "userName"/>
<input type="hidden" name= "userName1"/>
</form>
<form name='frm2' action="http://www.google.cn/ ">
<input type="text" name= "userName"/>
</form>
经试验,每个from中的文本输入框都具有自动提交的能力。
(4)下面试试,同一个页面有多个from的情况
这里先试试多个form、有的form中仅有一个文本输入框,有的form中则有多个文本输入框
<form name='frm1' action="http://www.baidu.com ">
<input type="text" name= "userName"/>
<input type="text" name= "passWord"/>
</form>
<form name='frm2' action="http://www.google.cn ">
<input type="text" name= "userName"/>
</form>
<form name='frm3' action="http://www.yahoo.com ">
<input type="text" name= "userName"/>
<input type="text" name= "passWord"/>
</form>
经试验,只有 frm2 具有自动提交的特性。
看来:只要页面中的某个表单中仅有一个文本输入框,则其页面就具有自动提交的特性了。
5)如何防止页面自动提交?!
很简单!只要在from 中加上 onSubmit="return false;"就OK了!
<form name='frm1' action="http://www.baidu.com ">
<input type="text" name= "userName"/>
<input type="text" name= "passWord"/>
</form>
<form name='frm2' action="http://www.google.cn " onSubmit="return false;">
<input type="text" name= "userName"/>
</form>
呵呵,经过onSubmit="return false;" 改造后,frm2不再自动提交了!
(6)下边看看input type="submit"对提交表单的影响
这里不拿仅有一个文本框的form进行测试了(如果不用onSubmit="return false;" ,它是自动提交的)
<form name='frm1' action="http://www.baidu.com ">
<input type="text" name= "userName"/>
<input type="text" name= "passWord"/>
<input type="submit" value="提交1"/>
</form>
<form name='frm2' action="http://www.google.com ">
<input type="text" name= "userName"/>
<input type="text" name= "passWord"/>
<input type="submit" value="提交2"/>
</form>
则,分别鼠标点击frm1、frm2中的文本框并按回车后,会根据各自的action来进入不同的页面
7)下边看看input type="button"对提交表单的影响
<form name='frm1' action="http://www.baidu.com ">
<input type="text" name= "userName"/>
<input type="text" name= "passWord"/>
<input type="button" value="提交1"/>
</form>
<form name='frm2' action="http://www.google.com ">
<input type="text" name= "userName"/>
<input type="text" name= "passWord"/>
<input type="button" value="提交2"/>
</form>
哈哈,分别鼠标点击frm1、frm2中的文本框并按回车后,都没有反应!看来button这样是不能提交表单的
(8)使用 "button" 来提交表单
<form name='frm' action="http://www.baidu.com ">
<input type="text" name= "userName"/>
<input type="text" name= ""/>
<input type="button" value="提交1" οnclick="exec('http://www.google.com')"/>
</form>
userName 、passWord处都填写数据,点击button。
OK!连上google了,IE地址栏显示:http://www.google.com/?userName=1passWord=1
(9)使用 "button" 来提交表单——参考js exec1()中的相关注释
<form name='frm' action="http://www.google.com ">
<input type="text" name= "userName"/>
<input type="text" name= "passWord"/>
<input type="button" value="提交1" οnclick="exec1('http://www.google.com')"/>
</form>
<form name='frm1' action="http://www.hao123.com ">
<input type="text" name= "userName"/>
</form>
</body>
</html>
在web开发中,我们经常会遇到,一点回车键表单就自己提交的问题,能不能禁用回车键呢,答案是肯定的.
Html代码
<from action="" method="post" onSubmit="return false">
...............
</from>
如果想在表单提交时,进行验证
Html代码
<html>
<head>
<script lanuage="javascript">
function check()
{
//验证不通过时
return false;
}
</script>
</head>
<body>
<from action="" method="post" onSubmit="return check()">
...............
</from>
</body>
</html>
这样就会对表单进行验证再进行提交
要注意的是,千万不能写成
Html代码
<from action="" method="post" onSubmit="check()">
...............
</from>
因为check()不通过后会返回false, 因为onsubmit属性就像是<form>这个html对象的一个方法名,其值(一字符串)就是其方法体,默认返回true,所以还是相当 于验证通过
记得对表单验证一定要写成这样
Html代码
<from action="" method="post" onSubmit="return check()">
...............
</from>
在ie下,<button>标记恐怕还存在几个不大不小的问题。
- 在一个表单里,如果有一个以上"submit"类型的<button>标签存在,在表单被提交时,不管你点击哪 个<button>,所有<button>的值都会被post/get。
- <button>的缺省type属性被设置为"button",但是在A级别浏览器下,应该设置为"submit"才对
- 如果你用javascript去访问<button>的value属性,IE却返回了<button>的 innerHTML属性,很让人恼火。 (可以使用"getAttributeNode"方法来避免.)
例如,一段
-
<form>
-
<button type="submit" value="1" name="action-1" >text 1 </button>
-
<button type="submit" value="2" name="action-2" >text 2 </button>
-
</form>
在IE下,上面两个button的数据都会被提交。并且ie会提交这两个button的innerText而不是value。而其它浏览器仅仅提交 你点击的那个button。
IE6与FireFox的区别,IE6下button标签的type默认是button,而Firefox下却是submit