What disadvantages are there to the <button> tag?

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.


Everything you need to know: W3Schools <button> Tag

The tag is supported in all major browsers.

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.


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.