39

Is there a difference between a button with type="button" vs type="submit"? Are there functional differences, or is it just a descriptive name for easier code reading?

Is this different than input?

TylerH
  • 20,799
  • 66
  • 75
  • 101
akantoword
  • 2,824
  • 8
  • 26
  • 43
  • 1
    [the spec goes into detail about how they should act](https://www.w3.org/TR/html5/forms.html#attr-button-type) – zzzzBov Jun 09 '16 at 21:05
  • 2
    Does this answer your question? [Difference between and ](https://stackoverflow.com/questions/290215/difference-between-input-type-button-and-input-type-submit) – Miguel Vieira Aug 24 '20 at 20:11

6 Answers6

40

From MDN:

type
The type of the button. Possible values are:

  • submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
  • reset: The button resets all the controls to their initial values.
  • button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.

As for the difference between button and input:

  • A button can have a separate value as data, while for an input the data and button text are always the same:

    <input type="button" value="Button Text"> <!-- Form data will be "Button Text" -->
<button type="button" value="Data">Button Text</button>

  • A button can have HTML content (e.g. images), while an input can only have text.

  • A button may be easier to tell apart from other input controls (like text fields) in CSS. Note backwards browser compatibility.

    input {

}
button { /* Always works */

}
input[type=button] { /* Not supported in IE < 7 */

}
Midas
  • 7,012
  • 5
  • 34
  • 52
  • is there anyway i can disable the submit button from sending data to the server? i already have backbone listener to the button that will make server post but only need to the button to be of type submit for accessibility. – akantoword Jun 09 '16 at 21:11
  • 1
    @jlei You can return `false` in the `onclick` event. – Midas Jun 09 '16 at 21:28
  • wouldn't that mess up my backbone listener for that click too? or would they be 2 separate things? – akantoword Jun 09 '16 at 21:32
  • @jlei I have never used Backbone.js myself but I suppose it will work fine. – Midas Jun 09 '16 at 21:36
15

A button with type "button" won't submit a form but one with no type or type=submit (the default) will. Buttons with type=submit are nearly the same as inputs with type=submit but buttons are able to contain HTML content.

j08691
  • 204,283
  • 31
  • 260
  • 272
  • 1
    so there is something happening to the submit type that is not happening to regular button type? i ask this because accessibility requires me to give a button a submit type, but I'm using backbone already to listen to the button and make a post request so I just don't want to mess things up by having the html do something in the background with the submit type button in addition to backbone making a request – akantoword Jun 09 '16 at 21:06
4
<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.

when form submit by below code, We should use type=button instead of type=submit to prevent form submit twice.

@using (Html.BeginForm("View", "Controller", FormMethod.Post, new { id = "signupform" }))
        {
         //Form elements
        }
Pergin Sheni
  • 393
  • 2
  • 11
2

Buttons can be stylized much better than inputs can be used for anchor tags(links).

  • Images
  • Content etc.

Inputs can achieve the same functionality as buttons but uglier design.

Let's say inputs are oldschool, buttons are cooler.

Grecdev
  • 899
  • 9
  • 14
1

They have different default behaviour regarding submitting form data to the server The button has an attribute named "type" and can contain those values:

submit: Has default behaviour of submitting the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.

button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.

Ahmet Arslan
  • 5,380
  • 2
  • 33
  • 35
0

<button type="button"></button> buttons will not submit a form - they don't do anything by default. 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.

Zihad Hridoy
  • 26
  • 2