Html input type="submit" Vs button tag 它们可以互换吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7117639/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
input type="submit" Vs button tag are they interchangeable?
提问by Jitendra Vyas
input type="submit"and buttontag are they interchangeable? or if there is any difference then When to use input type="submit"and when button?
input type="submit"和button标签它们可以互换吗？或者如果有什么区别那么何时使用input type="submit"和何时使用button？
And if there is no difference then why we have 2 tags for same purpose?
如果没有区别，那么为什么我们有 2 个用于相同目的的标签？
回答by MatTheCat
http://www.w3.org/TR/html4/interact/forms.html#h-17.5
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.
使用 BUTTON 元素创建的按钮的功能与使用 INPUT 元素创建的按钮一样，但它们提供了更丰富的呈现可能性：BUTTON 元素可能具有内容。例如，包含图像的 BUTTON 元素功能类似于并且可能类似于类型设置为“图像”的 INPUT 元素，但 BUTTON 元素类型允许内容。
So for functionality only they're interchangeable!
因此，仅就功能而言，它们是可以互换的！
(Don't forget, type="submit"is the default with button, so leave it off!)
（别忘了，type="submit"是默认的button，所以不要把它关掉！）
回答by theprogrammer
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.
这<input type="button">只是一个按钮，它本身不会做任何事情。的<input type="submit">，当一个表单元素内点击后会提交表单。
Another useful 'special' button is the <input type="reset">that will clear the form.
另一个有用的“特殊”按钮<input type="reset">将清除表单。
回答by rolfk
Use <button> tag instead of <input type="button"..>. It is the advised practice in bootstrap 3.
使用 <button> 标签代替 <input type="button"..>。这是引导程序 3 中的建议做法。
http://getbootstrap.com/css/#buttons-tags
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."
"跨浏览器渲染
作为最佳实践，我们强烈建议尽可能使用 <button> 元素以确保匹配跨浏览器呈现。
除此之外，还有一个 Firefox 错误阻止我们设置基于 <input> 的按钮的行高，导致它们与 Firefox 上其他按钮的高度不完全匹配。”
回答by user1429980
Although both elements deliver functionallythe same result *, I strongly recommend you use <button>:
尽管这两个元素在功能上提供相同的结果*，但我强烈建议您使用<button>：
- Far more explicit and readable.
inputsuggests that the control is editable, or can be edited by the user;buttonis 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/GETrequest 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.
- 更加明确和可读。
input建议控件是可编辑的，或者可以由用户编辑；button就其服务目的而言更为明确 - 更容易在 CSS 中设置样式；如上所述，Firefox 和 IE 有一些怪癖，
input[type="submit"]在某些情况下无法正确显示 - 可预测的请求：当值在
POST/GET请求中提交给服务器时，IE 具有非常明显的行为 - 标记友好；您可以在按钮内嵌套项目，例如图标。
- HTML5，前瞻性；作为开发人员，我们有责任在新规范正式发布后采用它。到目前为止，HTML5 已经正式发布一年多了，并且在很多情况下都被证明可以提升 SEO。
* With the exception of <button type="button">which by default has no specified behaviour.
*除了默认情况下没有指定的行为。<button type="button">
In summary, I highly discourage use of <input type="submit" />.
总之，我非常不鼓励使用<input type="submit" />.
回答by Jared Ng
<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.
<input type='submit' />不支持其中的 HTML，因为它是单个自关闭标签。<button>，另一方面，内部支持 HTML、图像等，因为它是一个标签对：<button><img src='myimage.gif' /></button>. <button>在 CSS 样式方面也更加灵活。
The disadvantage of <button>is that it's not fully supported by older browsers. IE6/7, for example, don't display it correctly.
缺点<button>是旧浏览器不完全支持它。例如，IE6/7 不能正确显示它。
Unless you have some specific reason, it's probably best to stick to <input type='submit' />.
除非您有某些特定原因，否则最好坚持使用<input type='submit' />.
回答by Jere.me
I realize this is an old question but I found this on mozilla.org and think it applies.
我意识到这是一个老问题，但我在 mozilla.org 上发现了这个问题，并认为它适用。
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.
按钮可以是三种类型：提交、重置或按钮。单击提交按钮会将表单数据发送到由元素的 action 属性定义的网页。
单击重置按钮会立即将所有表单小部件重置为其默认值。从用户体验的角度来看，这被认为是不好的做法。
单击按钮按钮不会......什么都没有！这听起来很愚蠢，但使用 JavaScript 构建自定义按钮非常有用。
回答by Acaz Souza
<button>is newer than <input type="submit">, is more semantic, easy to stylize and support HTML inside of it.
<button>比 更新<input type="submit">，更具语义，易于风格化并支持其中的 HTML。
回答by L84
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 usea CSS pseudo element on the input but you canfor a button!
虽然其他答案很好并且回答了这个问题，但在使用input type="submit"and时需要考虑一件事button。随着input type="submit"你不能使用一个CSS伪元素上的输入，但你可以对一个按钮！
This is one reason to use a buttonelement over an input when it comes to styling.
这是button在设计样式时在输入上使用元素的原因之一。
回答by Ivan Yarych
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.
我不知道这是一个错误还是一个功能，但我发现有一个非常重要的（至少在某些情况下）差异：<input type="submit">在您的请求中创建键值对，<button type="submit">但没有。在 Chrome 和 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.
因此，当您的表单中有多个提交按钮并想知道单击了哪个按钮时 - 不要使用button，input type="submit"而是使用。
回答by DarylChymko
If you are talking about <input type=button>, it won't automatically submit the form
如果你在谈论<input type=button>，它不会自动提交表单
if you are talking about the <button>tag, that's newer and doesn't automatically submit in all browsers.
如果您在谈论<button>标签，那是较新的并且不会在所有浏览器中自动提交。
Bottom line, if you want the form to submit on click in all browsers, use <input type="submit">
最重要的是，如果您希望表单在所有浏览器中点击提交，请使用 <input type="submit">
