html - input type button onclick
<button> vs.<input type=“button”/>. Which to use? (10)
When looking at most sites (including SO), most of them use:
<input type="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?
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
<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.
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.
I will quote the article The Difference Between Anchors, Inputs and Buttons:
<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:
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
- buttons support the
disabledattribute. This makes it easy to turn them on and off.
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
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"
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>tags, while other browsers will submit the content of the value attribute. Use the input element to create buttons in an HTML form.
If I understand correctly, the answer is compatibility and input consistency from browser to browser
The short answer is that button behaves differently in IE6/7 versus other browsers, whereas input button behaves the same in all browsers.
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.
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.
- 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
- 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