<input type="reset">

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

类型为 reset 的 <input> 元素会渲染成按钮，默认的 click 事件处理器会将表单中的所有输入重置为其初始值。

试一试

<form>
  <div class="controls">
    <label for="id">User ID:</label>
    <input type="text" id="id" name="id" />

    <input type="reset" value="Reset" />
    <input type="submit" value="Submit" />
  </div>
</form>

.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;
}

注意：通常应避免在表单中包含重置按钮。它们很少有用，反而更容易使用户不小心点击（通常是在试图点击提交按钮时）而感到沮丧。

值

<input type="reset"> 元素的 value 属性包含一个字符串，该字符串用作按钮的标签，为按钮提供可访问的描述。除了这个，像 reset 这样的按钮没有其他值。

设置 value 属性

html

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

省略 value 属性

如果未指定 value，则会得到一个带有默认标签的按钮（通常是“Reset”，但这取决于用户代理）。

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 />

您可以通过将 disabled 设置为 true 或 false 来在运行时启用和禁用按钮；在 JavaScript 中，这看起来像 btn.disabled = true 或 btn.disabled = false。

注意：有关启用和禁用按钮的更多想法，请参阅 <input type="button"> 页面。

值	用作按钮标签的字符串
事件	`click`
支持的常见属性	`type` 和 `value`
IDL 属性	`value`
DOM 接口	`HTMLInputElement`
方法	None
隐式 ARIA 角色	`button`