submit和button提交表单的区别

flowercat

浏览: 361755 次

最近访客更多访客>>

rainshow

mokyle

yyzhanglbb

daotadefeng

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

java

Google IE Firefox 百度 JavaScript

（1）下边的写法使得表单frm能够自动提交：下边的这个form，将鼠标点进的文本框中然后按键盘的回车键，则页面自动进入百度页面：http://www.baidu.com
<form name='frm' action="http://www.baidu.com ">

注意：将上边的“<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" 来提交表单

userName 、passWord处都填写数据，点击button。
OK！连上google了，IE地址栏显示：http://www.google.com/?userName=1passWord=1
(9)使用 "button" 来提交表单——参考js exec1()中的相关注释

</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"方法来避免.)

例如，一段

CODE:

<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

分享到：

IE与Firefox兼顾加入收藏 | JPA注解说明

2010-03-23 13:31
浏览 19359
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论