在查看大多数网站(包括SO)时,大多数网站使用:
<input type="button" />
而不是:
<button></button>
两者之间的主要区别是什么?是否有合理的理由使用其中一个而不是另一个?是否有合理的理由使用组合它们?使用<button>是否存在兼容性问题,因为它没有被广泛使用?
在查看大多数网站(包括SO)时,大多数网站使用:
<input type="button" />
而不是:
<button></button>
两者之间的主要区别是什么?是否有合理的理由使用其中一个而不是另一个?是否有合理的理由使用组合它们?使用<button>是否存在兼容性问题,因为它没有被广泛使用?
当前回答
如果您使用的是jQuery,则会有很大的不同。jQuery知道输入上的事件比按钮上的事件多。在按钮上,jQuery只知道“单击”事件。在输入上,jQuery能够识别“点击”、“聚焦”和“模糊”事件。
您可以随时根据需要将事件绑定到按钮,但只需注意jQuery自动识别的事件是不同的。例如,如果您创建了一个函数,该函数在页面上出现“focusin”事件时执行,则输入将触发该函数,但按钮不会触发。
其他回答
下面是一个描述差异的页面(基本上,您可以将html放入<button></button>)另一页描述了为什么人们避免使用<button></button>(提示:IE6)
使用<button/>时的另一个IE问题:
当我们谈论IE时有几个与按钮宽度。它会神秘地尝试时添加额外填充添加样式,意味着必须添加把事情搞得一团糟控制
如果要在表单中创建按钮,请使用输入元素中的按钮。如果要为操作创建按钮,则使用按钮标记。
我只想在这里的其他答案中添加一些内容。输入元素被视为空元素或void元素(其他空元素包括area、base、br、col、hr、img、Input、link、meta和param。您也可以在此处检查),这意味着它们不能包含任何内容。除了没有任何内容外,空元素不能有任何伪元素,如::after和::before,我认为这是一个主要缺点。
如果您使用的是jQuery,则会有很大的不同。jQuery知道输入上的事件比按钮上的事件多。在按钮上,jQuery只知道“单击”事件。在输入上,jQuery能够识别“点击”、“聚焦”和“模糊”事件。
您可以随时根据需要将事件绑定到按钮,但只需注意jQuery自动识别的事件是不同的。例如,如果您创建了一个函数,该函数在页面上出现“focusin”事件时执行,则输入将触发该函数,但按钮不会触发。
<button>
默认情况下,其行为类似于具有“type=”submit“属性可以在没有表单的情况下使用,也可以在表单中使用。允许文本或html内容允许css伪元素(如:before)标记名通常是单个表单的唯一名称
vs.
<input type='button'>
类型应设置为“submit”,以作为提交元素只能在表单中使用。仅允许文本内容没有css伪元素与大多数表单元素(输入)相同的标记名
--在现代浏览器中,这两个元素都很容易使用css设置样式,但在大多数情况下,按钮元素是首选的,因为您可以使用内部html和伪元素设置更多样式