`
flowercat
  • 浏览: 358206 次
社区版块
存档分类
最新评论

submit和button提交表单的区别

    博客分类：
  • java
GoogleIEFirefox百度JavaScript
阅读更多

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

   <input type="text" name= "userName"/>
    <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" onclick="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" onclick="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>标记恐怕还存在几个不大不小的问题。

  1. 在一个表单里，如果有一个以上"submit"类型的<button>标签存在，在表单被提交时，不管你点击哪 个<button>，所有<button>的值都会被post/get。
  2. <button>的缺省type属性被设置为"button"，但是在A级别浏览器下，应该设置为"submit"才对
  3. 如果你用javascript去访问<button>的value属性，IE却返回了<button>的 innerHTML属性，很让人恼火。 (可以使用"getAttributeNode"方法来避免.)

例如，一段

CODE:
  1. <form>
  2. <button type="submit" value="1" name="action-1" >text 1 </button>
  3. <button type="submit" value="2" name="action-2" >text 2 </button>
  4. </form>

在IE下，上面两个button的数据都会被提交。并且ie会提交这两个button的innerText而不是value。而其它浏览器仅仅提交 你点击的那个button。

 

IE6与FireFox的区别，IE6下button标签的type默认是button，而Firefox下却是submit

分享到：
| JPA注解说明
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics