html input提交按钮标签样式,html

html - 输入类型=“提交”Vs按钮标签是否可以互换？

input type="submit"和button标签是否可以互换？ 或者，如果有任何差异，那么何时使用input type="submit"和button？

如果没有区别那么为什么我们有2个标签用于相同的目的？

10个解决方案

110 votes

[.html#h-17.5]

使用BUTTON元素创建的按钮功能就像使用INPUT元素创建的按钮一样，但它们提供了更丰富的渲染可能性：BUTTON元素可能包含内容。 例如，包含图像的BUTTON元素的功能类似于并且可能类似于其类型设置为“image”的INPUT元素，但BUTTON元素类型允许内容。

所以只有功能才可以互换！

(别忘了，type="submit"是button的默认值，所以请不要忘记！)

MatTheCat answered 2019-03-31T07:42:15Z

54 votes

只是一个按钮，它本身不会做任何事情。在表单元素内部时，将在单击时提交表单。

另一个有用的“特殊”按钮是，它将清除表格。

theprogrammer answered 2019-03-31T07:42:54Z

32 votes

使用＆lt; button＆gt; 标记而不是＆lt; input type =“button”..＆gt;。 这是bootstrap 3中的建议做法。

[]

“跨浏览器渲染

作为最佳做法，我们强烈建议您使用＆lt; button＆gt; 元件   尽可能确保匹配跨浏览器呈现。

除此之外，还有一个阻止我们的Firefox错误   设置＆lt; input＆gt;基于按钮的行高，导致它们不行   完全匹配Firefox上其他按钮的高度。“

rolfk answered 2019-03-31T07:44:06Z

22 votes

不支持其中的HTML，因为它是一个自动关闭标记。 另一方面，支持内部的HTML，图像等，因为它是一个标签对：. 在CSS样式方面也更灵活。

的缺点是它不受旧版浏览器的完全支持。 例如，IE6 / 7无法正确显示。

除非你有一些具体的原因，否则最好坚持。

Jared Ng answered 2019-03-31T07:45:19Z

22 votes

虽然这两个元素在功能上都提供相同的结果*，但我强烈建议您使用：

更加明确和可读。 建议控件可编辑，或者可由用户编辑; GET在其服务目的方面更为明确

更容易在CSS中设计风格; 如上所述，FIrefox和IE有一些怪癖，其中在某些情况下无法正确显示

可预测的请求：当在/GET请求中向服务器提交值时，IE具有非常行为

标记友好; 您可以在按钮内嵌套项目，例如图标。

HTML5，前瞻性思维; 作为开发人员，一旦官方化，我们有责任采用新规范。 HTML5，截至目前，已经正式使用了一年多，并且在许多情况下已被证明可以提高SEO。

*除了类型= “按钮” ＆GT;默认情况下没有指定的行为。

总之，我强烈反对使用。

user1429980 answered 2019-03-31T07:47:24Z

11 votes

我意识到这是一个老问题，但我在mozilla.org上发现了这个问题并认为它适用。

按钮可以有三种类型：提交，重置或按钮。 点击一下   提交按钮将表单的数据发送到由...定义的网页   元素的action属性。

单击重置按钮   立即将所有表单小部件重置为其默认值。 从一个   UX的观点来看，这被认为是不好的做法。

单击按钮   按钮没有...没有！ 这听起来很傻，但它非常有用   使用JavaScript构建自定义按钮。

[;button>_to_finish]

Jere.me answered 2019-03-31T07:48:38Z

9 votes

比更新，更具语义性，易于风格化并支持HTML内部。

Acaz Souza answered 2019-03-31T07:49:18Z

7 votes

虽然其他答案都很棒并回答了这个问题，但在使用button和button时有一点需要考虑。使用input type="submit"您不能在输入上使用CSS伪元素，但您可以使用按钮！

这就是在样式方面使用button元素而不是输入的一个原因。

L84 answered 2019-03-31T07:50:10Z

1 votes

我不知道这是一个错误还是一个功能，但是我发现非常重要(至少在某些情况下)差异：button在您的请求中创建键值对，而input type="submit"则没有。 在Chrome和Safari中测试过。

因此，当您在表单中有多个提交按钮并想知道单击哪个按钮时 - 请勿使用button，请改用input type="submit"。

Ivan Yarych answered 2019-03-31T07:51:18Z

-2 votes

如果您正在谈论，它将不会自动提交表格

如果你在谈论标签，那是更新的，不会在所有浏览器中自动提交。

最重要的是，如果您希望在所有浏览器中单击提交表单，请使用

DarylChymko answered 2019-03-31T07:52:24Z