<button>标签有什么缺点？

Question

我开始使用诊断css样式表,例如 http://snipplr.com/view/6770/css-diagnostics--highlight-deprecated-html-with-css--more/

建议的规则之一突出显示类型为submit的输入标记,建议将其<button>用作更具语义的解决方案.<button>您遇到过类型提交(例如浏览器兼容性)的优点和缺点是什么？

为了清楚,我理解规范<button>,它有一个定义的开始和结束,它可以包含各种元素,而输入是一个单一的,不能包含东西.我最想知道的是它是否破碎.我想知道当前可用的按钮是多少.不幸的是,下面的第一个答案似乎暗示它已被打破,除了表格以外的用途.

编辑2015年

景观发生了变化!我现在有6年以上的处理按钮的经验,浏览器有点从IE6和IE7转移.所以我会添加一个答案,详细说明我发现的内容以及我的建议.

Answer 1

使用时<button>始终指定类型,因为浏览器默认使用不同的类型.

这将在所有浏览器中一致地工作:

• <button type="submit">...</button>
• <button type="button">...</button>

这样你就获得了所有<button>的善良,没有任何缺点.

Answer 2

从ASP.NET的角度回答.

当我发现这个问题和一些ModernButton控件的代码时,我很兴奋,最终,它是一个<button>控件.

所以我开始添加各种这些按钮,用<img />它们内部的标签装饰,使它们脱颖而出.这一切都很有用......在Firefox和Chrome中.

然后我尝试了IE6并得到了"一个潜在危险的Request.Form值被检测到",因为IE6提交了按钮内部的html,在我的例子中,它有html标签.我不想禁用validateRequest标志,因为我喜欢这个额外的数据验证.

所以我在提交发生之前写了一些javascript来禁用该按钮.在一个测试页面上工作得很好,只有一个按钮,但是当我在一个真实的页面上尝试它时,它有其他<button>标签,它再次爆炸.因为IE6提交了所有按钮的html.所以现在我有各种代码在提交之前禁用按钮.

与IE7相同的问题.IE8幸好有此修复.

让人惊讶.如果您使用的是ASP.NET,我建议不要走这条路.

更新:

我找到了一个看起来有希望解决这个问题的图书馆.

如果您使用此库中的ie8.js脚本:http://code.google.com/p/ie7-js/

它可能会很好.IE8.js使用按钮标签的IE8加速IE5-7的速度.它使提交的值成为实际值,并且只提交一个按钮.

Answer 3

您需要知道的一切:W3Schools <button>标签

所有主流浏览器都支持该标记.

重要提示:如果您在HTML表单中使用button元素,则不同的浏览器将提交不同的值.Internet Explorer将在<button>和</button>标签之间提交文本,而其他浏览器将提交value属性的内容.使用该input元素在HTML表单中创建按钮.

Answer 4

优点:

• 显示标签不必与提交的值相同.非常适合i18n和"删除此行"
• 您可以包含诸如<em>和之类的标记<img>

缺点:

• 某些版本的MSIE默认type="button"不是,type="submit"所以你必须明确
• 某些版本的MSIE会将所有版本<button>视为成功,因此您无法分辨在多提交按钮表单中单击了哪一个
• 某些版本的MSIE将提交显示文本而不是实际值

来自https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button:

IE7有一个错误,当用Click Click提交表单时,发送的POST数据将导致myButton = Click me而不是myButton = foo.IE6有一个更糟糕的错误,通过按钮提交表单将提交表单的所有按钮,与IE7相同的错误.IE8中已修复此错误.

Answer 5

需要注意的一个重要问题:在包含<button/>元素的表单中,IE6和IE7在<button/>单击元素时不会提交表单.另一方面,其他浏览器将提交表单.

相比之下,没有浏览器会在单击<input type="button"/>或<button type="button"/>单击元素时提交表单.当然,所有浏览器都会在单击<input type="submit"/>或<button type="submit"/>单击元素时提交表单.

正如@ orip的回答所说,为了在浏览器之间获得一致的提交行为,请始终使用<button type="button" />或<button type="submit" />在<form/>元素内部.永远不要遗漏该type属性.

Answer 6

<button>6年后,我对现在的怪癖有了一些经验,所以这是我的建议:

• 如果你仍然支持IE6或IE7,要非常小心按钮,这些浏览器的行为非常错误,在某些情况下提交innerHtml而不是value ='whatever'和所有按钮值而不仅仅是一个和不良行为,如那.所以彻底测试或避免浏览器的缘故.

• 否则:如果您仍然支持IE8,<a href='http://example.com'><button></button></a>则效果不佳,可能还有其他任何将按钮嵌入可点击元素的内容.所以要小心.

• 否则:如果你<button>主要使用一个元素来点击你的javascript,并且它在一个表单之外,那就做吧<button type='button'>,你可能就好了!

• 否则:如果你<button>在表单中使用,请注意默认类型<button>实际上<button type='submit'>是(大多数)情况,所以要明确你的类型和你的value,如:<button type='submit' value='1'>Search</button>.

需要注意的是:使用一个按钮,模拟类,如引导的.btn允许你只会让事情像<div>或者<a>甚至<button>正好看你想让它的方式,并在情况<a>有一个更加有用的备用行为.不错的选择.

TLDR; 如果您不关心古老的浏览器,可以使用,但Bootstrap提供了更加强大的css视觉上类似的替代品值得研究.