<button>: 按钮元素

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

autofocus

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

disabled

此布尔属性阻止用户与按钮交互：按钮无法被按下或获得焦点。

form

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

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

formaction

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

formenctype

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

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

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

formmethod

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

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

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

formnovalidate

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

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

formtarget

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

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

name

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

popovertarget

将<button>元素转换为弹出式控件按钮；将要控制的弹出式元素的 ID 作为其值。有关详细信息，请参阅弹出式 API着陆页。

popovertargetaction

指定对由控制<button>控制的弹出式元素执行的操作。可能的取值有

"hide"

按钮将隐藏显示的弹出式窗口。如果您尝试隐藏已隐藏的弹出式窗口，则不会执行任何操作。

"show"

按钮将显示隐藏的弹出式窗口。如果您尝试显示已显示的弹出式窗口，则不会执行任何操作。

"toggle"

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

type

按钮的默认行为。可能的取值有

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

value

定义与按钮的name关联的值，当按钮与表单数据一起提交时。当使用此按钮提交表单时，此值将作为参数传递给服务器。

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

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

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

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

默认情况下，用户代理将按钮的样式设置为display: flow-root，这将建立新的块级格式化上下文，并水平和垂直居中按钮的子元素，只要它们没有溢出。如果按钮被定义为 flex 或 grid 容器，子元素将表现为 flex 或 grid 项目。设置为display: inline的按钮将被设置为样式，就像其值为display: inline-block一样。

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

要为图标按钮提供可访问的名称，请在<button>元素中放置简明描述按钮功能的文本。

示例

<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>

结果

如果您想在视觉上隐藏按钮的文本，一个可访问的方式是使用CSS 属性组合将其在视觉上从屏幕中移除，但保持辅助技术可解析。

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

• 什么是可访问的名称？| Paciello Group
• MDN 了解 WCAG，指南 4.1 说明
• 了解成功标准 4.1.2 | W3C 了解 WCAG 2.0

大小

按钮等交互式元素应该具有足够大的区域以方便激活。这有助于各种人，包括有运动控制问题的人和使用非精确输入形式（如触控笔或手指）的人。建议最小交互大小为 44×44CSS 像素。

• 了解成功标准 2.5.5：目标大小 | W3C 了解 WCAG 2.1
• 目标大小和 2.5.5 | Adrian Roselli
• 快速测试：大型触控目标 - A11Y 项目

距离

大量的交互式内容（包括按钮）以紧密的视觉距离彼此放置，应该有空间将它们隔开。这种间距有利于有运动控制问题的人，他们可能会不小心激活错误的交互式内容。

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

• 手部震颤和巨型按钮问题 - Axess Lab

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

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

:focus-visible伪类可用于将样式应用于具有:focus的元素，仅当用户代理的启发式算法确定应突出显示焦点时，例如当<button>接收到键盘焦点时。有关更多信息，请参阅:focus vs :focus-visible。

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

• WebAIM：颜色对比度检查器
• MDN 了解 WCAG，指南 1.4 说明
• 了解成功标准 1.4.3 | W3C 了解 WCAG 2.0

点击<button>或<input>按钮类型是否会导致它（默认情况下）获得焦点，这取决于浏览器和操作系统。大多数浏览器确实会将焦点赋予被点击的按钮，但Safari 不会，这是出于设计原因。