<button>：按钮元素
Baseline 广泛可用 *
<button> HTML 元素是一种交互式元素，用户可以使用鼠标、键盘、手指、语音命令或其他辅助技术来激活它。激活后，它会执行一个动作，例如提交表单或打开对话框。
试一试
<button class="favorite styled" type="button">Add to favorites</button>
.styled {
border: 0;
line-height: 2.5;
padding: 0 20px;
font-size: 1rem;
text-align: center;
color: white;
text-shadow: 1px 1px 1px black;
border-radius: 10px;
background-color: tomato;
background-image: linear-gradient(
to top left,
rgb(0 0 0 / 0.2),
rgb(0 0 0 / 0.2) 30%,
transparent
);
box-shadow:
inset 2px 2px 3px rgb(255 255 255 / 0.6),
inset -2px -2px 3px rgb(0 0 0 / 0.6);
}
.styled:hover {
background-color: red;
}
.styled:active {
box-shadow:
inset -2px -2px 3px rgb(255 255 255 / 0.6),
inset 2px 2px 3px rgb(0 0 0 / 0.6);
}
属性
此元素的属性包括全局属性。
autofocus-
此布尔属性指定页面加载时按钮应具有输入焦点。文档中只能有一个元素具有此属性。
command-
指定通过
commandfor属性指定的控制<button>所控制的元素上要执行的操作。可能的值有"show-modal"-
按钮将以模态形式显示一个
<dialog>。如果对话框已经是模态的，则不采取任何操作。这相当于以声明方式在<dialog>元素上调用HTMLDialogElement.showModal()方法。 "close"-
按钮将关闭一个
<dialog>元素。如果对话框已关闭，则不采取任何操作。这相当于以声明方式在<dialog>元素上调用HTMLDialogElement.close()方法。 "request-close"-
按钮将触发
<dialog>元素上的cancel事件，以请求浏览器关闭它，然后是close事件。这与close命令不同，因为作者可以在cancel事件上调用Event.preventDefault()以阻止<dialog>关闭。如果对话框已关闭，则不采取任何操作。这相当于以声明方式在<dialog>元素上调用HTMLDialogElement.requestClose()方法。 "show-popover"-
按钮将显示一个隐藏的弹出框。如果您尝试显示一个已显示的弹出框，则不会采取任何操作。有关更多详细信息，请参阅 Popover API。这等同于为
popovertargetaction属性设置show值，并且还提供了以声明方式在弹出框元素上调用HTMLElement.showPopover()方法的功能。 "hide-popover"-
按钮将隐藏一个正在显示的弹出框。如果您尝试隐藏一个已隐藏的弹出框，则不会采取任何操作。有关更多详细信息，请参阅 Popover API。这等同于为
popovertargetaction属性设置hide值，并且还提供了以声明方式在弹出框元素上调用HTMLElement.hidePopover()方法的功能。 "toggle-popover"-
按钮将切换弹出框在显示和隐藏之间。如果弹出框是隐藏的，它将被显示；如果弹出框是显示的，它将被隐藏。有关更多详细信息，请参阅 Popover API。这等同于为
popovertargetaction属性设置toggle值，并且还提供了以声明方式在弹出框元素上调用HTMLElement.togglePopover()方法的功能。 - 自定义值
-
此属性可以表示以两个连字符 (
--) 为前缀的自定义值。具有自定义值的按钮将在受控元素上分派CommandEvent。
commandfor-
将
<button>元素转换为命令按钮，通过发出按钮的command属性中指定的命令来控制给定的交互式元素。commandfor属性将要控制的元素的 ID 作为其值。这是popovertarget的更通用版本。 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：表单数据附加到表单的actionURL，以?作为分隔符，然后将生成的 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 作为其值。使用popovertarget属性在弹出框及其调用按钮之间建立关系具有两个额外的有用效果- 浏览器在弹出窗口和调用者之间创建隐式的
aria-details和aria-expanded关系，并在显示时将弹出窗口放置在键盘焦点导航顺序中的逻辑位置。这使得弹出窗口对键盘和辅助技术 (AT) 用户更易于访问（另请参阅 弹出可访问性功能）。 - 浏览器在两者之间创建了一个隐式锚点引用，使得使用 CSS 锚点定位 来相对于其控件定位弹出窗口非常方便。有关更多详细信息，请参阅 弹出锚点定位。
- 浏览器在弹出窗口和调用者之间创建隐式的
popovertargetaction-
指定在控制
<button>所控制的弹出框元素上要执行的操作。可能的值为 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，这会建立一个新的块级格式化上下文，并使按钮的子元素在不溢出的情况下水平和垂直居中。如果按钮定义为弹性或网格容器，则子元素将表现为弹性或网格项。设置为 display: inline 的按钮将被样式化，就像该值设置为 display: inline-block 一样。
无障碍
图标按钮
只显示图标的按钮没有可访问名称。可访问名称为辅助技术（例如屏幕阅读器）提供信息，以便它们在解析文档并生成可访问性树时访问。然后，辅助技术使用可访问性树来导航和操作页面内容。
要为图标按钮提供可访问名称，请在 <button> 元素中放置简明描述按钮功能的文本。
示例
<button name="favorite">
<svg fill="black" viewBox="0 0 42 42">
<path
d="M21,1c1.081,0,5.141,12.315,6.201,13.126s13.461,1.053,13.791,2.137 c0.34,1.087-9.561,8.938-9.961,10.252c-0.409,1.307,
3.202,13.769,2.331,14.442c-0.879,0.673-11.05-6.79-12.361-6.79 c-1.311,0-11.481,7.463-12.36,6.79c-0.871-0.674,2.739-13.136,
2.329-14.442c-0.399-1.313-10.3-9.165-9.96-10.252 c0.33-1.084,12.731-1.326,13.791-2.137S19.91,1,21,1z"></path>
</svg>
Add to favorites
</button>
结果
如果您想在视觉上隐藏按钮文本，一种可访问的方法是使用CSS 属性组合，在视觉上将其从屏幕上移除，但保持辅助技术可解析。
然而，值得注意的是，保持按钮文本可见可以帮助那些可能不熟悉图标含义或不理解按钮用途的人。这对于不熟悉技术或可能对按钮使用的图标有不同文化解释的人尤其重要。
大小和距离
大小
交互元素（例如按钮）应具有足够大的区域以便于激活。这有助于各种人群，包括有运动控制问题的人和使用非精确输入形式（例如触控笔或手指）的人。建议最小交互尺寸为 44×44 CSS 像素。
临近度
大量交互内容（包括按钮）彼此靠近放置时，应留有间距。这种间距对有运动控制问题的人有益，他们可能会不小心激活错误的交互内容。
可以使用 CSS 属性（例如 margin）创建间距。
ARIA 状态信息
要描述按钮的状态，正确的 ARIA 属性是 aria-pressed，而不是 aria-checked 或 aria-selected。要了解更多信息，请阅读有关 ARIA 按钮角色的信息。
按钮样式
最好不要覆盖具有焦点的元素的默认焦点环。如果覆盖了按钮样式，则重要的是要确保焦点状态具有足够的对比度，以便视力低下的人可以感知它，并且有认知差异的人会理解它。
:focus-visible 伪类可用于仅在用户代理的启发式算法确定应突出显示焦点时（例如，当 <button> 接收到键盘焦点时）将样式应用于具有 :focus 的元素。有关更多信息，请参阅 :focus vs :focus-visible。
颜色对比度由比较按钮文本和背景颜色值的亮度与按钮放置的背景的亮度来确定。为了满足当前的Web 内容可访问性指南 (WCAG)，文本内容的比例要求为 4.5:1，大文本的比例要求为 3:1。（大文本定义为 18.66 像素及粗体或更大，或 24 像素或更大。）
点击和焦点
点击 <button> 或 <input> 按钮类型是否（默认情况下）导致其获得焦点因浏览器和操作系统而异。大多数浏览器都会将焦点赋予被点击的按钮，但 Safari 在设计上不这样做。
示例
创建一个基本按钮
此示例创建一个可点击的按钮。type="button" 属性确保按钮没有默认行为。您可以使用 JavaScript 或 command 和 commandfor 等属性使此按钮具有交互性。
<button type="button" name="button">I'm a button</button>
使用 command 属性的 request-close 值
此示例中的对话框有两个单选按钮，用于控制对话框是否可以关闭。选择是或否，然后点击请求关闭以尝试关闭对话框。如果选择是，对话框将关闭；如果选择否，对话框将保持打开状态并显示一条消息。
<button type="button" commandfor="mydialog" command="show-modal">
Open Dialog
</button>
<dialog id="mydialog">
<div class="wrapper">
<form>
<fieldset>
<legend>Allow this dialog to close when requested?</legend>
<div>
<input type="radio" id="no" name="close" value="no" checked />
<label for="no">No</label>
</div>
<div>
<input type="radio" id="yes" name="close" value="yes" />
<label for="yes">Yes</label>
</div>
</fieldset>
</form>
<button commandfor="mydialog" command="request-close">
Request to Close
</button>
<p class="warning" hidden>You must choose "Yes" to close this dialog.</p>
</div>
</dialog>
const dialog = document.querySelector("dialog");
const radio = document.querySelector("form").elements["close"];
const warning = document.querySelector(".warning");
dialog.addEventListener("cancel", (e) => {
if (!e.cancelable) return;
if (radio.value === "no") {
warning.hidden = false;
e.preventDefault();
} else {
warning.hidden = true;
}
});
打开对话框按钮使用 command="show-modal" 打开 <dialog> 元素。
请求关闭按钮具有 command="request-close"，它使用 commandfor="mydialog" 属性定位 <dialog> 元素。当点击它时，它会询问 <dialog> 是否可以关闭（与 command="close" 属性不同，后者会立即关闭 <dialog>）。这会使用 cancel 事件检查 <dialog> 是否可取消。
当事件是 cancelable 时，会检查单选按钮的值
- 如果设置为
yes，对话框将关闭。 - 如果设置为
no，则警告上的hidden属性将关闭，并调用preventDefault()方法，这会阻止默认的<dialog>关闭行为。
技术摘要
| 内容类别 | 流内容、短语内容、交互式内容、列出、可标记和可提交表单关联元素，可感知内容。 |
|---|---|
| 允许内容 |
短语内容但不能有交互式内容。如果 <button> 是可定制选择元素的第一个子元素，则它还可以包含零个或一个 <selectedcontent> 元素。 |
| 标签省略 | 无，起始标签和结束标签都必须存在。 |
| 允许父级 | 任何接受短语内容的元素。 |
| 隐式 ARIA 角色 |
button
|
| 允许的 ARIA 角色 |
checkbox、combobox、link、menuitem、menuitemcheckbox、menuitemradio、option、radio、switch、tab |
| DOM 接口 | HTMLButtonElement |
规范
| 规范 |
|---|
| HTML # 按钮元素 |
浏览器兼容性
加载中…