Difference between input type button and input type submit

Question

What is the difference between HTML  lt input type  button    gt  and  lt input type  submit    gt

User · Accepted Answer

lt input type  button    gt  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    lt input type  submit  gt  buttons will submit the form they are in when the user clicks on them  unless you specify otherwise with JavaScript

User · Answer

lt input type  button  gt  can be used anywhere  not just within form and they do not submit form if they are in one  Much better suited with Javascript    lt input type  submit  gt  should be used in forms only and they will send a request  either GET or POST  to specified URL  They should not be put in any HTML place

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

type  Submit  is set to forward  amp  get the values on BACK-END  PHP   NET etc   type  button  will reflect normal button behavior

User · Answer

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

User · Answer

W3C make it clear  on the specification about Button element  Button may be seen as a generic class for all kind of Buttons with no default behavior   W3C

User · Answer

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     lt form action  checkout php  method  POST  gt      lt  -- this won t get submitted despite being named -- gt     lt input type  button  name  button1  value  a button  gt      lt  -- this one does  so the input s TYPE is important  -- gt     lt input type  submit  name  submit1  value  a submit button  gt    lt  form gt    The PHP script  checkout php  that process the above form s action    lt  php var dump   POST     gt    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

User · Answer

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     lt form action  checkout php  method  POST  gt      lt  -- this won t get submitted despite being named -- gt     lt input type  button  name  button1  value  a button  gt      lt  -- this one does  so the input s TYPE is important  -- gt     lt input type  submit  name  submit1  value  a submit button  gt    lt  form gt    The PHP script  checkout php  that process the above form s action    lt  php var dump   POST     gt    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

User · Answer

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

User · Answer

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

User · Answer

W3C make it clear  on the specification about Button element  Button may be seen as a generic class for all kind of Buttons with no default behavior   W3C

User · Answer

lt input type  button  gt  can be used anywhere  not just within form and they do not submit form if they are in one  Much better suited with Javascript    lt input type  submit  gt  should be used in forms only and they will send a request  either GET or POST  to specified URL  They should not be put in any HTML place

User · Answer

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

User · Answer

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

User · Answer

type  Submit  is set to forward  amp  get the values on BACK-END  PHP   NET etc   type  button  will reflect normal button behavior

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

Examples related to html

Examples related to input

Examples related to types