One of the suggested rules highlights input tags with the type submit, with the recommendation to use <button> as a more semantic solution. What are the advantages or disadvantages of <button> with type submit (such as with browser compatibility) that you have run across?
Just to be clear, I understand the spec of <button>, it has a defined start and end, it can contain various elements, whereas input is a singlet and can't contain stuff. What I want to know essentially is whether it's broken or not. I'd like to know how usable button is at the current time. The first answer below does seem to imply that it is broken for uses except outside of forms, unfortunately.
Edit for 2015
The landscape has changed! I have 6 more years experience of dealing with button now, and browsers have somewhat moved on from IE6 and IE7. So I'll add an answer that details what I found out and what I suggest.
I was excited when I found this question and some code for a ModernButton control, which, in the end, is a <button> control.
So I started adding all sorts of these buttons, decorated with <img /> tags inside of them to make them stand out. And it all worked great... in Firefox, and Chrome.
Then I tried IE6 and got the "a potentially dangerous Request.Form value was detected", because IE6 submits the html inside of the button, which, in my case, has html tags in it. I don't want to disable the validateRequest flag, because I like this added bit of data validation.
So then I wrote some javascript to disable that button before the submit occurred. Worked great in a test page, with one button, but when I tried it out on a real page, that had other <button> tags, it blew up again. Because IE6 submits ALL of the buttons' html. So now I have all sorts of code to disable buttons before submit.
Same problems with IE7. IE8 thankfully has this fixed.
Yikes. I'd recommend not going down this road IF you are using ASP.NET.
Update:
I found a library out there that looks promising to fix this.
It might work out just fine. The IE8.js brings IE5-7 up to speed with IE8 with the button tag. It makes the submitted value the real value and only one button gets submitted.
Important: If you use the button element in an HTML form, different browsers will submit different values. Internet Explorer will submit the text between the <button> and </button> tags, while other browsers will submit the content of the value attribute. Use the input element to create buttons in an HTML form.
IE7 has a bug where when submitting a form with Click me, the POST data sent will result in myButton=Click me instead of myButton=foo.
IE6 has an even worse bug where submitting a form through a button will submit ALL buttons of the form, with the same bug as IE7.
This bug has been fixed in IE8.
An important quirk to be aware of: In a form that contains a <button/> element, IE6 and IE7 will not submit the form when the <button/> element is clicked. Other browsers, on the other hand, will submit the form.
In contrast, no browsers will submit the form when <input type="button"/> or <button type="button"/> elements are clicked. And naturally, all browsers will submit the form when <input type="submit"/> or <button type="submit"/> elements are clicked.
As @orip's answer says, to get consistent submit behavior across browsers, always use <button type="button" /> or <button type="submit" /> inside a <form/> element. Never leave out the type attribute.
I've had some experience with the quirks of <button> now, 6 years later, so here are my suggestions:
If you're still supporting IE6 or IE7, be very careful with button, the behavior is very buggy with those browsers, in some cases submitting the innerHtml instead of value='whatever' and all button values instead of just one and wonky behavior like that. So test thoroughly or avoid for those browser's sake.
Otherwise: If you're still supporting IE8, <a href='http://example.com'><button></button></a> doesn't work well, and probably anything else where you nest a button inside a clickable element. So watch out for that.
Otherwise: If you're using a <button> mainly as an element to click for your javascript, and it's outside of a form, make it <button type='button'> and you'll probably be just fine!
Otherwise: If you're using <button> in a form, be wary that the default type of <button> is actually <button type='submit'> in (most) cases, so be explicit with your type and your value, like: <button type='submit' value='1'>Search</button>.
Note that: Using a button-mimic class, like Bootstrap's .btn allows you to just make things like <div> or <a> or even <button> look exactly the way you want it to, and in the case of <a> have a more useful fallback behavior. Not a bad option.
TLDR; Ok to use if you don't care about ancient browsers, but Bootstrap provides even more robust css visually similar alternatives worth looking into.
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.
Basically, the input tag allows just text (although you can use a background image) while the button allows you to add images, tables, divs and whatever else. Also, it doesn't require it to be nested within a form tag.
as far as I am concerned the difference between submit and button tags is this:
gives you the option to have different text displayed than the element's value
Let's say you have a list of products then next to each product you want a button to add it to the customer's cart:
product1 : <add to cart>
product2 : <add to cart>
product3 : <add to cart>
then you could do this:
<button name="buy" type="submit" value="product2"> add to cart </button>
Now the problem is that IE will send the form with value="add to cart" instead of value="product2"
The easiest way to workaroound this issue is by adding onclick="this.value='product2'"
So this:
<button name="buy" type="submit" value="product2" onclick="this.value='product2'"> add to cart </button>
will do the trick on all major browsers - I have actually used this on a form with multiple buttons and works with Chrome Firefox and IE
但是，我认为我更采用的方法在 (X)HTML + CSS 中看到的是使用 div 并完全使用图像和 :hover 伪类对其进行样式设置（模拟按钮按下...无法为每个答案添加多个链接，因此只需 google“div 按钮”您会看到很多这样的示例），并使用 javascript 进行表单提交或 AJAX 调用...如果您不使用 HTML 表单并使用 AJAX 进行所有提交，这也更有意义。
Looks like the main reason to use <button> is to allow for CSS markup of that button and the ability to style the button with images: (see here: http://www.javascriptkit.com/howto/button.shtml)
However, I think the more adopted approach I've seen in (X)HTML + CSS is to use a div and style it completely with images and :hover pseudo-classes (simulating button downpress... can't add more than one link per answer, so just google "div button" you'll see lots of examples of this), and using javascript to do form submission or AJAX call... this also makes even more sense if you don't use HTML forms, and do all submissions with AJAX.
发布评论
评论（11）
使用
这将在所有浏览器中一致地工作：
这样您就可以获得
When using
<button>always specify the type, since browsers default to different types.This will work consistently across all browser:
<button type="submit">...</button><button type="button">...</button>This way you gain all of
<button>'s goodness, no downsides.从ASP.NET的角度回答。
当我发现这个问题时，我很兴奋以及 ModernButton 控件的一些代码，它最终是一个
因此，我开始添加各种此类按钮，并在其中添加
![]()
然后我尝试了 IE6 并得到了“检测到潜在危险的 Request.Form 值”，因为 IE6 提交了按钮内部的 html，在我的例子中，其中有 html 标签。我不想禁用 validateRequest 标志，因为我喜欢添加数据验证位。
然后我编写了一些 JavaScript 来在提交发生之前禁用该按钮。在带有一个按钮的测试页面中效果很好，但是当我在具有其他
IE7也有同样的问题。幸运的是 IE8 已经修复了这个问题。
哎呀。如果您使用的是 ASP.NET，我建议您不要走这条路。
更新：
我发现一个库看起来有望解决这个问题。
如果您使用此库中的 ie8.js 脚本： http://code.google.com/p/ie7-js/
可能效果很好。 IE8.js 通过按钮标签使 IE5-7 与 IE8 保持同步。它使提交的值成为真实值，并且只有一个按钮被提交。
Answering from an ASP.NET perspective.
I was excited when I found this question and some code for a ModernButton control, which, in the end, is a
<button>control.So I started adding all sorts of these buttons, decorated with
<img />tags inside of them to make them stand out. And it all worked great... in Firefox, and Chrome.Then I tried IE6 and got the "a potentially dangerous Request.Form value was detected", because IE6 submits the html inside of the button, which, in my case, has html tags in it. I don't want to disable the validateRequest flag, because I like this added bit of data validation.
So then I wrote some javascript to disable that button before the submit occurred. Worked great in a test page, with one button, but when I tried it out on a real page, that had other
<button>tags, it blew up again. Because IE6 submits ALL of the buttons' html. So now I have all sorts of code to disable buttons before submit.Same problems with IE7. IE8 thankfully has this fixed.
Yikes. I'd recommend not going down this road IF you are using ASP.NET.
Update:
I found a library out there that looks promising to fix this.
If you use the ie8.js script from this library: http://code.google.com/p/ie7-js/
It might work out just fine. The IE8.js brings IE5-7 up to speed with IE8 with the button tag. It makes the submitted value the real value and only one button gets submitted.
您需要了解的一切：W3Schools
Everything you need to know: W3Schools
<button>Tag优点：
和![]()
缺点：
类型="button"而不是type="submit"所以你必须明确来自 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button：
Pros:
<em>and<img>Cons:
type="button"instead oftype="submit"so you have to be explicit<button>s as successful so you can't tell which one was clicked in a multi-submit button formFrom https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button:
需要注意的一个重要问题是：在包含
相反，当单击
或正如 @orip 的回答所说，为了在浏览器之间获得一致的提交行为，请始终使用
An important quirk to be aware of: In a form that contains a
<button/>element, IE6 and IE7 will not submit the form when the<button/>element is clicked. Other browsers, on the other hand, will submit the form.In contrast, no browsers will submit the form when
<input type="button"/>or<button type="button"/>elements are clicked. And naturally, all browsers will submit the form when<input type="submit"/>or<button type="submit"/>elements are clicked.As @orip's answer says, to get consistent submit behavior across browsers, always use
<button type="button" />or<button type="submit" />inside a<form/>element. Never leave out thetypeattribute.6 年后的今天，我对
如果您仍然支持 < em>IE6 或 IE7，对按钮要非常小心，这些浏览器的行为有很多错误，在某些情况下提交innerHtml而不是value='whatever'并提交所有按钮值只有这样一种奇怪的行为。因此，请彻底测试或避免使用这些浏览器。
否则：如果您仍支持 IE8，
< /a>效果不佳，可能还有其他将按钮嵌套在可点击元素内的情况。因此请注意这一点。否则：如果您主要使用
否则：如果您在表单中使用
。请注意：使用按钮模拟类（例如 Bootstrap 的
.btn）允许您制作诸如或之类的东西> 甚至太长了；如果您不关心古老的浏览器，可以使用，但 Bootstrap 提供了更强大的 css 视觉上相似的替代方案，值得研究。
I've had some experience with the quirks of
<button>now, 6 years later, so here are my suggestions:If you're still supporting IE6 or IE7, be very careful with button, the behavior is very buggy with those browsers, in some cases submitting the innerHtml instead of value='whatever' and all button values instead of just one and wonky behavior like that. So test thoroughly or avoid for those browser's sake.
Otherwise: If you're still supporting IE8,
<a href='http://example.com'><button></button></a>doesn't work well, and probably anything else where you nest a button inside a clickable element. So watch out for that.Otherwise: If you're using a
<button>mainly as an element to click for your javascript, and it's outside of a form, make it<button type='button'>and you'll probably be just fine!Otherwise: If you're using
<button>in a form, be wary that the default type of<button>is actually<button type='submit'>in (most) cases, so be explicit with your type and yourvalue, like:<button type='submit' value='1'>Search</button>.Note that: Using a button-mimic class, like Bootstrap's
.btnallows you to just make things like<div>or<a>or even<button>look exactly the way you want it to, and in the case of<a>have a more useful fallback behavior. Not a bad option.TLDR; Ok to use if you don't care about ancient browsers, but Bootstrap provides even more robust css visually similar alternatives worth looking into.
它是否损坏：
像往常一样，答案是“它在所有主要浏览器中都工作正常，但在 IE 中存在以下怪癖。”我不认为它是这样但对你来说将是一个问题。
所有主流浏览器都支持
主流浏览器都会提交value属性的内容。 Internet exploter 将提交
标记之间的文本，同时还提交表单中其他每个标记的值，而不仅仅是您点击的一个。出于您的目的，只需清理旧的 HTML，这应该不是问题。
来源：
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:
这是一个解释这些差异的网站：
http://www.javascriptkit.com/howto/button.shtml
基本上，输入标签仅允许文本（尽管您可以使用背景图像），而按钮允许您添加图像、表格、div 和其他任何内容。此外，它不要求将其嵌套在表单标记中。
Here's a site that explains the differences:
http://www.javascriptkit.com/howto/button.shtml
Basically, the input tag allows just text (although you can use a background image) while the button allows you to add images, tables, divs and whatever else. Also, it doesn't require it to be nested within a form tag.
您可能还会遇到这些问题：
另一件事与使用 滑动门技术：您需要插入另一个标签，例如
才能使其工作。You might also run into these problems:
<button>s: http://www.peterbe.com/plog/button-tag-in-IEAnother thing is related to styling it using the sliding-door technique: you need to insert another tag e.g.
<span>to make it work.就我而言，提交标签和按钮标签之间的区别是：
为您提供显示与元素值不同的文本的选项
假设您有一个产品列表，然后在每个产品旁边您想要一个按钮将其添加到客户的购物车：
那么您可以这样做：
现在的问题是 IE将发送带有 value="add to cart" 而不是 value="product2" 的表单
解决此问题的最简单方法是添加 onclick="this.value='product2'"
所以这：
将在所有主要浏览器 - 我实际上在带有多个按钮的表单上使用了它，并且可以与 Chrome Firefox 和 IE 一起使用
as far as I am concerned the difference between submit and button tags is this:
gives you the option to have different text displayed than the element's value
Let's say you have a list of products then next to each product you want a button to add it to the customer's cart:
then you could do this:
Now the problem is that IE will send the form with value="add to cart" instead of value="product2"
The easiest way to workaroound this issue is by adding onclick="this.value='product2'"
So this:
will do the trick on all major browsers - I have actually used this on a form with multiple buttons and works with Chrome Firefox and IE
看起来使用
但是，我认为我更采用的方法在 (X)HTML + CSS 中看到的是使用 div 并完全使用图像和 :hover 伪类对其进行样式设置（模拟按钮按下...无法为每个答案添加多个链接，因此只需 google“div 按钮”您会看到很多这样的示例），并使用 javascript 进行表单提交或 AJAX 调用...如果您不使用 HTML 表单并使用 AJAX 进行所有提交，这也更有意义。
Looks like the main reason to use
<button>is to allow for CSS markup of that button and the ability to style the button with images: (see here: http://www.javascriptkit.com/howto/button.shtml)However, I think the more adopted approach I've seen in (X)HTML + CSS is to use a div and style it completely with images and :hover pseudo-classes (simulating button downpress... can't add more than one link per answer, so just google "div button" you'll see lots of examples of this), and using javascript to do form submission or AJAX call... this also makes even more sense if you don't use HTML forms, and do all submissions with AJAX.