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

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

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

10个解决方案
110 votes

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

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

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

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

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

<input type="reset">只是一个按钮,它本身不会做任何事情。<input type="submit">在表单元素内部时,将在单击时提交表单。

另一个有用的“特殊”按钮是<input type="reset">,它将清除表格。

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

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

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

“跨浏览器渲染

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

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

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

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

<input type='submit' />的缺点是它不受旧版浏览器的完全支持。 例如,IE6 / 7无法正确显示。

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

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

虽然这两个元素在功能上都提供相同的结果*,但我强烈建议您使用<input type="submit" />

  • 更加明确和可读。 <input type="submit" />建议控件可编辑,或者可由用户编辑; GET在其服务目的方面更为明确
  • 更容易在CSS中设计风格; 如上所述,FIrefox和IE有一些怪癖,其中<input type="submit" />在某些情况下无法正确显示
  • 可预测的请求:当在<input type="submit" />/GET请求中向服务器提交值时,IE具有非常行为
  • 标记友好; 您可以在按钮内嵌套项目,例如图标。
  • HTML5,前瞻性思维; 作为开发人员,一旦官方化,我们有责任采用新规范。 HTML5,截至目前,已经正式使用了一年多,并且在许多情况下已被证明可以提高SEO。

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

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

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

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

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

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

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

[https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form#And_a_&lt;button&gt;_to_finish]

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

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

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

虽然其他答案都很棒并回答了这个问题,但在使用buttonbutton时有一点需要考虑。使用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

如果您正在谈论<input type="submit">,它将不会自动提交表格

如果你在谈论<input type="submit">标签,那是更新的,不会在所有浏览器中自动提交。

最重要的是,如果您希望在所有浏览器中单击提交表单,请使用<input type="submit">

DarylChymko answered 2019-03-31T07:52:24Z
translate from https://stackoverflow.com:/questions/7117639/input-type-submit-vs-button-tag-are-they-interchangeable