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

这是描述差异的页面（基本上您可以将html放入）

还有一个页面描述了人们为什么避免使用 （提示：IE6）

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

当我们谈论 IE 时，它有几个与按钮宽度相关的错误。当您尝试添加样式时，它会神秘地添加额外的填充，这意味着您必须添加一个小技巧来控制事情。

---

顺便说一句，<button> 将隐式提交，如果您想使用表单中的按钮而不提交，这可能会导致问题。因此，使用 <input type="button">（或 <button type="button">）的另一个原因

编辑 - 更多细节

没有类型，button implicitly receives type of 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"

---

This article 似乎很好地概述了差异。

从页面：

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

---

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

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

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

---

引用

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

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

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

---

我将引用文章The Difference Between Anchors, Inputs and Buttons：

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

输入 (<input>) 代表一个数据字段：因此您打算将一些用户数据发送到服务器。有几种与按钮相关的输入类型：

<输入类型="提交">

<输入类型="图像">

<输入类型="文件">

<输入类型="重置">

<输入类型="按钮">

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

按钮（<button>) 元素用途广泛：

您可以在按钮中嵌套元素，例如图像、段落或标题；

按钮还可以包含 ::before 和 ::after 伪元素；

按钮支持 disabled 属性。这使得打开和关闭它们变得容易。

再次检查 <button> 标签 on MDN 或 on W3Schools 的 W3 参考。

---

引用 HTML 手册中的 Forms Page：

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

---

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

---

<button>

默认情况下，它的行为就像它具有“type="submit" 属性

可以在没有表格的情况下使用，也可以在表格中使用。

允许文本或 html 内容

允许使用 css 伪元素（例如 :before）

标签名称通常对单个表单是唯一的

对比

<input type='button'>

type 应设置为 'submit' 以充当提交元素

只能在表格中使用。

只允许文本内容

没有 CSS 伪元素

与大多数表单元素（输入）相同的标签名称

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

---

尽管这是一个非常古老的问题并且可能不再相关，但请记住，<button> 标记过去存在的大多数问题已不存在，因此强烈建议使用它。

如果由于各种原因您不能这样做，请记住在您的标签中添加属性 role=”button” 作为可访问性。这篇文章内容丰富：https://www.deque.com/blog/accessible-aria-buttons/

---

就 CSS 样式而言，<button type="submit" class="Btn">Example</button> 更好，因为它使您能够使用 CSS :before 和 :after pseudo classes，这会有所帮助。

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

非常值得注意的是 current top answer 是在 2009 年编写的。现在 IE6 已经不是问题了，所以 <button type="submit">Wins</button> 在我看来，样式一致性是最重要的。

---

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

---

如果您使用 jQuery，则会有很大的不同。 jQuery 知道输入事件比按钮事件多。在按钮上，jQuery 只知道“点击”事件。在输入上，jQuery 知道 'click'、'focus' 和 'blur' 事件。

您总是可以根据需要将事件绑定到您的按钮，但请注意 jQuery 自动识别的事件是不同的。例如，如果您创建了一个在页面上有“focusin”事件时执行的函数，则输入会触发该函数，但按钮不会。

---

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

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

---

此外，差异之一可能来自库的提供者，以及他们编码的内容。例如，在这里我将cordova平台与移动角度用户界面结合使用，虽然输入/div/etc标签与ng-click配合得很好，但该按钮可能会导致Visual Studio调试器崩溃，这肯定是由于程序员造成的差异；请注意，MattC 的回答指向了同样的问题，jQuery 只是一个库，并且提供者没有想到一个元素上的某些功能，而他/她在另一个元素上提供了这些功能。因此，当您使用库时，您可能会遇到一个元素的问题，而您不会遇到另一个元素。只是像 input 这样流行的，将主要是固定的，只是因为它更受欢迎。

---