What disadvantages are there to the <button> tag?

Question

I started using a diagnostic css stylesheet, e.g. http://snipplr.com/view/6770/css-diagnostics--highlight-deprecated-html-with-css--more/

One of the suggested rules

Answer 1

You might also run into these problems:

• jQuery cannot target the button (not jQuery's fault, though): <button> in IE7
• Multiple request variables if there are >1 <button>s: http://www.peterbe.com/plog/button-tag-in-IE

Another thing is related to styling it using the sliding-door technique: you need to insert another tag e.g. <span> to make it work.

Answer 2

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.

Answer 3

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.

Answer 4

Pros:

• The display label does not have to be the same as the submitted value. Great for i18n and "Delete this row"
• You can include markup such as <em> and <img>

Cons:

• Some versions of MSIE default to type="button" instead of type="submit" so you have to be explicit
• Some versions of MSIE will treat all <button>s as successful so you can't tell which one was clicked in a multi-submit button form
• Some versions of MSIE will submit the display text instead of the real value

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

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.

Answer 5

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