在查看大多数网站(包括SO)时,大多数网站使用:
<input type="button" />
而不是:
<button></button>
两者之间的主要区别是什么?是否有合理的理由使用其中一个而不是另一个?是否有合理的理由使用组合它们?使用<button>是否存在兼容性问题,因为它没有被广泛使用?
在查看大多数网站(包括SO)时,大多数网站使用:
<input type="button" />
而不是:
<button></button>
两者之间的主要区别是什么?是否有合理的理由使用其中一个而不是另一个?是否有合理的理由使用组合它们?使用<button>是否存在兼容性问题,因为它没有被广泛使用?
当前回答
虽然这是一个非常古老的问题,可能不再相关,但请记住,<button>标签过去存在的大多数问题已经不存在了,因此非常建议使用它。
如果由于各种原因无法做到这一点,请记住在标记中添加属性role=“button”作为可访问性。本文内容丰富:https://www.deque.com/blog/accessible-aria-buttons/
其他回答
<button>很灵活,因为它可以包含HTML。此外,使用CSS进行样式设置要容易得多,而且样式设置实际上适用于所有浏览器。然而,Internet Explorer(Ew!IE!)存在一些缺点。Internet Explorer使用标记的内容作为值,无法正确检测value属性。表单中的所有值都会发送到服务器端,无论是否单击按钮。这使得将其用作<button type=“submit”>变得棘手和痛苦。
另一方面,<input type=“submit”>没有任何值或检测问题,但您不能像使用<button>那样添加HTML。它也很难进行样式设置,并且样式设置在所有浏览器中的响应并不总是很好。希望这有所帮助。
虽然这是一个非常古老的问题,可能不再相关,但请记住,<button>标签过去存在的大多数问题已经不存在了,因此非常建议使用它。
如果由于各种原因无法做到这一点,请记住在标记中添加属性role=“button”作为可访问性。本文内容丰富:https://www.deque.com/blog/accessible-aria-buttons/
还值得一提的是,禁用属性在ios-safari的按钮上不起作用(另请参见-@Khris Vandal评论)。这也发生在我身上。
如果要在表单中创建按钮,请使用输入元素中的按钮。如果要为操作创建按钮,则使用按钮标记。
我将引用文章锚、输入和按钮之间的区别:
锚(<a>元素)表示超链接,即用户可以在浏览器中导航或下载的资源。如果您希望允许用户移动到新页面或下载文件,请使用锚点。
一个输入(<input>)表示一个数据字段:所以您打算将一些用户数据发送到服务器。有几种与按钮相关的输入类型:
<input-type=“submit”><input-type=“image”><input-type=“file”><输入类型=“重置”><input-type=“button”>
它们每个都有一个含义,例如“file”用于上传文件,“reset”清除表单,“submit”将数据发送到服务器。检查MDN或W3Schools上的W3参考。
按钮(<button>)元素非常通用:
可以在按钮中嵌套元素,例如图像、段落或标题;按钮还可以包含::before和::after伪元素;按钮支持禁用属性。这使得转向变得容易他们断断续续。
再次,检查MDN或W3Schools上<button>标记的W3参考。