Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Button type "button" vs. "submit" [duplicate]

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?

like image 356
akantoword Avatar asked Jun 09 '16 20:06

akantoword


People also ask

What is the difference between button type button and submit?

Submit button automatically submits a form on click. Using HTML forms, you can easily take user input. The <form> tag is used to get user input, by adding the form elements. The type attribute is used to add a button inside the <input> tag.

Should I use button or input type submit?

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.

What does button type Submit mean?

The <input type="submit"> defines a submit button which submits all form values to a form-handler. The form-handler is typically a server page with a script for processing the input data. The form-handler is specified in the form's action attribute.

Is button type submit by default?

button : The button has no default behavior, and does nothing when pressed by default.


1 Answers

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 */  } 
like image 52
Midas Avatar answered Sep 30 '22 01:09

Midas