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

<input type="button" />

而不是:

<button></button>

两者之间的主要区别是什么?是否有合理的理由使用其中一个而不是另一个?是否有合理的理由使用组合它们?使用<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"

其他回答

下面是一个描述差异的页面(基本上,您可以将html放入<button></button>)另一页描述了为什么人们避免使用<button></button>(提示:IE6)

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

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

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

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

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

引用

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

发件人:http://www.w3schools.com/tags/tag_button.asp

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

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

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

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