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

<input type="button" />

而不是:

<button></button>

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


当前回答

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

从页面:

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

其他回答

引用HTML手册中的表单页:

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

作为补充说明,<button>将隐式提交,如果您想在表单中使用按钮而不提交,这可能会导致问题。因此,使用<input type=“button”>(或<button type=“button”>)的另一个原因

编辑-更多详细信息

如果没有类型,按钮将隐式接收提交类型。表单中有多少提交按钮或输入并不重要,任何一个显式或隐式键入为提交的按钮或输入在单击时都将提交表单。

按钮支持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"

就CSS样式而言,<button type=“submit”class=“Btn”>示例</button>更好,因为它可以让您使用CSS:before和:after伪类,这会有所帮助。

由于在某些情况下使用类样式时,<inputtype=“button”>的视觉呈现与<a>或<span>不同,因此我避免使用它们。

值得注意的是,目前的最高答案是2009年写的。IE6现在已经不受关注了,所以<button type=“submit”>Wins</button>风格一致性在我看来是最重要的。

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

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

<button>很灵活,因为它可以包含HTML。此外,使用CSS进行样式设置要容易得多,而且样式设置实际上适用于所有浏览器。然而,Internet Explorer(Ew!IE!)存在一些缺点。Internet Explorer使用标记的内容作为值,无法正确检测value属性。表单中的所有值都会发送到服务器端,无论是否单击按钮。这使得将其用作<button type=“submit”>变得棘手和痛苦。

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