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

<input type="button" />

而不是:

<button></button>

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


当前回答

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

其他回答

还值得一提的是,禁用属性在ios-safari的按钮上不起作用(另请参见-@Khris Vandal评论)。这也发生在我身上。

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

引用

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

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

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

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

从页面:

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

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