Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What disadvantages are there to the <button> tag?

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 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.

like image 591
Kzqai Avatar asked Dec 14 '09 20:12

Kzqai


People also ask

What is the tag for Button?

The <button> tag defines a clickable button.

Should I use button or a tag?

<a> vs <button> <a> tag: a is for "anchor", I use it when the button is a link to a content on the page or external content; <div> tag: this is a simple container. I use it when I have to do simple buttons without any specific job but really custom style(simple animation, transition, open modal, etc).

Why button is not clickable in HTML?

A disabled button is unusable and un-clickable. The disabled attribute can be set to keep a user from clicking on the button until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the disabled value, and make the button clickable again.

Does button tag have value?

The value attribute specifies the initial value for a <button> in an HTML form. Note: In a form, the button and its value is only submitted if the button itself was used to submit the form.


2 Answers

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.

like image 184
orip Avatar answered Nov 16 '22 00:11

orip


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.

like image 39
slolife Avatar answered Nov 16 '22 01:11

slolife