<input type="reset">

reset 类型的 <input> 元素将渲染为按钮,且带有默认的 click 事件,用于将表单中的所有输入重置为其初始值。

尝试一下

备注: 你应该尽量避免在表单中包含重置按钮。它们很少具有实用性,事实上更有可能使用户因误点而感到沮丧(通常是在尝试单击提交按钮时)。

用做按钮标签的字符串
事件 click
支持的常用属性 typevalue
IDL 属性 value
DOM 接口 HTMLInputElement
方法

<input type="reset"> 元素的 value 属性包含一个用做按钮标签的字符串,诸如 reset 之类的按钮没有其他值。

设置 value 属性

html
<input type="reset" value="Reset the form" />

省略 value 属性

如果你未指定 value,则会获得一个带有默认标签的按钮(通常为“重置”,但这将根据用户代理而有所不同):

html
<input type="reset" />

使用重置按钮

<input type="reset"> 按钮用于重置表单。如果要创建自定义按钮,并使用 JavaScript 自定义行为,你需要使用 <input type="button">,或者最好使用 <button> 元素。

一个简单的重置按钮

我们将从创建一个简单的重置按钮开始:

html
<form>
  <div>
    <label for="example">Type in some sample text</label>
    <input id="example" type="text" />
  </div>
  <div>
    <input type="reset" value="Reset the form" />
  </div>
</form>

上述代码会渲染成这样:

尝试在文本字段中输入一些文本,然后点击重置按钮。

添加重置键盘快捷键

像对 <input> 元素所做的那样,向重置按钮添加一个快捷键是非常有意义的,且可以通过 accesskey 全局属性来实现。

在这个例子中, r 被指定为访问键(需要按下 r 键与浏览器或操作系统的特定键相组合;关于这些命令的详细列表请参见 accesskey)。

html
<form>
  <div>
    <label for="example">Type in some sample text</label>
    <input id="example" type="text" />
  </div>
  <div>
    <input type="reset" value="Reset the form" accesskey="r" />
  </div>
</form>

上面的示例的问题在于,用户无法知道访问键是什么!事实上,是因为修饰符通常是非标准的,以避免与系统和软件快捷键冲突。在构建网站时,请确保以不干扰网站设计的方式提供此信息(例如,通过提供易于访问的链接来指向有关网站访问键的信息)。向按钮添加提示(也可以使用 title 属性),尽管这并不是出于无障碍目的的完善的解决方案。

禁用和启用重置按钮

要禁用重置按钮,只需在其上指定 disabled 全局属性,如下所示:

html
<input type="reset" value="Disabled" disabled />

你可以在运行时通过简单地将 disable 设置为 truefalse 来启用和禁用按钮。在 JavaScript 中,使用 btn.disabled = truebtn.disabled = false

备注: 有关启用和禁用按钮的更多概念,请参见 <input type="button"> 页面。

验证

按钮并不参与约束性验证,它们并没有实际的约束价值。

示例

我们在上面已经提供了一些简单的示例。实际上关于重置按钮并没有更多的内容了。

规范

Specification
HTML Standard
# reset-button-state-(type=reset)

浏览器兼容性

BCD tables only load in the browser

参见