input type="reset"

<input>类型的元素"reset"被渲染为重置按钮 - 单击一个将重置所有输入的形式，它是其初始值的一部分。

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

注意：通常不建议在表单中包含重置按钮。它们很少有用，而且当意外按下而不是主动按下提交按钮时往往会使用户沮丧。

值

一个<input type="reset">元素的value属性包含DOMString一个用作按钮的标签。

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

如果你不指定一个value，你会得到一个默认标签Reset的按钮：

<input type="reset">

使用重置按钮

<input type="reset">按钮用于重置表单。如果你想创建一个自定义的按钮，然后使用JavaScript自定义行为，则需要使用<input type="button">或更好的<button>元素。

一个简单的重置按钮

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

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

这呈现如下：

尝试在文本字段中输入一些文本，然后按下重置按钮。

添加重置键盘快捷键

键盘快捷键可让用户使用键盘上的键或键组合来触发按钮。要将键盘快捷键添加到重置按钮可以使用accesskey全局属性。

在这个例子中，r被指定为访问键（您需要按r加上您的浏览器/操作系统组合的特定修饰键;请参阅accesskey这些键的有用列表）。

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

注意：以上例子的问题当然是用户不知道访问密钥是什么！在真实网站中，您必须以不干扰网站设计的方式提供此信息（例如，通过提供易于访问的链接指向有关网站访问键的信息）。

禁用并启用重置按钮

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

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

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

注意：请参阅<input type="button">页面以获取有关启用/禁用按钮的更多信息。

注：Firefox将不像其他的浏览器，默认情况下，坚持动态禁用状态一的<button>整个页面加载。使用该autocomplete属性来控制此功能。

验证

按钮不参与约束验证; 他们没有真正的价值被约束。

示例

我们已经包含上面的简单例子。关于重置按钮没有什么可说的。

规范

浏览器兼容性