<button>与<input type =“ button” />。使用哪个？

查看大多数站点（包括SO）时，大多数使用：

<input type="button" />

代替：

<button></button>

• 两者之间的主要区别是什么？
• 是否有正当理由使用一个而不是另一个？
• 是否有使用它们的有效理由？
• <button>看到使用不是很广泛时，使用是否会带来兼容性问题？

• 这是描述差异的页面（基本上，您可以将html放入<button></button>）
• 另一页描述了人们为什么回避的原因<button></button>（提示：IE6）

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

在谈论IE的同时，还有一些与按钮宽度有关的错误。当您尝试添加样式时，它将神秘地添加额外的填充，这意味着您必须添加一个小技巧才能使事情得到控制。

就像一个旁注，<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"

本文似乎很好地概述了两者之间的区别。

从页面：

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

按钮元素-W3C

<button>您可以在元素内放置内容，例如文本或图像。

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

这是此元素和使用该<input>元素创建的按钮之间的区别。

引用

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

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

如果我理解正确，答案是浏览器之间的兼容性和输入一致性

我将引用文章“锚点，输入和按钮之间的区别”：

锚点（<a>元素）代表超链接，人们可以浏览到或在浏览器中下载的资源。如果要允许用户移动到新页面或下载文件，请使用锚点。

一个输入（<input>）表示数据字段：所以一些用户数据你的意思发送给服务器。有几种与按钮相关的输入类型：

• <input type="submit">
• <input type="image">
• <input type="file">
• <input type="reset">
• <input type="button">

它们每个都有含义，例如，“ file ”用于上载文件，“ reset ”清除表单，而“ submit ”将数据发送到服务器。检查MDN或W3Schools 上的 W3参考。

的按钮（<button>)元素是相当具有通用性：

• 您可以将元素嵌套在按钮内，例如图像，段落或标题；
• 按钮也可以包含::before和::after伪元素；
• 按钮支持disabled属性。这样可以轻松打开和关闭它们。

再次，检查W3参考以获取MDN或W3Schools 上的<button>标签。

引用HTML手册中的“ 表单页面 ”：

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

如果要在表单中创建按钮，请使用输入元素中的按钮。如果要为操作创建按钮，请使用按钮标签。

<button>

• 默认情况下，其行为类似于是否具有“ type =“ submit”属性
• 可以不使用形式也可以形式使用。
• 允许的文字或HTML内容
• 允许使用CSS伪元素（例如：之前）
• 标签名称通常是单个表单唯一的

与

<input type='button'>

• 类型应设置为“提交”以充当提交元素
• 只能以表格形式使用。
• 只允许文字内容
• 没有CSS伪元素
• 与大多数表单元素（输入）相同的标签名称

-
在现代浏览器中，两个元素都可以使用CSS轻松设置样式，但在大多数情况下，button首选元素，因为您可以使用内部html和伪元素设置更多样式

就CSS样式而言，这<button type="submit" class="Btn">Example</button>是更好的选择，因为它使您能够使用CSS :before和:after 伪类，这可以提供帮助。

由于在某些情况下类的<input type="button">视觉呈现方式与<a>或不同，因此<span>我避免使用它们。

值得注意的是，当前的最佳答案是在2009年编写的。如今，IE6不再是一个问题，因此<button type="submit">Wins</button>我眼中的样式一致性始终居于首位。

如果您使用的是jQuery，则会有很大的不同。jQuery知道输入事件比按钮事件更多。在按钮上，jQuery仅知道“单击”事件。在输入上，jQuery知道“单击”，“焦点”和“模糊”事件。

您总是可以根据需要将事件绑定到按钮，但是要知道jQuery自动知道的事件是不同的。例如，如果您创建了一个只要页面上出现“ focusin”事件就执行的函数，则输入将触发该函数，但按钮不会触发。

<button>灵活，因为它可以包含HTML。而且，使用CSS进行样式设置要容易得多，并且样式实际上已应用到所有浏览器。但是，有关Internet Explorer（Eww！IE！）有一些缺点。Internet Explorer使用标记的内容作为值，无法正确检测到value属性。表单中的所有值都发送到服务器端，无论是否单击该按钮。这使得使用它既<button type="submit">棘手又痛苦。

<input type="submit">另一方面，它没有任何价值或检测问题，但是您不能像使用一样添加HTML <button>。这也很难设置样式，并且样式在所有浏览器中不一定总是响应良好。希望这会有所帮助。

我只想在此处的其余答案中添加一些内容。输入元素被认为是空元素或空元素（其他空元素是area，base，br，col，hr，img，input，link，meta和param。您也可以在此处检查），这意味着它们不能包含任何内容。除了没有任何内容之外，空元素不能具有任何伪元素，例如:: after和:: before，我认为这是一个主要缺点。

此外，差异之一可能来自库的提供者及其所编写的内容。例如，在这里，我将Cordova平台与移动角度ui结合使用，并且虽然input / div / etc标签与ng-click配合使用效果很好，但是按钮肯定会由于程序员的不同而导致Visual Studio调试器崩溃；请注意，MattC答案指向的是同一问题，jQuery只是一个库，提供程序没有想到一个元素上的功能，而他/他在另一个元素上提供了功能。因此，当您使用图书馆时，您可能会遇到一个要素的问题，而您不会遇到另一个要素的问题。input只是因为它更受欢迎，所以像这样的流行对象通常会是固定的。

尽管这是一个非常老的问题，可能不再适用，但请记住，该<button>标签曾经存在的大多数问题已不复存在，因此强烈建议您使用它。

万一由于各种原因而不能这样做，请记住在可访问性中将属性role =“ button”添加到标签中。本文内容翔实：https：//www.deque.com/blog/accessible-aria-buttons/