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

<input type="button" />

而不是:

<button></button>

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


当前回答

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

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

值得注意的是,目前的最高答案是2009年写的。IE6现在已经不受关注了,所以<button type=“submit”>Wins</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"

此外,其中一个差异可能来自于库的提供者以及它们的代码。例如,我在这里使用的是cordova平台和移动angular ui,尽管input/div/etc标签与ng单击配合使用很好,但该按钮可能会导致Visual Studio调试器崩溃,当然是由于程序员造成的差异;注意,MattC的答案指向了同一个问题,jQuery只是一个库,提供者没有想到一个元素上的某些功能,而他/她在另一个元素中提供的功能。因此,当您使用库时,您可能会遇到一个元素的问题,而另一个元素则不会遇到这个问题。简单地说,像输入这样的流行输入,大多是固定输入,因为它更流行。

<button>

默认情况下,其行为类似于具有“type=”submit“属性可以在没有表单的情况下使用,也可以在表单中使用。允许文本或html内容允许css伪元素(如:before)标记名通常是单个表单的唯一名称

vs.

<input type='button'>

类型应设置为“submit”,以作为提交元素只能在表单中使用。仅允许文本内容没有css伪元素与大多数表单元素(输入)相同的标记名

--在现代浏览器中,这两个元素都很容易使用css设置样式,但在大多数情况下,按钮元素是首选的,因为您可以使用内部html和伪元素设置更多样式

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

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

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