最近写代码,处理很多表单,里面的Submit按钮有两种形式,分别是input和button,有点区别,做个试验:
先创建一个php文件demo.php
,用来接收表单数据:
<?php
var_dump($_POST);
?>
再创建一个html文件demo.html
,用来显示表单:
<form method="post" action="demo.php">
<input type="submit" name="foo" value="提交">
<input type="submit" name="bar" value="保存">
</form>
<form method="post" action="demo.php">
<button type="submit" name="foo" value="foo_value">提交</button>
<button type="submit" name="bar" value="bar_value">保存</button>
</form>
使用Firefox依次浏览,就能看到input和button的区别:input提交按钮显示的文字就是value,而button提交按钮显示的文字和value是独立的,从这个意义上来看,button更有表现力,是更值得推荐的提交按钮实现方式。
可惜IE总是拖后腿,使用IETester
里的IE6,7,8分别浏览,就会发现button提交按钮在IE下有Bug:
首先,在IE6里,如果一个表单里有多个button形式的提交按钮,那么不管你点击其中哪个按钮,所有的button按钮都会被提交,而在IE7,8里则点击哪个按钮,才提交哪个button按钮。此时,如果想在服务端判断用户点击了哪个按钮,只能使用Javascript
来处理。
另外,在IE6,7,8里,button形式的按钮在提交后,value属性都失效了,显示文字取代了value。
总结:从理论上来看,button形式的提交按钮优于input形式的提交按钮。但如果考虑浏览器通用性,很多时候还是只能使用input形式的提交按钮。
参考:http://www.w3.org/TR/html401/interact/forms.html
分享到:
相关推荐
submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上。 在javaScript中关于submit和button的...
提交表单后提交禁用提交按钮,防止重复提交.
表单控件-Input控件 表单控件 学习表单的核心就是学习表单控件,HTML语言提供了一系列的表单控件,用于定义不同的表单功能,如密码输入框、文本域、下拉列表、复选框等。 表单控件 表单控件常用在登录和注册模块 ...
主要介绍了javascript实现点击提交按钮后显示loading的方法,涉及javascript动态设置页面元素样式的相关技巧,需要的朋友可以参考下
html5圆形进度条加载按钮是一款modernizr html5表单提交按钮圆形进度条加载动画表单验证效果。
javascript中经常用到的一个表单提交,表单点击提交按钮后变成灰色
这个插件是使用css3属性制作的带进度条的表单提交按钮动画效果。当用户点击提交按钮后,提交按钮上出现进度条提示提交的进度。有18种效果,包括翻转,旋转,3d透视等效果。
modernizr html5表单提交按钮圆形进度条加载动画表单 modernizr html5表单提交按钮圆形进度条加载动画表单
先说对话框(Dialog)里的表单提交 错误方案 说起错误方案,比如,点击提交按钮,本地验证,验证通过立即让按钮不可点,这些没问题,而我的错误点概括是:在某个最后执行的回调函数的最后一行,我做了2个操作:1,...
今天在使用表单是同时使用POST更新、删除操作。然而form表单的 submit 且一旦提交则全部提交,所以想到的实现方法就是 使用button实现...下面小编给大家分享JS button按钮实现submit按钮提交效果,感兴趣的朋友参考下吧
如果表单是通过onsubmit进行Ajax提交,注意将表单提交按钮input type属性设为button,尽量不要设置为submit类型。 另外,在提交事件发出后,最好将提交按钮设置为disabled,防止由于网络延时问题,让用户有机会进行...
形考任务六 HTML 表单用于搜集不同类型的用户输入,包括文本输入、单选按钮输入、提交按钮,达到效果入下图所示。
这是一款非常有创意的jQuery和CSS3表单提交按钮动画特效。该提交按钮在用户点击的时候会转换为一个进度条,用以表示当前提交的进程,当提交结束后,进度条优惠转换为一个圆形的成功符号,效果非常酷。
modernizr html5表单提交按钮圆形进度条加载动画表单验证效果
表单提交验证类表单提交验证类表单提交验证类表单提交验证类
html5表单提交按钮圆形进度条加载动画.zip
今天在做利用connection 作表单提交过程中发现,标签”input”跟”botton”中的type属性设置原来也是一门学问。 在开发过程中,为了使html代码更加整洁,我首先利用YAHOO.util.Event.addListener(obj, “click”, ...
常用的表单提交判断函数常用的表单提交判断函数常用的表单提交判断函数常用的表单提交判断函数常用的表单提交判断函数常用的表单提交判断函数常用的表单提交判断函数常用的表单提交判断函数
js验证表单大全,用JS控制表单提交 ,javascript提交表单
表单内有两个提交按钮,要实现当点击不同的提交按钮时,分别进行两个不同的处理过程,在这里有实现表单多按钮提交action的处理方法分享给大家。 用PHP判断,一个表单两个按钮,按钮的name属性设为相同,但值设为...