input type="submit" Vs button tag are they interchangeable?

Question

input type="submit" and button tag are they interchangeable? or if there is any difference then When to use input type="submit" and when button ?

And if there is no difference then why we have 2 tags for same purpose?

Avoid a _funny_ day while using `button` and the `value` attribute in some version of IE, `input` will just send what you expected, some version of IE doesn't play well with `button`s. — Rubens Mariuzzo, Feb 02 '13 at 14:36
The answers are basically the same as for `input type="button"` vs `button type=button`: http://stackoverflow.com/questions/469059/button-vs-input-type-button-which-to-use — Ciro Santilli OurBigBook.com, Sep 26 '14 at 14:26

score 177 · Answer 1 · edited Dec 07 '17 at 12:52

177

http://www.w3.org/TR/html4/interact/forms.html#h-17.5

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.

So for functionality only they're interchangeable!

(Don't forget, type="submit" is the default with button, so leave it off!)

edited Dec 07 '17 at 12:52

Thomas Grainger

2,271
27
34

answered Aug 19 '11 at 06:16

MatTheCat

18,071
6
54
69

8

Just beware, IE6 submits the values of all buttons on the page, which makes it difficult to determine exactly which button was clicked. Explanation: http://www.vancelucas.com/blog/ie6-and-multiple-button-submit-elements/ – Sam Mar 13 '13 at 20:29
10

Just FYI you don't _have_ to use `type="submit"` with button, as the default for `type` is `submit`. – sync Feb 04 '15 at 23:06
14

That's what W3C says but I'm pretty sure I've seen cases where `type` default was `button`. I prefer to explicit each attribute to avoid any browser inconsistency. – MatTheCat Feb 05 '15 at 09:14
According to your ref `type="submit"` seems to be default, so I dont think you need to specify it, right? – Adam May 12 '16 at 09:58
5

according to reference yes. but not all browsers stick to reference specs,right ? – EKanadily Aug 01 '16 at 09:14
This seems like a design flaw. HTML is supposed to be all about "semantics", not "presentation", yet the only difference between `` and `` is literally the presentation. – chharvey Feb 26 '18 at 05:27
3

@chharvey, no the former may have child nodes; i.e. non-text content. I suppose you could say that aside from brevity is no reason for the latter to exist. – Paul Draper Mar 10 '18 at 17:47
regarding specifying the `type=submit` of a `button`, [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit) it says: > If you choose to use – Eftychia Thomaidou Aug 15 '22 at 09:46

score 82 · Answer 2 · edited Oct 29 '22 at 22:40

82

The <input type="button" /> is just a button and won't do anything by itself. The <input type="submit" />, when inside a form element, will submit the form when clicked.

Another useful 'special' button is the <input type="reset" /> that will clear the form.

edited Oct 29 '22 at 22:40

daCoda

3,583
5
33
38

answered Aug 19 '11 at 06:16

theprogrammer

2,724
1
18
13

22

The question is about the button tag not – Caltor Jan 20 '17 at 00:15
13

The question is about `` and ` – Peyman Mohamadpour Mar 09 '17 at 18:42

user1429980 · Answer 3 · 2021-07-28T20:13:47.170

Although both elements deliver functionally the same result *, I strongly recommend you use <button>:

Far more explicit and readable. input suggests that the control is editable, or can be edited by the user; button is far more explicit in terms of the purpose it serves
Easier to style in CSS; as mentioned above, FIrefox and IE have quirks in which input[type="submit"] do not display correctly in some cases
Predictable requests: IE has verying behaviours when values are submitted in the POST/GET request to the server
Markup-friendly; you can nest items, for example, icons, inside the button.
HTML5, forward-thinking; as developers, it is our responsibility to adopt to the new spec once it is officialized. HTML5, as of right now, has been official for over one year now, and has been shown in many cases to boost SEO.

* _{With the exception of <button type="button"> which by default has no specified behaviour.}

In summary, I highly discourage use of <input type="submit"/>.

Thank you. I was looking for this, especially for the HTML5 semantic point. In 2020, we have to think beyond pure functionality. — pierre_loic, Jun 10 '20 at 16:43

score 51 · Answer 4 · answered Sep 14 '13 at 15:58

51

Use <button> tag instead of <input type="button"..>. It is the advised practice in bootstrap 3.

http://getbootstrap.com/css/#buttons-tags

"Cross-browser rendering

As a best practice, we highly recommend using the <button> element whenever possible to ensure matching cross-browser rendering.

Among other things, there's a Firefox bug that prevents us from setting the line-height of <input>-based buttons, causing them to not exactly match the height of other buttons on Firefox."

answered Sep 14 '13 at 15:58

rolfk

786
9
16

5

+1 for this. ``button`` is far more explicit, and comes along with ``aria`` accessibility features, and is far easier to style. It is also forward-thinking, as it is HTML5. – user1429980 Nov 12 '15 at 01:39

score 33 · Answer 5 · answered Aug 19 '11 at 06:17

33

<input type='submit' /> doesn't support HTML inside of it, since it's a single self-closing tag. <button>, on the other hand, supports HTML, images, etc. inside because it's a tag pair: <button><img src='myimage.gif' /></button>. <button> is also more flexible when it comes to CSS styling.

The disadvantage of <button> is that it's not fully supported by older browsers. IE6/7, for example, don't display it correctly.

Unless you have some specific reason, it's probably best to stick to <input type='submit' />.

answered Aug 19 '11 at 06:17

Jared Ng

4,891
2
19
18

1

The answer was from 2 years ago. Also, it's very much possible to specify alternate button text: `` – Jared Ng Aug 22 '13 at 13:59
I'm aware comment was from 2 years ago - that's why giving answers like "Unless you have some specific reason, it's probably best to stick to x" based on the current state of technology should be avoided. But point taken re: specifying alternate button text. – mikemaccana Aug 22 '13 at 14:01
2

@nailer You're perfectly entitled to your opinion, but any answer is going to inevitably reference the current state of technology. Maybe HTML 6 will deprecate ` – Jared Ng Aug 22 '13 at 14:23
1

At the time the answer was written, IE6/7 were already out of date. A new web developer reading your post, without checking your supporting arguments and realizing they don't apply anymore, would think there is good reason not to use 'button' elements. – mikemaccana Aug 22 '13 at 17:28
2

@nailer There's no universal "out of date" browsers list that is adhered to by everyone. Different workplaces have different requirements for supported browsers. Just because your standard of "supported browsers" in 2011 didn't include IE6/7 doesn't mean that's the case everywhere. – Jared Ng Aug 22 '13 at 17:42
1

I'm aware there's no universal "out of date" browsers list - hence not every mentioning such a thing. All I'm saying is that this could be better worded as "IE6/7 don't support display button correctly. If that's a concern, stick to input" I.e., you know browsers will change, account for it. This stops StackOverflow becoming paused forever at IE6 workarounds. – mikemaccana Aug 22 '13 at 17:55
We can use `html` **with button type submit inside the form** , check [this](http://stackoverflow.com/a/3543649/2218697) , hope helps. – Shaiju T Nov 19 '16 at 09:46

score 17 · Answer 6 · answered Mar 14 '14 at 17:29

17

I realize this is an old question but I found this on mozilla.org and think it applies.

A button can be of three types: submit, reset, or button. A click on a submit button sends the form's data to the web page defined by the action attribute of the element.

A click on a reset button resets all the form widgets to their default value immediately. From a UX point of view, this is considered bad practice.

A click on a button button does... nothing! That sounds silly, but it's amazingly useful to build custom buttons with JavaScript.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form#And_a_<button>_to_finish

answered Mar 14 '14 at 17:29

Jere.me

291
3
14

How is it useful if it does nothing? – mfaani Jul 10 '17 at 22:28
4

Because you can then hook handlers to the click event via Javascript – fonso Aug 31 '17 at 12:06
@Honey for example you can code a ` – chharvey Feb 26 '18 at 05:30

score 14 · Answer 7 · edited Aug 21 '14 at 18:55

14

<button> is newer than <input type="submit">, is more semantic, easy to stylize and support HTML inside of it.

edited Aug 21 '14 at 18:55

Leniel Maccaferri

100,159
46
371
480

answered Aug 19 '11 at 14:45

Acaz Souza

8,311
11
54
97

score 11 · Answer 8 · edited May 23 '17 at 12:10

11

While the other answers are great and answer the question there is one thing to consider when using input type="submit" and button. With an input type="submit" you cannot use a CSS pseudo element on the input but you can for a button!

This is one reason to use a button element over an input when it comes to styling.

edited May 23 '17 at 12:10

Community

1
1

answered Dec 28 '14 at 03:26

L84

45,514
58
177
257

score 5 · Answer 9 · answered Feb 20 '17 at 15:04

5

I don't know if this is a bug or a feature, but there is very important (for some cases at least) difference I found: <input type="submit"> creates key value pair in your request and <button type="submit"> doesn't. Tested in Chrome and Safari.

So when you have multiple submit buttons in your form and want to know which one was clicked - do not use button, use input type="submit" instead.

answered Feb 20 '17 at 15:04

Ivan Yarych

1,931
17
15

from my expirience its absolutely other way around, button passes $_POST["submit_name"] and input does NOT. tested on chrome. Firefox sends $_POST["submit_name"] allways. – Gall Annonim May 18 '17 at 12:23
@GallAnnonim maybe that depends on document type. Because I definitely use input type=submit and it works on chrome – Ivan Yarych May 19 '17 at 12:13
intresting... I used using lang "pl" && encoding utf-8 if makes it any diffrence. chrome is 58.0.3029.96 – Gall Annonim May 19 '17 at 17:24

DarylChymko · Answer 10 · 2011-08-19T06:22:04.910

-2

If you are talking about <input type=button>, it won't automatically submit the form

if you are talking about the <button> tag, that's newer and doesn't automatically submit in all browsers.

Bottom line, if you want the form to submit on click in all browsers, use <input type="submit">

edited Aug 19 '11 at 06:22

answered Aug 19 '11 at 06:18

DarylChymko

1,048
1
8
11

14

You can use ` – jumpnett Apr 05 '13 at 22:17

input type="submit" Vs button tag are they interchangeable?

10 Answers10

Linked

Related