输入类型="提交"和按钮标签是可互换的吗?或者如果有任何区别,那么什么时候使用输入类型=“提交”和什么时候按钮?

如果没有区别,为什么我们有两个标签是为了同样的目的?


当前回答

当使用input type="submit"和button时,有一件事需要考虑。使用input type="submit",你不能在输入上使用CSS伪元素,但可以在按钮上使用!

这就是在样式化方面使用按钮元素而不是输入元素的原因之一。

其他回答

使用<button>标签代替<input type="button"..>。这是bootstrap 3中建议的做法。

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

“跨浏览器的渲染 作为最佳实践,我们强烈建议使用<button>元素 尽可能确保匹配的跨浏览器呈现。 除此之外,还有一个Firefox漏洞阻止我们 设置基于<input>的按钮的行高,使它们不为 完全匹配Firefox上其他按钮的高度。”

<button>比<input type="submit">更新,更具语义性,易于风格化,并支持HTML。

如果你谈论的是<input type=button>,它不会自动提交表单

如果您谈论的是<button>标记,则该标记较新,不会在所有浏览器中自动提交。

底线,如果你想要表单在所有浏览器中点击提交,使用<input type="submit">

虽然这两个元素在功能上提供了相同的结果*,但我强烈建议您使用<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.

*除了<button type="button">,默认情况下没有指定的行为。

总之,我强烈反对使用<input type="submit"/>。

<input type='submit' />不支持其中的HTML,因为它是一个单独的自关闭标记。<button>,另一方面,支持HTML,图像等内部,因为它是一个标签对:<button><img src='myimage.gif' /></button>。<button>在CSS样式方面也更加灵活。

<button>的缺点是旧浏览器不完全支持它。例如,IE6/7无法正确显示。

除非你有一些特殊的原因,否则最好坚持<input type='submit' />。