input type=“submit” Vs button tag are they interch

问题:

input type=\"submit\" and button tag are they interchangeable? or if there is any difference then When to use input type=\"submit\" and when button ?

And if there is no difference then why we have 2 tags for same purpose?

回答1:

http://www.w3.org/TR/html4/interact/forms.html#h-17.5

Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to \"image\", but the BUTTON element type allows content.

So for functionality only they\'re interchangeable!

(Don\'t forget, type=\"submit\" is the default with button, so leave it off!)

回答2:

The <input type=\"button\"> is just a button and won\'t do anything by itself. The <input type=\"submit\">, when inside a form element, will submit the form when clicked.

Another useful \'special\' button is the <input type=\"reset\"> that will clear the form.

回答3:

Use <button> tag instead of <input type=\"button\"..>. It is the advised practice in bootstrap 3.

http://getbootstrap.com/css/#buttons-tags

\"Cross-browser rendering

As a best practice, we highly recommend using the <button> element whenever possible to ensure matching cross-browser rendering.

Among other things, there\'s a Firefox bug that prevents us from setting the line-height of <input>-based buttons, causing them to not exactly match the height of other buttons on Firefox.\"

回答4:

<input type=\'submit\' /> doesn\'t support HTML inside of it, since it\'s a single self-closing tag. <button>, on the other hand, supports HTML, images, etc. inside because it\'s a tag pair: <button><img src=\'myimage.gif\' /></button>. <button> is also more flexible when it comes to CSS styling.

The disadvantage of <button> is that it\'s not fully supported by older browsers. IE6/7, for example, don\'t display it correctly.

Unless you have some specific reason, it\'s probably best to stick to <input type=\'submit\' />.

回答5:

Although both elements deliver functionally the same result *, I strongly recommend you use <button>:

• Far more explicit and readable. 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
• Predictable requests: IE has verying behaviours when values are submitted in the POST/GET request to the server
• Markup-friendly; you can nest items, for example, icons, inside the button.
• HTML5, forward-thinking; as developers, it is our responsibility to adopt to the new spec once it is officialized. HTML5, as of right now, has been official for over one year now, and has been shown in many cases to boost SEO.

* _{With the exception of <button type=\"button\"> which by default has no specified behaviour.}

In summary, I highly discourage use of <input type=\"submit\" />.

回答6:

I realize this is an old question but I found this on mozilla.org and think it applies.

A button can be of three types: submit, reset, or button. A click on a submit button sends the form\'s data to the web page defined by the action attribute of the element.

A click on a reset button resets all the form widgets to their default value immediately. From a UX point of view, this is considered bad practice.

A click on a button button does... nothing! That sounds silly, but it\'s amazingly useful to build custom buttons with JavaScript.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form#And_a_<button>_to_finish

回答7:

<button> is newer than <input type=\"submit\">, is more semantic, easy to stylize and support HTML inside of it.

回答8:

While the other answers are great and answer the question there is one thing to consider when using input type=\"submit\" and button. With an input type=\"submit\" you cannot use a CSS pseudo element on the input but you can for a button!

This is one reason to use a button element over an input when it comes to styling.

回答9:

I don\'t know if this is a bug or a feature, but there is very important (for some cases at least) difference I found: <input type=\"submit\"> creates key value pair in your request and <button type=\"submit\"> doesn\'t. Tested in Chrome and Safari.

So when you have multiple submit buttons in your form and want to know which one was clicked - do not use button, use input type=\"submit\" instead.

回答10:

If you are talking about <input type=button>, it won\'t automatically submit the form

if you are talking about the <button> tag, that\'s newer and doesn\'t automatically submit in all browsers.

Bottom line, if you want the form to submit on click in all browsers, use <input type=\"submit\">