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

The best answers to the question “<button> vs. <input type="button" />. Which to use?” in the category Dev.

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:

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">)

Editmore 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"

ANSWER:

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

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:

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