64

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

建议的规则之一突出显示类型为 submit 的输入标签，并建议<button>用作更语义化的解决方案。<button>你遇到过的 with type submit（比如浏览器兼容性）有哪些优点或缺点？

为了清楚起见，我理解 的规范<button>，它有一个定义的开始和结束，它可以包含各种元素，而 input 是一个单线态，不能包含任何东西。我想知道的本质上是它是否坏了。我想知道当前按钮的可用性如何。不幸的是，下面的第一个答案似乎暗示除了表格之外的用途之外它已被破坏。

2015年编辑

风景变了！我现在有 6 年以上处理按钮的经验，并且浏览器已经从 IE6 和 IE7 转移了一些。因此，我将添加一个详细说明我发现的内容和建议的答案。

4

11 回答 11

49

使用时<button>总是指定类型，因为浏览器默认使用不同的类型。

这将在所有浏览器中始终如一地工作：

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

这样你就获得了所有<button>的好处，没有缺点。

于 2009-12-14T22:21:26.480 回答
17

从 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 同步。它使提交的值成为真正的值，并且只有一个按钮被提交。

于 2010-02-05T07:19:50.593 回答
13

你需要知道的一切：W3Schools<button>标签

所有主要浏览器都支持该标签。

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

于 2009-12-14T21:07:02.180 回答
10

优点：

  • 显示标签不必与提交的值相同。非常适合 i18n 和“删除此行”
  • 您可以包含标记，例如<em>和<img>

缺点：

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

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

IE7 有一个错误，当使用 Click me 提交表单时，发送的 POST 数据将导致 myButton=Click me 而不是 myButton=foo。IE6 有一个更严重的错误，即通过按钮提交表单将提交表单的所有按钮，与 IE7 存在相同的错误。此错误已在 IE8 中修复。

于 2010-02-05T07:39:08.243 回答
9

需要注意的一个重要怪癖：在包含<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属性。

于 2009-12-15T08:33:43.587 回答
5

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

  • 如果您仍然支持IE6或IE7，请非常小心按钮，这些浏览器的行为非常有问题，在某些情况下提交 innerHtml 而不是 value='whatever' 和所有按钮值而不是一个和不稳定的行为，例如那。因此，为了那些浏览器，彻底测试或避免。

  • 否则：如果您仍然支持IE8，<a href='http://example.com'><button></button></a>则效果不佳，并且可能在您将按钮嵌套在可点击元素内的任何其他地方。所以要注意这一点。

  • 否则：如果您<button>主要使用 a 作为元素来点击您的 javascript，并且它在表单之外，那么制作它<button type='button'>，您可能会没事的！

  • 否则：如果您<button>在表单中使用，请注意默认类型<button>实际上是<button type='submit'>在（大多数）情况下，因此请明确说明您的类型和您的value，例如：<button type='submit' value='1'>Search</button>。

请注意：使用像 Bootstrap 之类的按钮模拟类，.btn您可以只制作类似<div>甚至看起来完全符合您想要的方式的东西，并且在具有更有用的回退行为的情况<a>下。不错的选择。<button><a>

TLDR；如果您不关心古老的浏览器，可以使用，但 Bootstrap 提供了更强大的 css 视觉相似替代方案，值得研究。

于 2015-10-08T00:27:17.747 回答
4

Is it broken or not:

As usual, the answer is "it works fine in all major browsers, but has the following quirks in IE." I don't think it will be a problem for you though.

The <button> tag is supported by all the major browsers. The only support problem lies in what Internet Explorer will submit upon pressing a button.

The major browsers will submit the content of the value attribute. Internet exploter will submit the text between the <button> and </button> tags, while also submitting the value of every other one in the form, instead just the one you clicked.

For your purposes, just cleaning up old HTML, this shouldn't be a problem.

Sources:

  1. http://www.peterbe.com/plog/button-tag-in-IE
  2. http://www.w3schools.com/tags/default.asp
于 2009-12-14T22:10:01.843 回答
1

这是一个解释差异的网站： http ://www.javascriptkit.com/howto/button.shtml

基本上，输入标签只允许文本（尽管您可以使用背景图像），而按钮允许您添加图像、表格、div 和其他任何内容。此外，它不需要嵌套在表单标签中。

于 2009-12-14T21:09:12.333 回答
1

您可能还会遇到以下问题：

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

于 2011-09-18T00:40:40.973 回答
0

就我而言，提交和按钮标签之间的区别是：让您可以选择显示与元素值不同的文本

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

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 一起使用

于 2012-02-13T00:08:18.513 回答
-2

看起来使用的主要原因<button>是允许该按钮的 CSS 标记以及使用图像设置按钮样式的能力：（请参见此处：http ://www.javascriptkit.com/howto/button.shtml ）

但是，我认为我在 (X)HTML + CSS 中看到的更多采用的方法是使用 div 并使用图像和 :hover 伪类完全设置样式（模拟按钮按下......不能添加多个每个答案的链接，所以只需谷歌“div按钮”你会看到很多这样的例子），并使用javascript进行表单提交或AJAX调用......如果你不使用HTML表单，这也更有意义，并使用 AJAX 进行所有提交。

于 2009-12-14T21:12:40.923 回答