输入类型=“提交”与按钮标签是否可互换？

233

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

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

— Jitendra Vyas
source

4

另请参见<input type ='button'/>和<input type ='submit'/>之间的

— 区别

避免在使用过程中度过有趣的一天，button并且value某些版本的IE中的属性input只会发送您期望的内容，某些版本的IE不能很好地与buttons 配合使用。

— Rubens Mariuzzo

答案基本上是相同input type="button"VS button type=button：stackoverflow.com/questions/469059/...

— 西罗桑蒂利郝海东冠状病六四事件法轮功

这回答了你的问题了吗？<button>与<input type =“ button” />。使用哪个？

— leonheess

131

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

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

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

（不要忘记，它type="submit"是的默认设置button，因此请不要使用它！）

— MatTheCat
source

7

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

— 山姆

6

仅供参考你不具备使用type="submit"与按钮，默认为type是submit。

— 2015年

8

这就是W3C所说的，但是我敢肯定，我已经看过type默认值为的情况button。我更喜欢显式地显示每个属性，以避免任何浏览器不一致。

— MatTheCat 2015年

5

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

— EKanadily '16

2

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

— Paul Draper

71

该<input type="button">只是一个按钮，本身不会做任何事情。的<input type="submit">，当一个表单元素内点击后会提交表单。

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

— 程序员
source

5

问题是关于按钮标签不是<input type =“ button”>

— Caltor

7

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

— Pmpr

43

使用<button>标记而不是<input type =“ button” ..>。这是引导程序3中的建议做法。

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

“跨浏览器渲染

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

除其他外，还有一个Firefox错误，该错误使我们无法设置基于<input>的按钮的行高，从而导致它们与Firefox上其他按钮的高度不完全匹配。”

— 罗尔夫克
source

4

为此+1。 button更加明确，并具有aria可访问性功能，并且样式容易得多。它也是具有前瞻性的，因为它是HTML5。

— user1429980

37

尽管两个元素在功能上都提供相同的结果*，但我还是强烈建议您使用<button>：

更加明确和可读。 input建议控件是可编辑的，或者可以由用户编辑；button在服务目的方面更为明确
在CSS中更容易样式化；如上所述，FIrefox和IE的古怪之input[type="submit"]处在某些情况下无法正确显示
可预测的请求：在POST/ GET请求中将值提交到服务器时，IE会产生异常行为
标记友好；您可以将项目（例如图标）嵌套在按钮内。
HTML5，具有前瞻性；作为开发人员，一旦新规范正式采用，我们有责任采用。到目前为止，HTML5已经正式发布了一年多，并且在许多情况下已经显示出可以提高SEO。

* _{随着例外它默认没有指定的行为。<button type="button">}

总之，我强烈建议不要使用<input type="submit" />。

— 用户名
source

谢谢。我一直在寻找这个，尤其是对于HTML5语义点。在2020年，我们不仅必须考虑纯粹的功能。

— Pierre_loic

27

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

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

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

— 吴彦祖
source

1

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

— Jared Ng

2

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

— 伍瑞杰（Jared Ng）2013年

1

在编写答案时，IE6 / 7已经过时了。一位新的Web开发人员在阅读您的帖子时，没有检查您的支持性论点并意识到它们不再适用，就会认为有充分的理由不使用“按钮”元素。

— mikemaccana

2

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

— 伍瑞杰（Jared Ng）

1

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

— mikemaccana

14

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

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

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

单击按钮按钮没有任何作用！这听起来很愚蠢，但是用JavaScript构建自定义按钮非常有用。

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

— 杰瑞
source

如果什么都不做，它有什么用？

— 亲爱的

4

因为您可以随后通过Javascript将处理程序挂钩到click事件

— fonso

例如，@ Honey您可以编码a <button type="button">来将滑块/转盘前进到下一张幻灯片。

— chharvey

11

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

— 阿萨兹·索扎（Acaz Souza）
source

8

虽然其他答案很好并且可以回答问题，但使用input type="submit"和时要考虑一件事button。使用a时，input type="submit"您不能在输入上使用 CSS伪元素，但可以使用按钮！

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

— L84
source

3

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

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

— 伊万·亚里奇（Ivan Yarych）
source

从我的经验完全相反的角度来看，按钮会传递$ _POST [“ submit_name”]，而输入则不会。在铬上测试。Firefox始终发送$ _POST [“ submit_name”]。

— Gall Annonim

@GallAnnonim可能取决于文档类型。因为我肯定使用输入类型=提交和它的作品对铬

— 伊万Yarych

有趣的...我使用<！DOCTYPE html>使用lang“ pl” &&编码utf-8（如果有任何区别）。chrome是58.0.3029.96

— Gall Annonim '17

-2

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

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

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

— 达里尔·奇姆科
source

14

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

— jumpnett