<button> vs. <input type=“button” />.

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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.

Answer 6

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"