最近写代码,处理很多表单,里面的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的取舍
最新推荐文章于 2024-04-29 17:39:04 发布