在查看大多数站点(包括SO)时,大多数站点使用:

<input type="button" />

代替:

<button></button>
  • 如果有的话,两者之间的主要区别是什么?
  • 是否有正当理由使用一个而不是另一个?
  • 有合理的理由使用它们吗?
  • 使用 <button> 有兼容性问题,看到它没有被广泛使用?

1435
2018-01-22 13:14


起源


按钮有很多问题,如下所示: stackoverflow.com/questions/1903453/... - Kzqai
tl; dr - 按钮曾经有问题(例如IE <= 6)。但是不是现在。使用它 - 例如 css-tricks.com/use-button-element - Snowcrash
输入的使用最好留给更高级的任务,如选择列表或无线电输入,甚至是复选框列表。即使有compat问题的按钮更自定义,只需要执行最少1个功能。 - CMS_95


答案:


  • 这是一个页面 描述差异(基本上你可以将html放入 <button></button>
  • 另一页 描述人们避免的原因 <button></button> (提示:IE6)

使用时的另一个IE问题 <button />

虽然我们在谈论IE,但它是   得到了一些与此相关的错误   按钮的宽度。这将是神秘的   在尝试时添加额外的填充   添加样式,意味着你必须添加   把事情搞得一团糟的小黑客   控制。


589
2018-01-22 13:20



这个答案是在2009年,因为现在IE6已经死了,我认为没有理由不使用 <button> 现在? - Rosdi Kasim
如果他们想要盗版,让他们得到你的网站的sucky版本。删掉IE6,放弃IE7,遗憾的是IE8仍然需要支持。 - Jared
根据微软的说法 IE6倒计时页面,中国的IE6使用量仍在(截至2014年1月)约为22%。 ie6death.com 注意到IE6支持将于2014年4月8日结束。 - BryanH
正如许多人所讽刺的那样,仍旧旧版IE的用户可能习惯于互联网看起来非常糟糕。 - jinglesthula
<button /> 还有一个 form 属性(和相关属性),因此它可以链接到文档正文的其他部分中的表单。 - Gup3rSuR4c


正如旁注, <button> 将隐式提交,如果您想在没有提交的情况下使用表单中的按钮,则会导致问题。因此,使用的另一个原因 <input type="button"> (要么 <button type="button">

编辑  - 更多细节

没有类型, button 隐式接收类型 submit。表单中有多少提交按钮或输入无关紧要,其中任何一个显式或隐式输入为提交,单击时,将提交表单。

按钮有3种支持的类型

submit ||  "submits the form when clicked (default)"
reset  ||  "resets the fields in the form when clicked"
button ||  "clickable, but without any event handler until one is assigned"

271
2018-04-09 20:13



你能添加更多细节吗?如果有多个按钮会发生什么?这只是type ='submit'吗? - Simon_Weaver
我相信 第一 键入为提交的按钮将是用于表单提交的按钮。例如,当您对特定按钮的事件做出反应并且用户在INPUT中命中ENTER时,这是相关的。 - Bobby Jack
亲爱的W3C,为什么呢 submit 默认情况下99.9%的表格有很多 button 同 一  submit?! - csguimaraes
很多表单也只有一个按钮,即提交。我想,不得不单程打电话。 - jinglesthula
这可能是大问题!我的测试代码提交了大约80%的时间,否则它被视为普通按钮。在<form>中使用<button>时很容易 - Sydwell


本文 似乎提供了很好的差异概述。

从页面:

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

按钮元素 - W3C


159
2018-01-22 13:19





里面一个 <button> 元素你可以放置内容,如文本或图像。

<button type="button">Click Me!</button> 

这是这个元素和用它创建的按钮之间的区别 <input> 元件。


38
2018-03-28 04:27



+1,因为 <input /> 确实是一个虚空元素,而 <button> 不是 - Sebastian
使用值属性输入按钮类型? - Tebe
@ГляОпаОпаvalue属性不能包含非文本。 - mbomb007
难怪。在value属性中混合使用其他html标签会很麻烦。如果你的意思是这个。根据您的需要使用合适的元素。在按钮标签内插入img对我来说听起来很奇怪 - Tebe


引用

重要提示:如果您在HTML表单中使用button元素,则不同的浏览器将提交不同的值。 Internet Explorer将在之间提交文本 <button> 和 </button> 标签,而其他浏览器将提交value属性的内容。使用input元素在HTML表单中创建按钮。

来自: http://www.w3schools.com/tags/tag_button.asp

如果我理解正确,答案是从浏览器到浏览器的兼容性和输入一致性


36
2018-01-22 13:18



要小心,因为w3schools的准确性并不为人所知: w3fools.com - Hawken
@Hawken那页是由那些认为W3Schools假装成W3C的白痴写的。实际上,W3Schools并不比处理这种材料的数千个其他网站更好或更差。 - Mr Lister
@MrLister我和那些认为W3Schools与W3C有联系的人交谈过。虽然我不确定我是否同意W3Fools“提供准确信息的责任”,但我确实认为W3Schools的准确性还有待改进,而且它的批评者不一定是白痴。 (我从W3S那里学到了很多东西,当它很好的时候回来了;它没有跟上标准的步伐。) - Marnen Laibow-Koser
@MrLister W3Schools很容易成为Web技术信息最常用的非官方来源。质量真的太糟糕了。为什么不把它们单独出来? W3Fools出了什么问题?那里的一切对我来说都是正确的。 - Marnen Laibow-Koser
这里的引用非常不清楚。 '会提交' 在什么情况下?按下按钮?提交表单时?当整个表单是URL编码时,它们是指该特定按钮的值,还是指整个查询字符串或随请求提交的帖子数据?另外,如何使用 input 元素改变了行为?并建议使用 input 适用于所有按钮,还是提交按钮有例外?什么都不清楚 什么 在引用的段落中的意思。 - Mark Amery


如果要在表单中创建按钮,请使用input元素中的按钮。如果要为操作创建按钮,请使用按钮标记。


16
2018-03-01 08:17



为什么要在表单外使用按钮标签? - Caltor
对于客户端脚本。 <input type =“button”>在HTML中没有任何功能。 - iGEL
@iGEL - 两者都没有 <button type="button"> - Roy Tinker


我会引用这篇文章 锚,输入和按钮之间的差异

 (该 <a> element)表示人们可以在浏览器中导航或下载的超链接,资源。如果要允许用户移动到新页面或下载文件,请使用锚点。

一个 输入 (<input>)表示一个数据字段:因此您要将一些用户数据发送到服务器。有几种与按钮相关的输入类型: <input type="submit"><input type="image"><input type="file"><input type="reset"><input type="button">
他们每个人都有意义,例如“文件“用于上传文件,”重启“清除表格,”提交“将数据发送到服务器。检查W3参考 在MDN上 要么 在W3Schools

按键 (<button>) 元素非常多才多艺:

  • 您可以在按钮中嵌套元素,例如图像,段落或 头;
  • 按钮也可以包含 ::before 和 ::after 伪元素;
  • 按钮支持 disabled 属性。这样可以轻松转动 他们打开和关闭。

再次,检查W3参考 <button> 标签 在MDN上 要么 在W3Schools


16
2017-11-08 14:31



我注意到,你也可以给一个<button> -element一个href =“” - 属性,它将作为<a> -tag。 - Atheist


引用 表格页面 在HTML手册中:

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


15
2018-01-22 13:19