<button>:按钮元素

¥Attributes

该元素的属性包括 全局属性。

¥This element's attributes include the global attributes.

autofocus

此布尔属性指定按钮在页面加载时应输入 focus。文档中只有一个元素可以具有此属性。

disabled

此布尔属性阻止用户与按钮交互：无法按下或聚焦它。

form

将按钮与其（其表单所有者）关联的 <form> 元素。该属性的值必须是同一文档中 <form> 的 id。（如果未设置此属性，则 <button> 与其祖级 <form> 元素（如果有）相关联。）

此属性允许你在文档中的任何位置将 <button> 元素与 <form> 相关联，而不仅仅是在 <form> 内部。它还可以覆盖祖级 <form> 元素。

formaction

处理按钮提交的信息的 URL。覆盖按钮表单所有者的 action 属性。如果没有表单所有者，则不执行任何操作。

formenctype

如果按钮是提交按钮（位于 <form> 内部/与 <form> 关联并且没有 type="button"），则指定如何对提交的表单数据进行编码。可能的值：

• application/x-www-form-urlencoded：如果未使用该属性，则使用默认值。
• multipart/form-data：用于提交 <input> 元素，并将其 type 属性设置为 file。
• text/plain：指定为调试辅助工具；不应该用于真正的表单提交。

如果指定此属性，它将覆盖按钮表单所有者的 enctype 属性。

formmethod

如果按钮是提交按钮（它位于 <form> 内部/与 <form> 关联并且没有 type="button"），则此属性指定用于提交表单的 HTTP 方式。可能的值：

• post：当发送到服务器时，表单中的数据包含在 HTTP 请求的正文中。当表单包含不应公开的信息（例如登录凭据）时使用。
• get：表单数据附加到表单的 action URL，并以 ? 作为分隔符，并将生成的 URL 发送到服务器。当表单 没有副作用 时使用此方法，例如搜索表单。
• dialog：该方法用于指示按钮关闭与其关联的 dialog，并且根本不传输表单数据。

如果指定，此属性将覆盖按钮表单所有者的 method 属性。

formnovalidate

如果按钮是提交按钮，则此布尔属性指定表单在提交时不是 validated。如果指定此属性，它将覆盖按钮表单所有者的 novalidate 属性。

此属性也可用于 <input type="image"> 和 <input type="submit"> 元素。

formtarget

如果按钮是提交按钮，则此属性是作者定义的名称或标准化的下划线前缀关键字，指示在何处显示提交表单的响应。这是浏览上下文（选项卡、窗口或 <iframe>）的 name 或关键字。如果指定此属性，它将覆盖按钮表单所有者的 target 属性。以下关键字具有特殊含义：

• _self：将响应加载到与当前浏览上下文相同的浏览上下文中。如果未指定该属性，则这是默认值。
• _blank：将响应加载到新的未命名浏览上下文中 - 通常是新选项卡或窗口，具体取决于用户的浏览器设置。
• _parent：将响应加载到当前浏览上下文的父浏览上下文中。如果没有父级，则此选项的行为与 _self 相同。
• _top：将响应加载到顶层浏览上下文（即，作为当前浏览上下文的祖级且没有父级的浏览上下文）。如果没有父级，则此选项的行为与 _self 相同。

name

当使用按钮提交表单时，按钮的名称与按钮的 value 成对提交，作为表单数据的一部分。

popovertarget

将 <button> 元素变成弹出框控制按钮；将要控制的弹出框元素的 ID 作为其值。有关更多详细信息，请参阅 Popover API 登陆页面。

popovertargetaction

指定要对由控件 <button> 控制的弹出框元素执行的操作。可能的值为：

"hide"

该按钮将隐藏显示的弹出窗口。如果你尝试隐藏已经隐藏的弹出窗口，则不会采取任何操作。

"show"

该按钮将显示一个隐藏的弹出窗口。如果你尝试显示已显示的弹出窗口，则不会采取任何操作。

"toggle"

该按钮将在显示和隐藏之间切换弹出窗口。如果弹出窗口隐藏，则会显示；如果弹出窗口显示，它将被隐藏。如果省略 popovertargetaction，则 "toggle" 是将由控制按钮执行的默认操作。

type

按钮的默认行为。可能的值为：

• submit：该按钮将表单数据提交到服务器。如果未为与 <form> 关联的按钮指定该属性，或者该属性为空或无效值，则这是默认值。
• reset：该按钮将所有控件重置为其初始值，例如 <输入类型="reset">。（这种行为往往会惹恼用户。）
• button：该按钮没有默认行为，默认情况下按下时不会执行任何操作。它可以让客户端脚本监听元素的事件，并在事件发生时触发这些事件。

value

定义与表单数据一起提交时与按钮的 name 关联的值。当使用此按钮提交表单时，该值将在 params 中传递到服务器。

¥Notes

设置了属性 formaction 但没有关联表单的提交按钮不会执行任何操作。你必须设置表单所有者，方法是将其封装在 <form> 中，或者将属性 form 设置为表单的 id。

¥A submit button with the attribute formaction set, but without an associated form does nothing. You have to set a form owner, either by wrapping it in a <form> or set the attribute form to the id of the form.

<button> 元素比 <input> 元素更容易设计样式。你可以添加内部 HTML 内容（例如 <i>、<br>，甚至 <img>），并使用 ::after 和 ::before 伪元素进行复杂渲染。

¥<button> elements are much easier to style than <input> elements. You can add inner HTML content (think <i>, <br>, or even <img>), and use ::after and ::before pseudo-elements for complex rendering.

如果你的按钮不是用于向服务器提交表单数据，请务必将其 type 属性设置为 button。否则，他们将尝试提交表单数据并加载（不存在的）响应，可能会破坏文档的当前状态。

¥If your buttons are not for submitting form data to a server, be sure to set their type attribute to button. Otherwise, they will try to submit form data and to load the (nonexistent) response, possibly destroying the current state of the document.

虽然 <button type="button"> 没有默认行为，但可以编写事件处理程序脚本来触发行为。激活的按钮可以使用 JavaScript 执行可编程操作，例如从列表中删除项目。

¥While <button type="button"> has no default behavior, event handlers can be scripted to trigger behaviors. An activated button can perform programmable actions using JavaScript, such as removing an item from a list.

默认情况下，用户代理将按钮样式设置为 display: flow-root，这将建立一个新的 块格式化上下文 并将按钮的子元素水平和垂直居中，只要它们不会溢出。如果按钮定义为弹性或网格容器，则子项将表现为弹性或网格项。设置为 display: inline 的按钮将被设置为与值设置为 display: inline-block 相同的样式。

¥By default, user agents style buttons as display: flow-root, which establishes a new block formatting context and centers the button's children both horizontally and vertically as long as they do not overflow. If the button is defined as a flex or grid container, the children will behave as flex or grid items. A button set to display: inline will be styled as if the value were set to display: inline-block.

¥Accessibility

¥Icon buttons

仅显示图标的按钮没有 accessible name。可访问的名称为辅助技术（例如屏幕阅读器）提供了在解析文档并生成 可访问性树 时访问的信息。然后，辅助技术使用辅助功能树来导航和操作页面内容。

¥Buttons that only display an icon do not have an accessible name. Accessible names provide information for assistive technology, such as screen readers, to access when they parse the document and generate an accessibility tree. Assistive technology then uses the accessibility tree to navigate and manipulate page content.

要为图标按钮指定一个易于访问的名称，请将文本放入 <button> 元素中，以简明地描述按钮的功能。

¥To give an icon button an accessible name, put text in the <button> element that concisely describes the button's functionality.

示例

¥Examples

<button name="favorite">
  <svg aria-hidden="true" viewBox="0 0 10 10">
    <path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z" />
  </svg>
  Add to favorites
</button>

结果

¥Result

如果你想在视觉上隐藏按钮的文本，一种可行的方法是使用 CSS 属性的组合 将其从屏幕上视觉上删除，但保持其可通过辅助技术进行解析。

¥If you want to visually hide the button's text, an accessible way to do so is to use a combination of CSS properties to remove it visually from the screen, but keep it parsable by assistive technology.

但是，值得注意的是，让按钮文本可见可以帮助那些可能不熟悉图标含义或不理解按钮用途的人。这对于那些技术不够精通或对按钮使用的图标有不同文化解释的人来说尤其重要。

¥However, it is worth noting that leaving the button text visible can help people who may not be familiar with the icon's meaning or understand the button's purpose. This is especially important for people who are not technologically sophisticated or who may have different cultural interpretations of the icon the button uses.

• 什么是可访问的名称？| 帕切洛集团
• MDN 了解 WCAG，指南 4.1 解释
• 了解成功标准 4.1.2 | W3C 了解 WCAG 2.0

¥Size and Proximity

尺寸

¥Size

按钮等交互元素应具有足够大的区域以便于激活。这对各种各样的人都有帮助，包括有运动控制问题的人以及使用手写笔或手指等非精确输入形式的人。建议最小交互尺寸为 44×44 CSS 像素。

¥Interactive elements such as buttons should have an area large enough to be easy to activate. This helps a variety of people, including people with motor control issues and people using non-precise forms of input such as a stylus or fingers. A minimum interactive size of 44×44 CSS pixels is recommended.

• 了解成功标准 2.5.5：目标尺寸| W3C 了解 WCAG 2.1
• 目标大小和 2.5.5 | 阿德里安·罗塞利
• 快速测试：大型触摸目标 - A11Y 项目

接近

¥Proximity

大量的交互内容（包括按钮）在视觉上彼此靠近放置，应该有空间将它们分开。这种间距对于遇到运动控制问题的人来说是有益的，他们可能会意外激活错误的交互内容。

¥Large amounts of interactive content — including buttons — placed in close visual proximity to each other should have space separating them. This spacing is beneficial for people who are experiencing motor control issues, who may accidentally activate the wrong interactive content.

可以使用 CSS 属性（例如 margin）创建间距。

¥Spacing may be created using CSS properties such as margin.

• 手颤抖和巨型按钮问题 - 轴实验室

¥ARIA state information

为了描述按钮的状态，要使用的正确 ARIA 属性是 aria-pressed，而不是 aria-checked 或 aria-selected。要了解更多信息，请阅读有关 ARIA 按钮作用 的信息。

¥To describe the state of a button the correct ARIA attribute to use is aria-pressed and not aria-checked or aria-selected. To find out more read the information about the ARIA button role.

¥Button styles

最好不要覆盖具有焦点的元素的默认焦点环。如果按钮样式被覆盖，则必须确保焦点状态具有足够的对比度，以便视力低下的人可以感知它，认知能力有差异的人可以理解它。

¥It is best not to override the default focus ring for elements that have focus. If the button styles are overridden, it is important to ensure that the focus state has enough contrast so that people experiencing low vision conditions can perceive it and people with cognitive differences will understand it.

仅当用户代理的启发式方法确定应高亮焦点时（例如当 <button> 接收键盘焦点时），才可以使用 :focus-visible 伪类将样式应用于具有 :focus 的元素。请参阅 :focus 与 :focus-visible 了解更多信息。

¥The :focus-visible pseudo-class can be used to apply styles to an element that has :focus only when the user agent's heuristics determine that the focus should be highlighted, such as when a <button> receives keyboard focus. See :focus vs :focus-visible for more information.

颜色对比度是通过将按钮文本和背景颜色值的亮度与按钮所在的背景进行比较来确定的。要满足当前 网页内容无障碍指南 (WCAG)，文本内容需要 4.5:1 的比例，大文本需要 3:1 的比例。（大文本定义为 18.66px 和 bold 或更大，或者 24px 或更大。）

¥Color contrast ratio is determined by comparing the luminosity of the button text and background color values to the background the button is placed on. To meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for large text. (Large text is defined as 18.66px and bold or larger, or 24px or larger.)

• 网络目标：颜色对比检查器
• MDN 理解 WCAG，指南 1.4 解释
• 了解成功标准 1.4.3 | W3C 了解 WCAG 2.0

¥Clicking and focus

单击 <button> 或 <input> 按钮类型是否会导致其（默认情况下）获得焦点，因浏览器和操作系统而异。大多数浏览器确实将焦点放在被单击的按钮上，但是 Safari 在设计上不支持。

¥Whether clicking on a <button> or <input> button types causes it to (by default) become focused varies by browser and OS. Most browsers do give focus to a button being clicked, but Safari does not, by design.

¥Examples

<button name="button">Press me</button>

¥Technical summary