尝试一下
.controls {
padding-top: 1rem;
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: 1fr 2fr;
gap: 0.7rem;
}
label {
font-size: 0.8rem;
justify-self: end;
}
input[type="reset"],
input[type="submit"] {
width: 5rem;
justify-self: end;
}
input[type="reset"] {
grid-column: 2;
grid-row: 2;
}
input[type="submit"] {
grid-column: 2;
grid-row: 3;
}
备注：你应该尽量避免在表单中包含重置按钮。它们很少具有实用性，事实上更有可能使用户因误点而感到沮丧（通常是在尝试单击提交按钮时）。
值
用做按钮标签的字符串
事件
click
支持的常用属性
type 和 value
IDL 属性
value
DOM 接口
HTMLInputElement
方法
无
值
元素的 value 属性包含一个用做按钮标签的字符串，诸如 reset 之类的按钮没有其他值。
设置 value 属性
html
省略 value 属性
如果你未指定 value，则会获得一个带有默认标签的按钮（通常为“重置”，但这将根据用户代理而有所不同）：
html
使用重置按钮
按钮用于重置表单。如果要创建自定义按钮，并使用 JavaScript 自定义行为，你需要使用 ，或者最好使用
一个简单的重置按钮
我们将从创建一个简单的重置按钮开始：
html
上述代码会渲染成这样：
尝试在文本字段中输入一些文本，然后点击重置按钮。
添加重置键盘快捷键
像对 元素所做的那样，向重置按钮添加一个快捷键是非常有意义的，且可以通过 accesskey 全局属性来实现。
在这个例子中， r 被指定为访问键（需要按下 r 键与浏览器或操作系统的特定键相组合；关于这些命令的详细列表请参见 accesskey）。
html
上面的示例的问题在于，用户无法知道访问键是什么！事实上，是因为修饰符通常是非标准的，以避免与系统和软件快捷键冲突。在构建网站时，请确保以不干扰网站设计的方式提供此信息（例如，通过提供易于访问的链接来指向有关网站访问键的信息）。向按钮添加提示（也可以使用 title 属性），尽管这并不是出于无障碍目的的完善的解决方案。
禁用和启用重置按钮
要禁用重置按钮，只需在其上指定 disabled 全局属性，如下所示：
html
你可以在运行时通过简单地将 disable 设置为 true 或 false 来启用和禁用按钮。在 JavaScript 中，使用 btn.disabled = true 或 btn.disabled = false。
备注：有关启用和禁用按钮的更多概念，请参见 页面。
验证
按钮并不参与约束性验证，它们并没有实际的约束价值。
示例
我们在上面已经提供了一些简单的示例。实际上关于重置按钮并没有更多的内容了。
规范
Specification
HTML# reset-button-state-(type=reset)
浏览器兼容性
参见
和 HTMLInputElement 实现接口
表单和按钮
HTML 表单
表单控件 CSS 兼容性列表
Help improve MDN
Was this page helpful to you?
Yes
No
Learn how to contribute
This page was last modified on 2025年8月6日 by MDN contributors.
View this page on GitHub • Report a problem with this content