在查看大多数网站(包括SO)时,大多数网站使用:
<input type="button" />
而不是:
<button></button>
两者之间的主要区别是什么?是否有合理的理由使用其中一个而不是另一个?是否有合理的理由使用组合它们?使用<button>是否存在兼容性问题,因为它没有被广泛使用?
在查看大多数网站(包括SO)时,大多数网站使用:
<input type="button" />
而不是:
<button></button>
两者之间的主要区别是什么?是否有合理的理由使用其中一个而不是另一个?是否有合理的理由使用组合它们?使用<button>是否存在兼容性问题,因为它没有被广泛使用?
当前回答
在<button>元素中,您可以放置内容,如文本或图像。
<button type="button">Click Me!</button>
这是该元素与使用<input>元素创建的按钮之间的区别。
其他回答
引用
重要提示:如果在HTML表单中使用button元素,不同的浏览器将提交不同的值。Internet Explorer将提交<button>和</button>标记之间的文本,而其他浏览器将提交value属性的内容。使用input元素在HTML表单中创建按钮。
发件人:http://www.w3schools.com/tags/tag_button.asp
如果我理解正确,答案是浏览器之间的兼容性和输入一致性
虽然这是一个非常古老的问题,可能不再相关,但请记住,<button>标签过去存在的大多数问题已经不存在了,因此非常建议使用它。
如果由于各种原因无法做到这一点,请记住在标记中添加属性role=“button”作为可访问性。本文内容丰富:https://www.deque.com/blog/accessible-aria-buttons/
我只想在这里的其他答案中添加一些内容。输入元素被视为空元素或void元素(其他空元素包括area、base、br、col、hr、img、Input、link、meta和param。您也可以在此处检查),这意味着它们不能包含任何内容。除了没有任何内容外,空元素不能有任何伪元素,如::after和::before,我认为这是一个主要缺点。
如果您使用的是jQuery,则会有很大的不同。jQuery知道输入上的事件比按钮上的事件多。在按钮上,jQuery只知道“单击”事件。在输入上,jQuery能够识别“点击”、“聚焦”和“模糊”事件。
您可以随时根据需要将事件绑定到按钮,但只需注意jQuery自动识别的事件是不同的。例如,如果您创建了一个函数,该函数在页面上出现“focusin”事件时执行,则输入将触发该函数,但按钮不会触发。
这篇文章似乎很好地概括了两者的区别。
从页面:
使用BUTTON元素创建的按钮与按钮一样使用INPUT元素创建,但是它们提供了更丰富的渲染可能性:BUTTON元素可能有内容。例如,按钮包含图像的元素函数类似于类型设置为的INPUT元素“image”,但BUTTON元素类型允许内容。Button元素-W3C