何时使用按钮元素

您在需要网页上的按钮供用户点击时使用它，对吧？好吧，不幸的是，它比这要复杂一些。不过也并不太糟糕，让我们来弄清楚吧。

它看起来像这样

<button>
  Do Something
</button>

点击网站上的某个东西最常见的结果是什么？移动到一个新的 URL，就像点击一个链接（一个 <a href="/example/"></a>）元素。

<button> 元素本身无法做到这一点。多年来，一直有关于允许“任意位置的 href”的各种 讨论，但什么也没发生。

点击按钮确实会执行某些操作，当在自然环境中使用时...

按钮是一个表单元素

网页表单有提交按钮。您可以这样想

<form action="/" method="post">
  <input type="submit" value="Submit">
</form>

<form> 中的 <button> 元素默认情况下与上面的提交输入行为完全相同。

<form action="/" method="post">
  <button>Submit</button>
</form>

无论 UX 多么糟糕，表单也可以有重置按钮。您可以通过将默认提交类型更改为重置来复制此行为。

<form action="/" method="post">
  <button type="reset">Reset</button>
</form>

点击该按钮将清除所有其他输入（和文本区域），以及父 <form>。

按钮可以包含内容

使用 <button> 的主要原因是它同时具有开始和结束（</button>）标签。这意味着里面可以有内容。一个常见的用例是

<button>
  <img src="tiny_birthday_cake.png" alt="">
  Submit
</button>

虽然输入可以是 <input type="image">，但这种混合内容很难实现。

您可能可以将任何 HTML 放入按钮中，但 MDN 指出 按钮的“允许内容”仅限于 “短语内容”。短语内容是 HTML 元素的有限子集，它“定义文本及其包含的标记。短语内容的运行组成段落。”

伪元素 也可以使用。

让我们将样式化 <button> 留到以后再谈，但不同的浏览器通常会对按钮应用特殊的样式。您需要保留这种样式，以便默认样式生效，或者彻底删除它，以便您的新样式在所有浏览器中保持一致。

让我们考虑一下：“如果按钮没有有意义的 href，它就是一个 <button>”

我最近说我喜欢 这种说法。这是我开始写这篇文章的原因。当时，我在想我如何喜欢它的语义。就像

<a href="#0">
  I'm kinda sick of doing this for buttons.
</a>

那里没有有意义的 href。0 只是为了防止页面跳转，因为 ID 不能以数字开头.

很有可能，像上面这样的 HTML 意味着：我将使用 JavaScript 使点击它执行某些操作。不知何故，这感觉比 <div> 更好，因为您获得了光标变化以及其他默认样式。

如果您不喜欢这些没有意义的 href，<button> 似乎是一个不错的选择。但不幸的是，在 <form> 上下文之外，<button> 也同样没有意义。

<button>
  Outside of a <form>, I'm just as useless.
</button>

但 <button> 感觉更好

即使 <button> 在没有 JavaScript 帮助的情况下，在表单之外什么也不做，它仍然对您可以点击以执行更改页面以外操作的事物感觉更好。虚假的 href 链接绝对感觉不对。

好的。然后我们用 JavaScript 插入它。

这可能是最好的解决方案。如果可点击元素要执行任何操作都需要 JavaScript，那么它可能根本不应该存在，除非 JavaScript 运行。我们可以执行

// 1. Create the button
var button = document.createElement("button");
button.innerHTML = "Do Something";

// 2. Append somewhere
var body = document.getElementsByTagName("body")[0];
body.appendChild(button);

// 3. Add event handler
button.addEventListener ("click", function() {
  alert("did something");
});

您可以轻松地将“添加按钮”作为 JavaScript 工作流程的一部分。

何时链接更有意义

如果可以在该链接上添加任何有意义的 href，那么请务必使用锚点。即使您用 JavaScript 覆盖了这种行为。这是渐进式增强最棒的体现。例如

• 搜索按钮通常会触发一个类型提前的 ajax 搜索小部件 - 但 href 可以直接指向 /search/ 页面。
• 发布按钮会触发用户创建内容的发布的下一阶段 - 但 href 可以直接指向 /publish/ 页面。
• 缩略图按钮会打开一个包含较大版本的灯箱 - 但 href 可以直接指向该较大版本的 URL。

如果什么都不合适，请使用 JavaScript 插入按钮。

可访问性问题

假设使用锚点链接确实有意义。在您为自己的渐进式增强能力拍拍手后，还需要考虑可访问性。

您可能想，我懂！

<a href="#meaningful" class="button" role="button">
  I'm good
</a>

但您还没有完全脱离困境。 MDN 解释得很清楚

警告：在使用按钮角色标记链接时要小心。预计按钮将使用空格键触发，而预计链接将通过回车键触发。换句话说，当链接被用作按钮时，仅仅添加 role=”button”是不够的。还需要添加一个键事件处理程序，该处理程序监听空格键以与本机按钮保持一致。

明白了吗？您使用不同的键激活链接和按钮，因此请考虑这一点。

继续吧，以正确的方式创建可点击的东西。