input type="submit" 与按钮标签可以互换吗？ [重复]

Question

input type="submit"

和

button

标签可以互换吗？或者如果有任何区别，那么何时使用

input type="submit"

以及何时使用

button

？

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

Answer 1

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

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

因此，仅就功能而言，它们是可以互换的！

（注意，

type="submit"

是

button

的默认值）

Answer 2

<input type="button" />

只是一个按钮，本身不会执行任何操作。

<input type="submit" />

在表单元素内时，单击时将提交表单。

另一个有用的“特殊”按钮是

<input type="reset" />

，它将清除表单。

Answer 3

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

：

更加明确和可读。
• input

   表明该控件是

  可编辑，或者可以由用户编辑； button

   就其服务目的而言更加明确

更容易在 CSS 中设置样式；如上所述，FIrefox 和 IE 有一些怪癖，在某些情况下
• input[type="submit"]

   无法正确显示

可预测的请求：当在
• POST

  /

  GET

   请求中向服务器提交值时，IE 具有非常奇怪的行为

标记友好；您可以在按钮内嵌套项目，例如图标。
HTML5，前瞻性；作为开发人员，我们有责任在新规范正式发布后采用它。截至目前，HTML5 已经正式推出一年多了，并且在许多情况下都被证明可以
• 提高 SEO。

*

除了 _{<button type="button">}

 之外，默认情况下没有指定的行为。

总而言之，

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

。

Answer 4

使用 标签而不是 。这是 bootstrap 3 中建议的做法。

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

“跨浏览器渲染

作为最佳实践，我们强烈建议使用

元素 尽可能确保匹配的跨浏览器渲染。

除其他事项外，Firefox 存在一个错误，它阻止我们 设置基于

的按钮的行高，导致它们不 与 Firefox 上其他按钮的高度完全匹配。”

<input type='submit' />

 不支持其中的 HTML，因为它是单个自关闭标签。另一方面，

<button>

内部支持HTML、图像等，因为它是一个标签对：

<button><img src='myimage.gif' /></button>

。 

<button>

 在 CSS 样式方面也更加灵活。 

<button>

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

除非您有特殊原因，否则最好坚持

<input type='submit' />

。

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

按钮可以分为三种类型：提交、重置或按钮。单击一个 提交按钮将表单的数据发送到由 元素的动作属性。

单击重置按钮 立即将所有表单小部件重置为其默认值。来自一个 从用户体验的角度来看，这被认为是不好的做法。

单击按钮 按钮...什么也没做！这听起来很傻，但是却非常有用 使用 JavaScript 构建自定义按钮。

_to_finish">https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form#And_a_

<button>

比

<input type="submit">

更新，更语义化，易于样式化并支持内部的HTML。

虽然其他答案都很好并回答了问题，但在使用

input type="submit"

 和 

button

 时需要考虑一件事。使用 

input type="submit"

，您

不能在输入上使用 CSS 伪元素，但您可以用于按钮！

这是在样式设置时在输入上使用

button

 元素的原因之一。

我不知道这是一个错误还是一个功能，但我发现了一个非常重要的（至少在某些情况下）差异：

<input type="submit">

在您的请求中创建键值对，而

<button type="submit">

则不会。在 Chrome 和 Safari 中测试。

因此，当您的表单中有多个提交按钮并想知道单击了哪一个时 - 不要使用

button

，而是使用 

input type="submit"

。

如果您正在谈论

<input type=button>

，它不会自动提交表格

如果您谈论的是

<button>

 标签，那么该标签较新，并且不会在所有浏览器中自动提交。

底线，如果您希望在所有浏览器中单击时提交表单，请使用

<input type="submit">

Answer 5

<input type='submit' />

 不支持其中的 HTML，因为它是单个自关闭标签。另一方面，

<button>

内部支持HTML、图像等，因为它是一个标签对：

<button><img src='myimage.gif' /></button>

。 

<button>

 在 CSS 样式方面也更加灵活。 

<button>

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

除非您有特殊原因，否则最好坚持

<input type='submit' />

。

Answer 6

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

按钮可以分为三种类型：提交、重置或按钮。单击一个 提交按钮将表单的数据发送到由 元素的动作属性。

单击重置按钮 立即将所有表单小部件重置为其默认值。来自一个 从用户体验的角度来看，这被认为是不好的做法。

单击按钮 按钮...什么也没做！这听起来很傻，但是却非常有用 使用 JavaScript 构建自定义按钮。

_to_finish">https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form#And_a_

<button>

比

<input type="submit">

更新，更语义化，易于样式化并支持内部的HTML。

Answer 7

虽然其他答案都很好并回答了问题，但在使用

input type="submit"

 和 

button

 时需要考虑一件事。使用 

input type="submit"

，您

不能在输入上使用

Answer 8

我不知道这是一个错误还是一个功能，但我发现了一个非常重要的（至少在某些情况下）差异：

<input type="submit">

在您的请求中创建键值对，而

<button type="submit">

则不会。在 Chrome 和 Safari 中测试。

因此，当您的表单中有多个提交按钮并想知道单击了哪一个时 - 不要使用

button

，而是使用 

input type="submit"

。

Answer 9

如果您正在谈论

<input type=button>

，它不会自动提交表格

如果您谈论的是

<button>

 标签，那么该标签较新，并且不会在所有浏览器中自动提交。

底线，如果您希望在所有浏览器中单击时提交表单，请使用

<input type="submit">