谦虚按钮元素

Web developers will often use <button> elements interchangeably with <a> links or <div> and <span> tags styled to look like buttons, but the reality is that each element has its own specialized function and role.

Web开发人员会经常使用<button>元素互换<a>链接或<div>和<span>样式看起来像按钮的标签，但实际情况是，每个元素都有自己专门的功能和作用。

While there are always exceptions, current best practices could be defined as:

尽管总是有例外，但是当前的最佳实践可以定义为：

1. When linking to another resource, use an <a> link. Links to pages, download files, anchors etc. should always be real links. You can style those links to appear however you wish.

   链接到另一个资源时，请使用 <a> 链接 。 页面链接，下载文件，锚点等应始终是真实链接。 您可以根据需要设置这些链接的样式。

2. If a UI element takes an action on the same page, it should usually be a <button>. Clicking on the button will usually modify the page, rather than jumping to a completely new resource: a print button, for example.

   如果UI元素在同一页面上执行操作，则通常应为 <button> 。 单击按钮通常将修改页面，而不是跳转到全新的资源：例如， 打印按钮 。

3. Reserve other techniques, such as <span> tags styled to look like buttons, for edge cases.

   保留其他技术，例如<span>标签的样式看起来像按钮， 用于边缘情况 。

Why use a <button> element?

为什么要使用<button>元素？

• Much easier to style than <input type=button>.

  比<input type=button>更容易样式化。

• Designed as a UI element (unlike <div> and <span>) with better semantics, events and accessibility

  设计为具有更好的语义，事件和可访问性的UI元素(不同于<div>和<span> )

• Can contain other HTML elements, such as <span> or <img>, and pseudo-elements.

  可以包含其他HTML元素，例如<span>或<img>以及伪元素。

Now we know the reasons why <button> should be used, let’s look at how.

现在我们知道为什么应该使用<button>的原因，让我们看看如何使用。

原始按钮：表单角色 (The Original Button: Form Roles)

You’re almost certainly familiar with <input type=submit>:

您几乎可以肯定熟悉<input type=submit> ：

<form action="destination.php">
	<input type=submit>
</form>

But this will also work:

但这也将起作用：

<form action="destination.php">
	<button>Go!</button>
</form>

In other words, the default type attribute of <button> is submit. If you use a <button>, it’s important that you make it clear that the element does not submit a form:

换句话说， <button>的默认type属性是submit 。 如果使用<button> ，则必须明确指出该元素未提交表单：

<button type=button>Generic Button</button>

This is now functionally equivalent to:

现在在功能上等效于：

<input type=button value="Generic button">

You could use either type anywhere on a HTML5 page, although my preference is to use the <button> element for UI, reserving <input type=button> for forms.

您可以在HTML5页面上的任何位置使用任何一种类型，尽管我的首选是将<button>元素用于UI，而将<input type=button>保留用于表单。

如果按钮使用JavaScript，则应使用JavaScript将其添加到页面 (If A Button Uses JavaScript, It Should Be Added To The Page With JavaScript)

The most frequent use of the <button> element is to initiate some JavaScript. You’ll frequently see this written on an HTML page:

<button>元素最常用的用法是启动一些JavaScript 。 您会经常在HTML页面上看到以下内容：

<button type="button" onclick="funkalicious">Get Funky</button>

Ignoring for the moment the fact that this employs an inline event, there is a larger problem: we’re assuming that the browser has JavaScript running. This is a small but significant risk: it’s far better to add the button to the page using JavaScript in the first place:

目前，它忽略了一个内联事件，这是一个更大的问题：我们假设浏览器正在运行JavaScript。 这是一个很小的但很大的风险：首先，最好使用JavaScript将按钮添加到页面上：

var funky = document.createElement("button");
funky.type = "button";
funky.innerHTML = "Get Funky";
var mood = document.getElementById("mood-setting");
mood.appendChild(funky);

This is a much better approach: the button won’t be added to the mood-setting element unless JavaScript is already running in the browser.

这是一种更好的方法：除非浏览器中已运行JavaScript，否则不会将按钮添加到mood-setting元素中。

避免内联事件 (Avoid Inline Events)

Returning to our earlier example:

回到我们前面的例子：

<button type=button onclick=funkalicious>Get Funky</button>

As a general rule, we should avoid inline JavaScript for the same reason that we avoid inline styles: they’re difficult to track and change. Assuming we’re using modern browsers, a better approach is to simplify the button: <button type=button id=funky>Get Funky</button>

通常，我们应避免使用内联JavaScript，其原因与避免内联样式的原因相同：难以跟踪和更改。 假设我们使用的是现代浏览器，更好的方法是简化按钮：<button type = button id = funky>变得时髦</ button>

id has been added to the code above for the purposes of clarity: if the button was generated solely with Javascript using the method shown earlier, we could forgo the added attribute, as we would already have a reference to the element).

为了清楚起见，在上面的代码中添加了id ：如果按钮是使用前面显示的方法仅由Javascript生成的，则我们可以放弃添加的属性，因为我们已经有对该元素的引用。

Then, move the event inside a listener, in an external script:

然后，将事件在外部脚本中的侦听器内移动：

funky.addEventListener('click', function() { funkalicious(); });

This abstracts the script away from the button, making it far easier to maintain.

这样可以使脚本远离按钮，从而使其易于维护。

适当时，添加标题 (When Appropriate, Add a title)

title can be used to enhance a button:

title可用于增强按钮：

<button type=button id=funky title="Change the music track">Get Funky</button>

This explanation will appear as a tooltip when the user hovers over the element; text-to-speech devices will read it out loud.

当用户将鼠标悬停在元素上时，此说明将作为工具提示出现。 文字转语音设备会大声朗读。

考虑考虑改变国家 (Alter States With Consideration)

When tabbed to, buttons will have an outline applied, with another style applied momentarily as the mouse is held down on the element. As accessibility considerations, these should be altered with great reluctance: if you do change a state, ensure that the button remains visibly different in that state.

切换至选项卡时，按钮将应用outline ，并在鼠标按住元素时立即应用另一种样式。 作为可访问性方面的考虑因素，应该不情愿地进行更改：如果要更改状态，请确保在该状态下按钮在外观上保持明显不同。

A button element without padding zoomed in Chrome

没有填充的按钮元素在Chrome中放大

其他CSS？ 去野外 (Other CSS? Go Wild)

As you’ll see in tomorrow’s article, it’s very possible to use CSS to transform the appearance of a <button> element completely: they don’t have to be gray capsules on a page. At a basic level, I would provide padding for the element, otherwise Chrome will tend to scale it strangely as the page is zoomed in:

正如您将在明天的文章中看到的那样，很有可能使用CSS完全改变<button>元素的外观：它们不必在页面上是灰色的胶囊。 在基本级别上，我将为元素提供padding ，否则，随着页面的放大，Chrome往往会奇怪地缩放它：

button { padding: .3rem; }

翻译自: https://thenewcode.com/884/The-Humble-Button-Element