What is the difference between HTML <input type='button' /> and <input type='submit' />?
-
4See also input type=“submit” Vs button tag are they interchangeable?hippietrail– hippietrail2011-11-23 16:40:07 +00:00Commented Nov 23, 2011 at 16:40
-
2008 Rocks, was HTML 5.0 there ?vikramvi– vikramvi2022-09-20 12:06:05 +00:00Commented Sep 20, 2022 at 12:06
Add a comment
|
4 Answers
<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.
The first submit button of the form is also the one being clicked for implicit submission, f.e. by pressing enter in a text input.
11 Comments
Mr. Shiny and New 安宇
Also browsers can capture the "Enter" keypress on a form and submit the form automatically if there is a submit button, but not otherwise.
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.
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.
|
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).
1 Comment
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.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.
1 Comment
Ry-
“uses” how? Was this about the behavior of Return?
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.
1 Comment
Magnus Lind Oxlund
Is this in accordance with the spec or is it browser dependent?