input type="submit"和button标签是否可以互换使用？

Question

input type="submit"和button标签可以交替使用吗？如果它们有区别，那么什么时候使用input type="submit"，什么时候使用button？

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

- Jitendra Vyas

---

在某些版本的IE中，使用“button”和“value”属性时要避免出现异常情况，而“input”只会发送您期望的内容，某些版本的IE与“button”不兼容。 - Rubens Mariuzzo

答案基本上与“input type =” button“vs”button type = button“相同：https://dev59.com/UnRB5IYBdhLWcg3w6bYE - Ciro Santilli OurBigBook.com

这不是“重复”的独特问题。 - vikramvi

Answer 1

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

使用 BUTTON 元素创建的按钮和使用 INPUT 元素创建的按钮功能相同，但它们提供了更丰富的渲染可能性：BUTTON 元素可以包含内容。例如，包含图像的 BUTTON 元素与 type 属性设置为 "image" 的 INPUT 元素的功能类似并且可能看起来相似，但 BUTTON 元素类型允许包含内容。

所以就功能而言，它们是可互换的！

(别忘了，对于 button 元素，type 属性默认为 "submit"，因此不用加上它！)

- MatTheCat

---

请注意，IE6会提交页面上所有按钮的值，这使得确定哪个按钮被点击变得困难。详细解释请参考：http://www.vancelucas.com/blog/ie6-and-multiple-button-submit-elements/ - Sam

只是提供信息，您不必使用 type="submit" 与按钮一起使用，因为 type 的默认值是 submit。 - sync

这是W3C的说法，但我相信我见过type默认为button的情况。我更喜欢显式地指定每个属性，以避免任何浏览器不一致性。 - MatTheCat

根据参考文献，是的。但并不是所有浏览器都遵循参考规范，对吗？ - EKanadily

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

Answer 2

<input type="button" /> 只是一个按钮，本身不会有任何作用。

<input type="submit" /> 如果在表单元素中，当点击时将提交表单。

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

- theprogrammer

---

这个问题是关于<button>标签而不是<input type="button">的。 - Caltor

这个问题涉及到 <input> 和 <button> 标签。你在回答中提供了关于 <input> 的有用信息，但是缺少了 <button> 方面的内容。 - Peyman Mohamadpour

Answer 3

虽然两个元素可以实现相同的功能， 但我强烈建议你使用<button>:

• 更加明确和易读。 input 暗示该控件可被用户编辑; 而 button 更清楚地表明其用途。
• 更容易在CSS中进行样式设置; 如上所述，Firefox和IE存在一些问题，导致input[type="submit"] 在某些情况下无法正确显示。
• 请求更加可预测: IE在将值提交到服务器的POST/GET请求时的行为是不确定的。
• 符合标记语言的要求；例如，您可以在按钮中嵌套其他项，如图标。
• HTML5 是面向未来的技术; 作为开发人员，我们有责任在正式发布新规范后采用它。HTML5 目前已经正式发布了一年多，并且在许多情况下证明可以提高 SEO。

* _{除了默认没有指定行为的<button type="button">之外。}

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

- user1429980

---

谢谢。我一直在寻找这个，尤其是针对HTML5语义化方面的内容。在2020年，我们必须超越纯功能思考。 - pierre_loic

Answer 4

使用<button>标签代替<input type="button"..>。在Bootstrap 3中，这是建议的做法。 http://getbootstrap.com/css/#buttons-tags 引用： “跨浏览器渲染 作为最佳实践，我们强烈推荐尽可能使用<button>元素，以确保匹配的跨浏览器渲染。 除其他外，还有一个Firefox错误，防止我们设置基于<input>的按钮的行高，导致它们与Firefox上的其他按钮的高度不完全匹配。”

- rolfk

---

对于这个建议，我给出一个赞成。 "按钮" 这个词更加直观，并且带有可访问性功能的 "aria" 属性，同时也更易于样式定制。它还是基于 HTML5 的前瞻性选择。 - user1429980

Answer 5

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

但是<button>标签并不被所有的老版本浏览器完全支持。例如，IE6/7无法正确显示它。

除非你有特定的原因需要使用<button>，否则最好还是采用<input type='submit' />标签。

- Jared Ng

---

答案是两年前的。此外，很有可能指定替代按钮文本：<input type="submit" value="登录" /> - Jared Ng

@nailer，你有权发表自己的观点，但任何答案都不可避免地会涉及当前技术的现状。也许HTML 6会废弃<button>标签，转而采用新的标签。这是否意味着我们在回答中不应提及特定的标签，因为它可能在未来某个时候发生变化？我更愿意将其留给读者去确定答案如何适用于他们的情况。只要信息对读者有价值，我认为包含它并没有问题。 - Jared Ng

当回答被撰写时，IE6/7已经过时了。一个新的网页开发者阅读您的帖子，如果没有检查您的支持论据并意识到它们已经不再适用，那么他会认为没有使用“button”元素的好理由。 - mikemaccana

@nailer并没有普遍适用的“过时”浏览器列表，每个工作场所对支持的浏览器都有不同的要求。仅因为你在2011年的“支持的浏览器”标准中不包括IE6/7，并不意味着这种情况在其他地方也是如此。 - Jared Ng

我知道没有通用的“过时”浏览器列表 - 因此并不是每个人都会提到这样的事情。我想说的是，这句话可以更好地表述为“IE6/7不支持正确显示按钮。如果这是一个问题，请使用输入框”。也就是说，你知道浏览器会发生变化，要考虑到这一点。这可以防止StackOverflow永远停留在IE6解决方法上。 - mikemaccana

Answer 6

我知道这是一个旧问题，但我在mozilla.org上找到了这个答案，并且认为它适用。

按钮可以有三种类型：submit、reset或button。单击提交按钮会将表单数据发送到元素的操作属性定义的网页。

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

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

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

- Jere.me

---

如果它什么都不做，那它有什么用处呢？ - mfaani

因为你可以通过Javascript将处理程序挂钩到点击事件上。 - fonso

例如，您可以编写代码来控制<button type="button">以使滑块/轮播到达下一张幻灯片。 - chharvey

Answer 7

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

- Acaz Souza

Answer 8

虽然其他回答都很好并回答了问题，但是在使用 input type="submit" 和 button 时有一件事情需要考虑。对于一个 input type="submit"，你不能够在它上面使用 CSS 伪元素，但是你可以在一个 button 上使用！

这就是使用 button 元素而不是 input 来进行样式设计的原因之一。

- L84

Answer 9

我不知道这是一个错误还是一个特性，但我发现有一个非常重要的区别（至少对某些情况而言）：<input type="submit"> 会在请求中创建键值对，而<button type="submit">则不会。在Chrome和Safari中进行了测试。

因此，当您的表单中有多个提交按钮，并且想要知道哪个被点击时，请勿使用button，而应该使用input type="submit"。

- Ivan Yarych

---

根据我的经验，情况完全相反，按钮传递 $_POST["submit_name"]，而输入框则不传递。在 Chrome 上进行了测试。Firefox 总是会发送 $_POST["submit_name"]。 - Gall Annonim

@GallAnnonim，这可能取决于文档类型。因为我肯定使用了input type = submit，并且在Chrome上可以正常工作。 - Ivan Yarych

有趣的是...我使用了<!DOCTYPE html>，并使用lang "pl" && encoding utf-8，如果有任何区别。Chrome版本为58.0.3029.96。 - Gall Annonim

Answer 10

如果你在谈论 <input type=button>，它不会自动提交表单

如果你在谈论 <button> 标签，那是较新的标签，在某些浏览器中不会自动提交。

总之，如果你想要在所有浏览器中点击后提交表单，请使用 <input type="submit">

- DarylChymko

---

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