手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表Tag:button

表单提交按钮input和button的取舍

这篇文章我一直在纠结,是否要摘录过来,但我还是最终决定放上来了。
其实大家都知道,在网页中,可见的按钮有三种,一种是input,一种是button,最后一种,其实也不能管是按钮,它是由img转化而来的。最最常用的还是input和button,在以前的日子里,大家都习惯于用input,因为他直接拥有type=submit,而button没有,它更适合于表达button。
然而。。。

XML/HTML代码
  1. 首先,在IE6里,如果一个表单里有多个button形式的提交按钮,那么不管你点击其中哪个按钮,所有的button按钮都会被提交,而在IE7,8里则点击哪个按钮,才提交哪个button按钮。此时,如果想在服务端判断用户点击了哪个按钮,只能使用Javascript来处理。  

这点,在不同浏览器对回车提交表单的处理办法已经提过,但老王说的这个是变量的传递,以及在指定name的时候,POST变量的值的变化。不废话看原文:
最近写代码,处理很多表单,里面的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
老王的文章在:表 单提交按钮input和button的取舍

Tags: form, input, button