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

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.

Answer 2

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.

Answer 3

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

Answer 4

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.

Answer 5

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.

Answer 6

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.