input type="submit" 与按钮标签是不是可以互换？ [复制]

Posted 2023-02-21

【中文标题】input type="submit" 与按钮标签是不是可以互换？ [复制]

【英文标题】：input type="submit" Vs button tag are they interchangeable? [duplicate]input type="submit" 与按钮标签是否可以互换？ [复制]

【发布时间】：2011-10-30 08:46:07

【问题描述】：

input type="submit" 和button 标签可以互换吗？或者如果有任何区别，那么何时使用input type="submit" 和何时使用button？

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

【问题讨论】：

另见Difference between <input type='button' /> and <input type='submit' />

在某些版本的 IE 中使用button 和value 属性时避免有趣 的一天，input 只会发送您所期望的，某些版本的 IE与buttons 不兼容。

答案与input type="button" vs button type=button基本相同：***.com/questions/469059/…

这能回答你的问题吗？ <button> vs. <input type="button" />. Which to use?

【参考方案1】：

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

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

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

（别忘了，type="submit" 是 button 的默认值，所以不要使用它！）

【讨论】：

请注意，IE6 会提交页面上所有按钮的值，因此很难准确确定单击了哪个按钮。解释：vancelucas.com/blog/ie6-and-multiple-button-submit-elements

仅供参考，您没有有将type="submit"与按钮一起使用，因为type的默认值为submit。

这就是 W3C 所说的，但我很确定我见过 type 默认为 button 的情况。我更喜欢明确每个属性以避免任何浏览器不一致。

根据参考是的。但并非所有浏览器都遵循参考规范，对吧？

@chharvey，没有前者可能有子节点；即非文本内容。我想你可以说，除了简洁之外，后者没有理由存在。

【参考方案2】：

<input type="button"> 只是一个按钮，它自己不会做任何事情。 <input type="submit">，当在表单元素中时，将在单击时提交表单。

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

【讨论】：

问题是关于按钮标签而不是

问题是关于<input> 和<button> 标签。您在回答中提供了有关 <input> 的有用信息，但缺少 <button> 方面。

【参考方案3】：

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

更加明确和可读。 input 表示该控件可编辑，或者可以由用户编辑； button 的用途更加明确 更容易在 CSS 中设置样式；如上所述，Firefox 和 IE 有一些怪癖，其中input[type="submit"] 在某些情况下无法正确显示 可预测的请求：当POST/GET 请求中的值提交给服务器时，IE 会出现异常行为 标记友好；您可以在按钮内嵌套项目，例如图标。 HTML5，具有前瞻性；作为开发人员，我们有责任在新规范正式化后采用它。截至目前，HTML5 正式发布已经一年多了，并且在许多情况下都被证明可以

提升 SEO

。

* _{&lt;button <strong>type="button"</strong>&gt; 除外，默认情况下没有指定行为。}

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

【讨论】：

谢谢。我一直在寻找这个，特别是对于 HTML5 语义点。 2020 年，我们必须超越纯粹的功能。

【参考方案4】：

使用 标签代替 。这是引导程序 3 中的建议做法。

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

"跨浏览器渲染

作为最佳实践，我们强烈建议使用 元素 尽可能确保匹配的跨浏览器呈现。

除其他外，还有一个 Firefox 错误阻止我们 设置基于 的按钮的 line-height，导致它们不 与 Firefox 上其他按钮的高度完全匹配。”

【讨论】：

为此 +1。 button 更加明确，并带有 aria 辅助功能，并且更容易设置样式。它也是具有前瞻性的，因为它是 HTML5。

【参考方案5】：

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

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

除非您有特定原因，否则最好坚持使用<input type='submit' />。

【讨论】：

答案来自 2 年前。此外，还可以指定备用按钮文本：<input type="submit" value="Log In" />

@nailer 你完全有权发表你的意见，但任何答案都不可避免地会参考当前的技术状态。也许 HTML 6 会弃用 <button> 以支持新的东西。这是否意味着我们根本不应该在答案中提及特定标签，因为它可能在未来的某个时候会发生变化？我宁愿把它作为练习留给读者，以确定答案如何适用于他们的情况。只要信息对读者有价值，我认为包含它没有问题。

在写答案的时候，IE6/7 已经过时了。一个新的网络开发者阅读你的帖子，没有检查你的支持论点并意识到它们不再适用，会认为有充分的理由不使用“按钮”元素。

@nailer 没有每个人都遵守的通用“过时”浏览器列表。不同的工作场所对支持的浏览器有不同的要求。仅仅因为您在 2011 年的“支持的浏览器”标准不包括 IE6/7 并不意味着到处都是这样。

我知道没有通用的“过时”浏览器列表 - 因此并非每个人都提到这样的事情。我要说的是，这可以更好地表述为“IE6/7 不正确支持显示按钮。如果这是一个问题，请坚持输入”，即您知道浏览器会改变，请考虑一下。这会阻止 *** 在 IE6 解决方法中永远暂停。

【参考方案6】：

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

按钮可以有三种类型：提交、重置或按钮。点击一个 提交按钮将表单的数据发送到由 元素的动作属性。 单击重置按钮 立即将所有表单小部件重置为其默认值。从一个 从用户体验的角度来看，这被认为是不好的做法。 点击按钮 按钮……什么都没有！这听起来很愚蠢，但它非常有用 使用 javascript 构建自定义按钮。

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

【讨论】：

什么都不做有什么用？

因为您可以通过 Javascript 将处理程序挂钩到单击事件

@Honey 例如，您可以编写<button type="button"> 以将滑块/轮播推进到下一张幻灯片。

【参考方案7】：

<button> 比<input type="submit"> 更新，更语义化，易于样式化并支持其中的 HTML。

【参考方案8】：

虽然其他答案很好并回答了问题，但在使用 input type="submit" 和 button 时需要考虑一件事。使用input type="submit" 你cannot use 输入上的CSS 伪元素，但你可以 一个按钮！

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

【参考方案9】：

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

因此，当您的表单中有多个提交按钮并想知道点击了哪个按钮时 - 不要使用 button，而是使用 input type="submit"。

【讨论】：

从我的经验来看，它完全相反，按钮通过 $_POST["submit_name"] 并且输入没有。在铬上测试。 Firefox 始终发送 $_POST["submit_name"]。

@GallAnnonim 可能取决于文档类型。因为我肯定使用 input type=submit 并且它适用于 chrome

有趣...我使用 使用 lang "pl" && 编码 utf-8 如果有任何差异。铬是 58.0.3029.96

【参考方案10】：

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

如果您谈论的是<button> 标签，那是较新的标签，并且不会在所有浏览器中自动提交。

底线，如果您希望表单在所有浏览器中点击提交，请使用<input type="submit">

【讨论】：

您可以使用<button type="submit"> 自动提交表单。