<input type="reset">

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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
# reset-button-state-(type=reset)

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
type="reset"

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

参见