输入类型="提交"和按钮标签是可互换的吗?或者如果有任何区别,那么什么时候使用输入类型=“提交”和什么时候按钮?
如果没有区别,为什么我们有两个标签是为了同样的目的?
输入类型="提交"和按钮标签是可互换的吗?或者如果有任何区别,那么什么时候使用输入类型=“提交”和什么时候按钮?
如果没有区别,为什么我们有两个标签是为了同样的目的?
当前回答
使用<button>标签代替<input type="button"..>。这是bootstrap 3中建议的做法。
http://getbootstrap.com/css/#buttons-tags
“跨浏览器的渲染 作为最佳实践,我们强烈建议使用<button>元素 尽可能确保匹配的跨浏览器呈现。 除此之外,还有一个Firefox漏洞阻止我们 设置基于<input>的按钮的行高,使它们不为 完全匹配Firefox上其他按钮的高度。”
其他回答
我知道这是一个老问题,但我在mozilla.org上找到了这个问题,并认为它适用。
按钮可以有三种类型:提交、重置或按钮。点击一个 控件定义的网页发送表单数据 元素的Action属性。点击重置按钮 立即将所有表单小部件重置为默认值。从一个 从用户体验的角度来看,这是一种糟糕的做法。点击按钮 按钮做……没有什么!这听起来很傻,但却非常有用 用JavaScript构建自定义按钮。
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form And_a_ <按钮> _to_finish
<input type="button" />只是一个按钮,本身不会做任何事情。 <input type="submit" />,在表单元素中,当单击时将提交表单。
另一个有用的“特殊”按钮是<input type="reset" />,它将清除表单。
我不知道这是一个bug还是一个功能,但我发现有非常重要的(至少在某些情况下)差异:<input type="submit">在请求中创建键值对,<button type="submit">没有。在Chrome和Safari中测试。
因此,当你的表单中有多个提交按钮,并且想知道哪个按钮被点击了时,不要使用按钮,而是使用input type="submit"。
使用<button>标签代替<input type="button"..>。这是bootstrap 3中建议的做法。
http://getbootstrap.com/css/#buttons-tags
“跨浏览器的渲染 作为最佳实践,我们强烈建议使用<button>元素 尽可能确保匹配的跨浏览器呈现。 除此之外,还有一个Firefox漏洞阻止我们 设置基于<input>的按钮的行高,使它们不为 完全匹配Firefox上其他按钮的高度。”
虽然这两个元素在功能上提供了相同的结果*,但我强烈建议您使用<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"/>。