<button>有哪些良好的实践方法？它可以取代<a>吗，还是只能用于表单？

Question

<button>的最佳实践是什么？

它能替代<a>标签吗，还是只适用于表单？

- SIr Codealot

---

@Mike，我修改了你的问题，假设<buttons>只是一个拼写错误。如果我错了，请随意恢复修改。 - Álvaro González

按钮用于提供直观的控制，以执行某些操作。如果用户需要提交、取消、更新或者"做某事"，按钮将不会让用户思考要做什么，并且会成为明显的控制选项。它不一定必须是<button>，但应该看起来像一个按钮。 - abhinav

那么<input type="button">呢？它们只用于表单吗？ - citelao

Answer 1

链接应该指向某个东西-至少应该如此！以下做法在语义上是错误的：

<a href="#" onclick="doSomething(); return false;">Do something</a>

这应该被替换成一个按钮，因为它是为此目的而存在的 - 它作为用户（程序员）指定某些东西的触发器；因此，<button type="button">元素的目的不明确。相比之下，链接的目的非常清晰 - 它应该指向某个地方！

由于HTML是一种标记语言，如果您不考虑SEO，您所做的事情并不重要。您可以通过使用<a>标签和<button>标签来实现相同的效果，就像<span>可以完全像<div>一样起作用 - 但从语义上讲，这是不正确的。

- Frederik Wordenskjold

Answer 2

实际上，这取决于公司的惯例。根据我的经验，在页面不会重定向时（包括但不限于表单），通常使用按钮，而在用户被重定向到新页面时使用<a>。

- Igor

---

这也是我的惯例。 - Jemaclus

我认为使用按钮（或类似按钮的元素）来重定向到执行操作的页面也是合适的。例如，“注册”。另一方面，<a>（即链接）应该用于指向信息，包括滚动到同一页的适当部分。 - abhinav

Answer 3

如果你想使用<button>标签来替换常规链接（<a href="...">），你将面临以下缺点：

• 它看起来不像一个链接，所以会增加混淆。
• 你需要使用JavaScript使按钮有功能。
• 搜索引擎和其他工具将无法跟踪链接。
• 你将没有已访问链接的视觉指示。
• 用户不能再决定在新标签中打开链接、检查目标或复制URL。

我现在想不到任何优点。

- Álvaro González

---

“<a href=foo><button>hello</button></a>” 不是推荐的方式，但是可以实现。 - fuxia

我完全同意你的观点，但你几乎可以像链接一样设计一个按钮：http://jsfiddle.net/MsKWX/ - ComFreek

@toscho - 这是明确禁止的。 - Álvaro González

Answer 4

<button> 元素仅用于表单元素。在 Opera 中，您可以使用 a、q 和 Ctrl+箭头导航链接，表单元素可通过 tab 访问。

因此，不，您不应该用一个元素替换另一个元素。

- fuxia