Is there a case where <button> is the best tag to use?


That’s a bit of a short question Mark, an “?” are you a spambot?

For those whom did get the question posed: Is there a case where <button> is the best tag to use?

It depends upon what you are wanting it for but they have more scope. The BUTTON also allows emphasis unlike submit and has richer rendering but the BUTTON element type allows other content (not just IMG) assuming the image doesn’t load the ‘alt’ attribute would be displayed as text for the button. Technically if the text does go over two lines then the BUTTON is used.

Really BUTTON was created for containing richer content not just wrapping text or using an IMG whereas INPUT cannot contain content as it is EMPTY. Does that help any?

If the button has more flexibility, why use an <input type=“submit”> ?

Another question, why doesn’t anyone use the <button> element?

It’s more compatible with browsers.

Another question, why doesn’t anyone use the <button> element?

Some do. I actually use it on my web forms. However, some older browsers don’t quite know how to handle it and don’t pass the value of it it in a POST request back to the server. IE6 is especially notorious for this.

Here’s a couple of posts that go more in depth:

Interesting, thanks gents.

Maybe now that IE6 is dead more people will start using <button>, but then again if <input type=“submit”> is sufficient there’s no reason to change.

Correct me if I’m wrong but the html button isn’t just for forms? If I had a button on a page that if the user clicked it, it would open a popup layer with additional content. The html button tag would be the correct use and semantic markup correct?. I don’t think a link tag is appropriate, what do you think?

I don’t really see button used that way much and don’t know why. I see a like with either # or javascript:void(0) in the href and that just seems wrong.

What makes you think no-one uses <button>?. I use it all the time except for a submit button in a form.

I tried looking at a few popular sites and between google, facebook and yahoo’s home page I found 1 html button being use outside forms. Everyone else uses a span with the attr role=button.

Not all input elements need to be submitted back to the server, so they don’t always need to be inside a form element. You could still use either the button or the input element if you just wanted a stand-alone button to use for a javascript function.

I don’t know how many developers use <button> but the point I was making is that it is not no-one as markbrown4 was implying.

For me it’s a question of semantics. If I need a button (apart from a form submit button) to provide some sort of functionality/enhancement then I use the button element. Sure, there are other options to create a button but to me they are not as correct semantically as using the button element.

That’s a bit of a short question Mark, an “?” are you a spambot?

:slight_smile: A mentor spam bot :slight_smile:

I’ve used <button> several times. I’ve also used <input> as well. I did find a problem with <button> in that it creating a different action for the button whilst pressed, it somewhat shifted the button a little, which in many cases was undesired. I did manage to fix this somehow by removing the margins and paddings, but was still a little puzzling at the time.

Personally I don’t think it’s a big deal in using button or input. I did happen to use <button> for buttons outside the form element also. It does look much better, however <a href=“#” class=“button”>Button</a> in many cases would do exactly the same thing, so in many cases I use an a tag.

I’ve just changed most of my inputs to buttons recently, after realizing that all new browsers, and most recently old browsers, all send the value of the button (some used to send textNode I think), so unlike an input type submit it can have a different textNode and value.
They are better than input type images too, when used as buttons, as you do not have to loop through all the possible input type images to get a possible x or y value.

How awful. Sad to see that kind of crap on major websites. Like Amazon’s famous <i role=“checkbox”></i>. Arg. Incompetent boobs.

When deciding what element to use for something, keep in mind how that element is and can be activated by default. Elements with a role of “button” (which HTML inputs type=radio,submit,button, etc have by default) can be activated with the spacebar as well as the enter key. Anchors don’t get activated by spacebars unless you hijax that in.