：按钮元素

试一试

Add to favorites

.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 属性指定的控制 所控制的元素上要执行的操作。可能的值有

"show-modal"

按钮将以模态形式显示一个

。如果对话框已经是模态的，则不采取任何操作。这相当于以声明方式在

元素上调用 HTMLDialogElement.showModal() 方法。

"close"

按钮将关闭一个

元素。如果对话框已关闭，则不采取任何操作。这相当于以声明方式在

元素上调用 HTMLDialogElement.close() 方法。

"request-close"

按钮将触发

元素上的 cancel 事件，以请求浏览器关闭它，然后是 close 事件。这与 close 命令不同，因为作者可以在 cancel 事件上调用 Event.preventDefault() 以阻止

关闭。如果对话框已关闭，则不采取任何操作。这相当于以声明方式在

元素上调用 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

将

元素转换为命令按钮，通过发出按钮的 command 属性中指定的命令来控制给定的交互式元素。commandfor 属性将要控制的元素的 ID 作为其值。这是 popovertarget 的更通用版本。

disabled

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

form

将按钮与其关联的

元素（其 *表单所有者*）。此属性的值必须是同一文档中 的 id。（如果未设置此属性，则

将与其祖先 元素（如果有）关联。）

此属性允许您将

元素与文档中任何位置的 关联，而不仅仅是 内部。它还可以覆盖祖先 元素。

formaction

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

formenctype

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

application/x-www-form-urlencoded：如果未使用该属性，则为默认值。

multipart/form-data：用于提交 元素，其 type 属性设置为 file。

text/plain：指定为调试辅助工具；不应用于实际表单提交。

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

formmethod

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

post：数据从表单发送到服务器时包含在 HTTP 请求的正文中。当表单包含不应公开的信息（例如登录凭据）时使用。

get：表单数据附加到表单的 action URL，以 ? 作为分隔符，然后将生成的 URL 发送到服务器。当表单没有副作用时使用此方法，例如搜索表单。

dialog：此方法用于指示按钮关闭与其关联的对话框，并且根本不传输表单数据。

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

formnovalidate

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

此属性也适用于 和 元素。

formtarget

如果按钮是提交按钮，则此属性是作者定义的名称或标准化的、以下划线为前缀的关键字，指示从提交表单收到的响应显示在哪里。这是*浏览上下文*（标签页、窗口或