Difference between <input type='button' /> and <input type='submit' />

Question

What is the difference between HTML <input type='button' /> and <input type='submit' />?

Solution 1

<input type="button" /> buttons will not submit a form - they don't do anything by default. They're generally used in conjunction with JavaScript as part of an AJAX application.

<input type="submit"> buttons will submit the form they are in when the user clicks on them, unless you specify otherwise with JavaScript.

Solution 2

A 'button' is just that, a button, to which you can add additional functionality using Javascript. A 'submit' input type has the default functionality of submitting the form it's placed in (though, of course, you can still add additional functionality using Javascript).

Solution 3

Button won't submit form on its own.It is a simple button which is used to perform some operation by using javascript whereas Submit is a kind of button which by default submit the form whenever user clicks on submit button.

Solution 4

It should be also mentioned that a named input of type="submit" will be also submitted together with the other form's named fields while a named input type="button" won't.

With other words, in the example below, the named input name=button1 WON'T get submitted while the named input name=submit1 WILL get submitted.

Sample HTML form (index.html):

<form action="checkout.php" method="POST">

  <!-- this won't get submitted despite being named -->
  <input type="button" name="button1" value="a button">

  <!-- this one does; so the input's TYPE is important! -->
  <input type="submit" name="submit1" value="a submit button">

</form>

The PHP script (checkout.php) that process the above form's action:

<?php var_dump($_POST); ?>

Test the above on your local machine by creating the two files in a folder named /tmp/test/ then running the built-in PHP web server from shell:

php -S localhost:3000 -t /tmp/test/

Open your browser at http://localhost:3000 and see for yourself.

One would wonder why would we need to submit a named button? It depends on the back-end script. For instance the WooCommerce WordPress plugin won't process a Checkout page posted unless the Place Order named button is submitted too. If you alter its type from submit to button then this button won't get submitted and thus the Checkout form would never get processed.

This is probably a small detail but you know, the devil is in the details.

Solution 5

IE 8 actually uses the first button it encounters submit or button. Instead of easily indicating which is desired by making it a input type=submit the order on the page is actually significant.

View more solutions

Comments

[Hexagon Theory]

The HTML <button> element doesn't submit a form on its own, mate...

[jishi]

Actually, it does in some browsers. Having a form, without a submit-button but instead a <button> will apply submit-functionality to it. Firefox has this behaviour.

[jishi]

When reading W3C spec this is actually default behaviour, since buttons has a type-attribute which defaults to "submit".

[hippietrail]

See also input type=“submit” Vs button tag are they interchangeable?

[PositiveGuy]

I had the same question and this is definitely not a stupid question, especially if you have been an asp.net web forms developer all your life where we don't use regular html very day because the stupid asp.net controls spit this shit out for us...that's why we end up being dumb when moving to MVC and having to go back to kindergarden to figure out how to code simple form elements again. :)

[bounav]

@moose I have accepted Phil Sacre's answer back in November 2008!

[Martin Thoma]

@bounav Very strange. Now it shows that you've accepted the answer in November 2008. Before, it didn't show it...

[Sanjeev]

@Jishi: You have highlighted a very good point that mostly people are not aware. We should always specify type="button" on <button> element when used inside form,else it will be considered as a submit button

[leonheess]

Does this answer your question? <button> vs. <input type="button" />. Which to use?

[jishi]

They also do that if you have a type="image", which can be used to trigger a form-submission when clicked on.

[Lasar]

Mr. Shiny and New: Forms can be submitted via the enter key without any buttons. It's enough to have focus on a text input, for instance.

[Powerlord]

There's also an actual button element that can also be used to submit forms when clicked. w3.org/TR/REC-html40/interact/forms.html#h-17.5

[Admin]

You can use BUTTON elements, although (surprise surprise) there are a few issues with them when using Everyone's Favourite Browser (IE). Worth knowing about though.

[mothmonsterman]

This is obviously extremely old but I feel the need to give my 2 cents as I feel it is a large downfall of using button types... the form onsubmit event is NOT fired from javascript submissions, leading to potential maintenance nightmares.

[gwentech]

Also note that type="submit" may submit even when there is NO form on the page. The submit goes to the current URL in such case. This might lead to racing conditions if used together with onclick="document.location=...".

[Trio Cheung]

What's the mechanism of submitting information with the submit button? I found that even though Javascript is disable, the submit button will continue the action. Is it just a normal post method which is default behaviour of the submit button across all browsers?

[Kevin Meredith]

What's the default HTTP SUBMIT address for <input type="submit">? Meaning, to which address does the SUBMIT go?

[Dan]

@KevinMeredith: the current page url. And if there are several submit buttons in a form, the browser takes the first in DOM.

[Adrien Be]

Source for this answer developer.mozilla.org/en-US/docs/Web/HTML/Element/input

[Magnus Lind Oxlund]

Is this in accordance with the spec or is it browser dependent?

[Sam Dutton]

A <button> with no type attribute inside a <form> will behave like <input type="submit">. See the example here: sign-in-form.glitch.me.

[Sam Dutton]

As per the comment above: a <button> with no type attribute inside a <form> will behave like <input type="submit">. See the example here: sign-in-form.glitch.me.