<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

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

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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

Answer 6

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.