＜button＞vs.＜input type=“button”/>。使用哪种？

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

<input type="button" />

而不是：

<button></button>

两者之间的主要区别是什么？是否有合理的理由使用其中一个而不是另一个？是否有合理的理由使用组合它们？使用＜button＞是否存在兼容性问题，因为它没有被广泛使用？

当前回答

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

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

其他回答

引用HTML手册中的表单页：

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

虽然这是一个非常古老的问题，可能不再相关，但请记住，＜button＞标签过去存在的大多数问题已经不存在了，因此非常建议使用它。

如果由于各种原因无法做到这一点，请记住在标记中添加属性role=“button”作为可访问性。本文内容丰富：https://www.deque.com/blog/accessible-aria-buttons/

下面是一个描述差异的页面（基本上，您可以将html放入＜button＞＜/button＞）另一页描述了为什么人们避免使用＜button＞＜/button＞（提示：IE6）

使用＜button/＞时的另一个IE问题：

当我们谈论IE时有几个与按钮宽度。它会神秘地尝试时添加额外填充添加样式，意味着必须添加把事情搞得一团糟控制

这篇文章似乎很好地概括了两者的区别。

从页面：

使用BUTTON元素创建的按钮与按钮一样使用INPUT元素创建，但是它们提供了更丰富的渲染可能性：BUTTON元素可能有内容。例如，按钮包含图像的元素函数类似于类型设置为的INPUT元素“image”，但BUTTON元素类型允许内容。Button元素-W3C

推荐文章