<button>标签有哪些缺点？

Question

我开始使用一份诊断性的CSS样式表，例如：http://snipplr.com/view/6770/css-diagnostics--highlight-deprecated-html-with-css--more/ 其中一条建议的规则是用颜色突出显示type为submit的input标签，并推荐使用<button>作为更语义化的解决方案。您遇到过关于<button> with type submit的优缺点（例如浏览器兼容性）吗？

仅为明确起见，我理解<button>的规范，它有定义的开始和结束，可以包含各种元素，而input是单元素且不能包含其他元素。我想知道的实质上是它是否存在问题。我想知道当前<button>的可用性如何。不幸的是，下面的第一个答案似乎暗示在除了表单之外的用途中它是有问题的。 2015年编辑 情况已经改变！我现在有了6年处理按钮的经验，浏览器也从IE6和IE7中发展出来了。因此，我将添加一篇回答详细说明我发现了什么以及我建议的内容。

- Kzqai

---

你有没有注意到，人们从来不会说“如果你想要Opera9”或者“如果你想要Firefox 2”之类的话……哈哈，IE6/7除外 :( - ANeves

这是因为IE6和7拥有相当大的市场份额，而Opera9和Firefox 2则没有。非常简单的事情。 - user229044

另一个我最终发现的按钮标签的怪癖是：如果你将它包裹在链接中，在某些浏览器中可以工作，而在其他能力较弱的浏览器（ie6、ie7、ie8）中则不能。虽然这可能不仅仅适用于按钮，但在哪里还有其他地方可以使用这种技术呢？ - Kzqai

这个问题需要更新。 - Randy L

@the0ther，我尽力更新了。 - Kzqai

Answer 1

在使用 <button> 标签时，应该始终指定类型，因为不同的浏览器默认类型不同。

以下代码可以保证在所有浏览器中都能工作：

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

这样就可以获得所有 <button> 的好处，没有任何弊端。

- orip

---

+1 - 尽管这远非答案（因为原帖作者在寻求其他东西），但这是非常好的建议。 - AeroCross

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将IE5-7与按钮标记提升到与IE8相同的水平。它使提交值成为真实值，并且只有一个按钮被提交。

- slolife

---

这类似于我的经历。 "使用强大的按钮提交表单而不是输入框会更好！" "哦，我知道的问题只是一个更长列表中的一部分。" "嗯，按钮实际上是无用的，带来的麻烦比它的价值更高，现在我需要恢复一些按钮。" - Kzqai

我实际上尝试了那个IE7的JS库，但并未留下深刻印象。请谨慎使用。 - Kzqai

@Tchalvak，你能详细说明一下你在IE7 js库方面遇到的问题和关注点吗？ - slolife

在我检查它时，JavaScript 在其目标 IE7 中出现错误。 - Kzqai

所有这些微软的东西 == 脑损伤 - Dmitry Minkovsky

Answer 3

你需要了解的一切内容：W3Schools<button>标签

<button>标签在所有主流浏览器中都得到支持。

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

- David Brown

---

哇...这不是使button标签的实际使用变得不可能吗？ - hitec

那是说“只要不在HTML表单中，你可以使用按钮标签”吗？哎呀，我想如果除了表单按钮以外我还需要使用按钮，那就太好了，但我猜这意味着我主要会使用<input> 标签。 - Kzqai

如果你要触发 AJAX，那么你不需要一个表单。在这种情况下按钮非常适用。 - Stefan Kendall

我已编辑答案，删除了暗示W3Schools页面是W3C页面的意涵。这两个组织彼此不相关。W3C编写标准，而W3Schools编写关于这些标准的低质量教程和参考资料。 - Quentin

我猜这里的道德就是我们不应该再等待IE6用户了，因为他们已经生活在一个破碎的Web模拟中了。 - Kzqai

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存在一个错误，即使用“点击我”提交表单时，发送的POST数据将导致myButton= Click me而不是myButton= foo。IE6有一个更糟糕的错误，即通过按钮提交表单将提交表单的所有按钮，具有与IE7相同的错误。此错误已在IE8中修复。

- Quentin

---

这个答案是这里讨论中最好的总结之一，只是它缺少三个常数的IE版本号范围。 - jpaugh

Answer 5

一个需要注意的重要细节是：在包含 <button/> 元素的表单中，IE6 和 IE7 在点击 <button/> 元素时不会提交表单。而其他浏览器则会提交表单。

相反，当点击 <input type="button"/> 或 <button type="button"/> 元素时，所有浏览器都不会提交表单。当点击 <input type="submit"/> 或 <button type="submit"/> 元素时，所有浏览器都会提交表单。

正如 @orip 的回答所说，为了在各种浏览器中获得一致的提交行为，请始终在 <form/> 元素内使用 <button type="button" /> 或 <button type="submit" />。永远不要省略 type 属性。

- Chris Calo

---

没有类型的按钮，还是带有类型的按钮？ - Kzqai

我测试了没有属性的<button/>元素。我将再次尝试使用<button type="button" />和<button type="submit" />。 - Chris Calo

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 type='submit'> 在（大多数）情况下，因此请明确指定您的类型和 value，例如：<button type='submit' value='1'>Search</button>。

请注意：使用类似 Bootstrap 的.btn这样的按钮模拟类，可以让您使<div>或<a>甚至<button>看起来完全符合您的要求，并且在<a>的情况下具有更有用的回退行为。不错的选择。

简而言之：如果您不关心古老的浏览器，那么可以使用它，但是Bootstrap提供了更多功能强大的可视化相似的CSS替代方案值得研究。

- Kzqai

Answer 7

它是否有问题：

通常，答案是“在所有主要浏览器中都能正常工作，但在IE中存在以下小问题。”我不认为这会对您造成问题。

<button>标签受到所有主要浏览器的支持。唯一的支持问题在于按下按钮后Internet Explorer将提交什么。

主要浏览器将提交value属性的内容。而Internet Explorer会提交<button>和</button>标签之间的文本，同时还会提交表单中其他每个按钮的值，而不仅仅是您点击的那个按钮。

对于您的目的，只需清理旧的HTML，这不应该成为问题。

来源：

1. http://www.peterbe.com/plog/button-tag-in-IE
2. http://www.w3schools.com/tags/default.asp

- Robert Kuykendall

---

这并不意味着“只要不在HTML表单中，你就可以使用按钮标签”，它只是意味着如果你在HTML表单中使用多个按钮，Internet Explorer将不会告诉你哪个按钮被点击了，而是会包括每个按钮的文本（而不是值）。对于单按钮表单，这应该与提交输入完全相同。 - Robert Kuykendall

我不明白为什么“Internet Explorer将提交文本”不会使按钮变得不可靠，但我想通过这些答案作为起点，我可以测试它，并且有信心我没有错过任何破损的方面。 - Kzqai

它涉及表单中的多个'<button>'元素，这是Button的一个特性，提交包括表单中的信息以及按下的按钮。例如，您有一个“接受”和“拒绝”按钮。但是，当IE遇到'<button value="submit-accept">Accept Terms.</button>'时，它会发送“接受条款。”而不是正确地发送'submit-accept'。此外，它为表单中的每个按钮发送此内容，而不仅仅是单击的按钮，使多按钮功能无用。但是，您不打算使用此功能，因此无需担心。 - Robert Kuykendall

Answer 8

这里有一个解释区分的网站： http://www.javascriptkit.com/howto/button.shtml 基本上，input标签只允许文本（虽然你可以使用背景图像），而button允许您添加图像、表格、div和其他任何内容。此外，它不需要嵌套在form标签中。

- Chris Haas

Answer 9

您可能还会遇到这些问题：

• jQuery无法定位按钮（尽管并非jQuery的错）：在IE7中使用<button>标签
• 如果有多个<button>，可能会出现多个请求变量：http://www.peterbe.com/plog/button-tag-in-IE

另一件事与使用滑动门技术进行样式设置有关：您需要插入另一个标签，例如<span>，以使其起作用。

- moey

Answer 10

就我而言，submit和button标签之间的区别在于：button标签允许您显示不同于元素值的文本。

假设您有一个产品列表，然后在每个产品旁边，您想要一个按钮将其添加到客户的购物车中：

product1 : <add to cart>
product2 : <add to cart>
product3 : <add to cart>

那么你可以这样做：

<button name="buy" type="submit" value="product2"> add to cart </button>

现在的问题是，IE将发送带有value="add to cart"而不是value="product2"的表单。

解决这个问题最简单的方法是添加onclick="this.value='product2'"

这样就可以解决：

<button name="buy" type="submit" value="product2" onclick="this.value='product2'"> add to cart </button>

这个方法在所有主流浏览器上都能奏效 - 我曾经在一个带有多个按钮的表单上使用过，并且在 Chrome、Firefox 和 IE 上都能正常工作。

- George Panic