By Aron Rotteveel


2009-01-22 13:14:11 8 Comments

When looking at most sites (including SO), most of them use:

<input type="button" />

instead of:

<button></button>
  • What are the main differences between the two, if any?
  • Are there valid reasons to use one instead of the other?
  • Are there valid reasons to use combine them?
  • Does using <button> come with compatibility issues, seeing it is not very widely used?

14 comments

@Attilio 2014-11-08 14:31:26

I will quote the article The Difference Between Anchors, Inputs and Buttons:

Anchors (the <a> element) represent hyperlinks, resources a person can navigate to or download in a browser. If you want to allow your user to move to a new page or download a file, then use an anchor.

An input (<input>) represents a data field: so some user data you mean to send to server. There are several input types related to buttons:

  • <input type="submit">
  • <input type="image">
  • <input type="file">
  • <input type="reset">
  • <input type="button">

Each of them has a meaning, for example "file" is used to upload a file, "reset" clears a form, and "submit" sends the data to the server. Check W3 reference on MDN or on W3Schools.

The button (<button>) element is quite versatile:

  • you can nest elements within a button, such as images, paragraphs, or headers;
  • buttons can also contain ::before and ::after pseudo-elements;
  • buttons support the disabled attribute. This makes it easy to turn them on and off.

Again, check W3 reference for <button> tag on MDN or on W3Schools.

@Atheist 2015-02-23 14:47:09

I have noticed, that you can also give a <button>-element an href=""-attribute, and it will act as a <a>-tag.

@Roumelis George 2017-06-19 10:20:24

I just want to add something to the rest of the answers here. Input elements are considered empty or void elements (other empty elements are area , base , br , col , hr , img , input , link , meta , and param. You can also check here), meaning they cannot have any content. In addition to not having any content, empty elements cannot have any pseudo-elements like ::after and ::before, which I consider a major drawback.

@Travis J 2012-04-09 20:13:44

Just as a side note, <button> will implicitly submit, which can cause problems if you want to use a button in a form without it submitting. Thus, another reason to use <input type="button"> (or <button type="button">)

Edit - more details

Without a type, button implicitly receives type of submit. It does not matter how many submit buttons or inputs there are in the form, any one of them which is explicitly or implicitly typed as submit, when clicked, will submit the form.

There are 3 supported types for a button

submit ||  "submits the form when clicked (default)"
reset  ||  "resets the fields in the form when clicked"
button ||  "clickable, but without any event handler until one is assigned"

@Simon_Weaver 2012-12-28 03:46:47

can you add more details? what happens if there are multiple buttons? is it only type='submit' that does this?

@Bobby Jack 2013-11-14 14:35:44

I believe the first button typed as submit will be the one used for form submission. This is relevant when, for example, you're reacting to a specific button's event and the user hits ENTER in an INPUT.

@kbtz 2014-04-03 20:11:11

Oh dear W3C, why submit as default when 99.9% of the forms has a lot of button with one submit?!

@jinglesthula 2014-04-11 21:54:14

A lot of forms also only have one button, which is the submit. Had to make a call one way or t'other, I suppose.

@Sydwell 2015-06-02 12:13:19

This can be BIG gotcha! My test code submit about 80% of the time otherwise it was treated as a normal button. BECAREFUL when using <button> in a <form>

@Darragh Enright 2016-08-31 16:39:46

Now, that is an interesting - and tricksy - behaviour. Nicely explains the problem I was having. Thanks +1

@Concrete Gannet 2017-06-06 00:46:38

@mik01aj "It does not matter how many submit buttons or inputs there are in the form, any one of them which is explicitly or implicitly typed as submit, when clicked, will submit the form." Isn't this obvious? Any submit button should submit the form. Why say this? What am I missing?

@Stephen R 2019-03-01 18:50:46

@ConcreteGannet It's saying: Even if the form already has a Submit button (e.g. an input element, or button element, explicitly of type "submit"), any other buttons (i.e. button elements) are assumed to also be Submit buttons. Not redundant at all, though perhaps slightly ambiguous in its phrasing. And I'm on the side of those who believes this was a silly default for the W3C to have chosen.

@Elie-M 2020-01-24 14:48:29

This comment should be featured in the main page of stackoverflow. It's a life saver. Also dumb functionality

@Sergey Sklyar 2017-10-31 08:46:43

<button>
  • by default behaves like if it had a "type="submit" attribute
  • can be used without a form as well as in forms.
  • text or html content allowed
  • css pseudo elements allowed (like :before)
  • tag name is usually unique to a single form

vs.

<input type='button'>
  • type should be set to 'submit' to behave as a submitting element
  • can only be used in forms.
  • only text content allowed
  • no css pseudo elements
  • same tag name as most of the forms elements (inputs)

--
in modern browsers, both elements are easily styleable with css but in most cases, button element is preferred as you can style more with inner html and pseudo elements

@deadManN 2016-01-02 08:23:22

in addition, one of the differences can come from provider of the library, and what they code. for example here i'm using cordova platform in combination with mobile angular ui, and while input/div/etc tags work well with ng-click, the button can cause Visual Studio debugger to crash, surely by differences, that the programmer caused; note that MattC answer point to the same issue, the jQuery is just a lib, and the provider didn't think of some functionality on one element, that s/he provides on another. so when you are using a library, you may face an issue with one element, which you won't face with another. and simply the popular one like input, will mostly be the fixed one, just because it's more popular.

@Tamas Czinege 2009-01-22 13:20:02

  • Here's a page describing the differences (basically you can put html into a <button></button>)
  • And another page describing why people avoid <button></button> (Hint: IE6)

Another IE problem when using <button />:

And while we're talking about IE, it's got a couple of bugs related to the width of buttons. It'll mysteriously add extra padding when you're trying to add styles, meaning you have to add a tiny hack to get things under control.

@Rosdi Kasim 2013-02-26 11:06:54

This answer was in 2009, since IE6 is dead now I assume there is no reason not to use <button> now?

@Jared 2013-08-15 01:33:11

If they want to pirate , let them get a sucky version of your site. Drop IE6, drop IE7, unfortunately IE8 still needs support.

@BryanH 2014-01-18 23:33:14

According to Microsoft's IE6 Countdown page, China's IE6 usage is still clocking in (as of Jan 2014) at about 22%. ie6death.com notes that IE6 support is ending April 8, 2014.

@landed 2014-03-12 14:28:58

Always lagging with whatever ie is currently using ! A lot of corporations still using ie6 due to slow rollout of OS.

@jinglesthula 2014-04-11 21:48:20

As many have quipped, users still on old versions of IE are likely used to the internet looking horribly broken.

@jinglesthula 2014-04-11 21:51:56

Another noted difference is that the button element is slightly more semantic than using an input element (at least in that you don't have to start scanning the unordered set of attributes looking for 'type' to see that it's not one of the other form controls, though you'd still need to do so to differentiate type=button|submit).

@Snekse 2014-09-23 14:09:46

One reason to use input type=button is because the input has a form property. Useful if you have multiple forms on the page and need to dynamically alter the form when the button is clicked.

@Gup3rSuR4c 2014-10-07 23:29:05

<button /> also has a form attribute (and related attributes) so it can be linked to forms in other parts of the document body.

@Triynko 2015-11-30 06:04:55

Button type=submit with a name and value will not submit the name and value at all in Firefox, whereas it will in Chrome. This is a horrible, cross-browser incompatibility that makes using button impossible.

@Mr Lister 2018-01-05 13:59:30

@Gup3rSuR4c So does <input />. There is no difference in functionality.

@MattC 2015-12-21 17:12:30

There is a big difference if you are using jQuery. jQuery is aware of more events on inputs than it does on buttons. On buttons, jQuery is only aware of 'click' events. On inputs, jQuery is aware of 'click', 'focus', and 'blur' events.

You could always bind events to your buttons as needed, but just be aware that the events that jQuery automatically is aware of are different. For example, if you created a function that was executed whenever there was a 'focusin' event on your page, an input would trigger the function but a button would not.

@KjetilNordin 2016-04-04 11:31:48

Out of curiousity, when would I ever need to use focus and blur events on a button type element? I understand how it can be done, I just don't get why. I can't find a single intuitive reason for that.It wuold be fun to se an example of a plausible use :)

@MattC 2016-05-02 18:08:23

re: KjetilNordin - We had an application that was aware of any focusin events on a page, and one occurred, an action took place. So if using an input, you could watch all of the elements for a single event. Not saying you should, but you could. The risk is that someone changes the input to a button, and then the focusin does not occur, and then your action does not occur, and then your app goes boom. That's what happened to us. :)

@albert 2017-05-16 17:14:13

use focus events when an element is currently targeted via mouse/keyboard. they show the user where they are in the document.

@jnowland 2015-07-30 04:33:46

As far as CSS styling is concerned the <button type="submit" class="Btn">Example</button> is better as it gives you the ability to use CSS :before and :after pseudo classes which can help.

Due to the <input type="button"> visually rendering different to an <a> or <span> when styled with classes in certain situations I avoid them.

It's very worth noting the current top answer was written in 2009. IE6 isn't a concern now days so <button type="submit">Wins</button> styling consistency in my eyes comes out on top.

@Santhosh 2012-03-28 04:27:58

Inside a <button> element you can put content, like text or images.

<button type="button">Click Me!</button> 

This is the difference between this element and buttons created with the <input> element.

@Sebastian 2014-05-03 16:33:33

+1, since <input /> is indeed a void element, whilst <button> is not

@Tebe 2015-03-26 11:05:58

use value attribute for input button type?

@mbomb007 2017-10-31 18:56:16

@ГляОпаОпа The value attribute cannot contain non-text.

@Tebe 2017-10-31 19:33:52

no wonder. It would be a mess to mix other html tags inside value attribute . If you meant this. Just use suitable element depending on your needs. Inserting img inside button tag sounds strange for me btw

@Moh S. 2014-06-27 22:51:11

<button> is flexible in that it can contain HTML. Moreover, it is much easier to style using CSS, and the styling actually gets applied across all browsers. However, there are some drawbacks regarding Internet Explorer (Eww! IE!). Internet Explorer does not detect the value attribute properly, using the tag's content as the value. All of the values in a form are sent to the server-side, regardless of whether or not the button is clicked. This makes using it as a <button type="submit"> tricky and a pain.

<input type="submit"> on the other hand doesn't have any value or detection issues, but you can't, however, add HTML like you can with <button>. It's also harder to style, and the styling doesn't always respond well across all browsers. Hope this helped.

@Noldorin 2009-01-22 13:19:04

This article seems to offer a pretty good overview of the difference.

From the page:

Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to “image”, but the BUTTON element type allows content.

The Button Element - W3C

@nickomarsa 2011-03-01 08:17:00

Use button from input element if you want to create button in a form. And use button tag if you want to create button for an action.

@Caltor 2012-02-20 13:23:11

Why should you use a button tag outside of a form?

@iGEL 2012-03-03 13:40:29

For client side scripting. <input type="button"> has no function in HTML.

@Roy Tinker 2015-09-16 00:31:25

@iGEL - neither does <button type="button">

@user54579 2009-01-22 13:18:19

Quote

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.

From : http://www.w3schools.com/tags/tag_button.asp

If I understand correctly, the answer is compatibility and input consistency from browser to browser

@Mr Lister 2012-04-16 09:36:40

@Hawken That page was written by idiots who thought W3Schools pretended to be W3C. In reality, W3Schools is no better or worse than thousands of other sites that handle this kind of material.

@Damien 2012-05-03 13:53:47

actually, it depends on the version of IE and the IE mode - w3schools updated the info since the quote

@Marnen Laibow-Koser 2012-12-25 04:06:38

@MrLister I've talked to people who think W3Schools is associated with the W3C. While I'm not sure I agree with W3Fools' "responsibility to provide accurate information", I do think W3Schools' accuracy leaves something to be desired, and that its critics are not necessarily idiots. (I learned a lot from W3S, back when it was good; it hasn't kept pace with the standards.)

@Mr Lister 2012-12-25 07:19:16

@MarnenLaibow-Koser I do agree it's not good that people think W3Schools is associated with the W3C, and I know W3Schools is not a good site to try to learn from, and, if anything, its accuracy is getting worse. But as I said, other sites have the same problems - even the ones that claim to be professional quality sites, written by professionals etc - and there's no reason to single out W3Schools for that kind of attacks (especially if they get details wrong themselves).

@Marnen Laibow-Koser 2012-12-25 16:53:18

@MrLister W3Schools is easily the most used unofficial source for Web tech information. And the quality really sucks. Why not single them out? And what details did W3Fools get wrong? Everything there looks correct to me.

@entonio 2013-12-09 18:25:14

And to the point, W3S's name does make it look like it is affiliated with W3C, when it's not. That alone is grounds for objection, even if the content were always accurate. Of course, that said, most of us did learn things from W3S. It's not bashing, it's a needed caveat.

@Mark Amery 2014-03-16 15:14:38

The quote here is highly unclear. 'will submit' under what circumstances? When the button is pressed? When the form is submitted? And do they mean as the value for that particular button when the whole form is URL-encoded, or do they mean as the entirety of the query string or post data submitted with the request? Also, how does using an input element change the behaviour? And does the recommendation of using an input apply to all buttons, or have an exception for submit buttons? It's totally unclear what anything in the quoted passage means.

@Roy Tinker 2015-09-16 00:30:12

@MrLister: not idiots, these are smart industry leaders (check out the list of signers at the bottom) including @[kangax], @[paul_irish], and others. Also, the fact that its name starts with "W3" is only one of many concerns they had.

@Mr Lister 2015-09-16 06:47:36

@RoyTinker That site has changed a lot since 2012, when I posted my comment.

@gimel 2009-01-22 13:19:21

Quoting the Forms Page in the HTML manual:

Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to "image", but the BUTTON element type allows content.

Related Questions

Sponsored Content

73 Answered Questions

[SOLVED] How do you disable browser Autocomplete on web form field / input tag?

6 Answered Questions

[SOLVED] What does "for" attribute do in HTML <label> tag?

36 Answered Questions

18 Answered Questions

[SOLVED] Disable/enable an input with jQuery?

41 Answered Questions

[SOLVED] Styling an input type="file" button

  • 2009-02-21 10:36:49
  • Shivanand
  • 941793 View
  • 691 Score
  • 41 Answer
  • Tags:   html css file-io

27 Answered Questions

[SOLVED] Trigger a button click with JavaScript on the Enter key in a text box

30 Answered Questions

[SOLVED] How to create an HTML button that acts like a link?

54 Answered Questions

Sponsored Content