<button> vs. <input type="button" />. Which to use?

Viewed 665332

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?
15 Answers
  • 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.

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"

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

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.

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

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.

<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

Although this is a very old question and might not be relevant anymore, please keep in mind that most of the problems that the <button> tag used to have don't exist anymore and therefore is highly advisable to use it.

In case you cannot do so for various reasons, just keep in mind to add the attribute role=”button” in your tag as of accessibility. This article is quite informative: https://www.deque.com/blog/accessible-aria-buttons/

Related