--- title: slug: Web/HTML/Element/Input/reset tags: - Element - Form Button - Form input - HTML - HTML forms - Input - Input Types - reset translation_of: Web/HTML/Element/input/reset ---

{{HTMLElement("input")}} type 类型为 "reset" 元素呈现为按钮，且带有默认的 {{event("click")}} 事件，用于将表单中的所有输入重置为其初始值。

{{EmbedInteractiveExample("pages/tabbed/input-reset.html", "tabbed-standard")}}

您通常应该尽量避免在表单中包含重置按钮。 它们很少有实用性，事实上更有可能使用户误点而感到沮丧（通常是在尝试单击“提交”按钮时）。

{{anch("值")}} {{domxref("DOMString")}}用做按钮标签
事件 {{event("click")}}
支持的常用属性 {{htmlattrxref("type", "input")}} 和 {{htmlattrxref("value", "input")}}
IDL 属性 value
方法 无

值

<input type="reset"> 元素的 {{htmlattrxref("value", "input")}} 属性包含一个用做按钮标签的 {{domxref("DOMString")}}，诸如 reset之类的按钮没有其他值.

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

{{EmbedLiveSample("summary-example3", 650, 30)}}

如果您未指定 value，则会获得一个带有默认标签的按钮（通常为“重置”，但这将根据 {{Glossary("user agent")}} 而有所不同：

<input type="reset">

{{EmbedLiveSample("summary-example1", 650, 30)}}

使用重置按钮

<input type =“ reset”> 按钮用于重置表单。 如果您要创建自定义按钮，则使用JavaScript自定义行为，您需要使用 <input type="button">，或者最好使用 {{htmlelement("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>

如下所示:

{{EmbedLiveSample("A_simple_reset_button", 650, 100)}}

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

添加重置键盘快捷键

添加键盘快捷键到提交按钮 — 就像您使用 {{HTMLElement("input")}} 一样做一些事情 — 请使用 {{htmlattrxref("accesskey")}} 全局属性。

在这个例子中， r 被指定为访问键 （您需要按 r 键与浏览器或操作系统的特定键相组合； 关于这些命令请参见 {{htmlattrxref("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>

{{EmbedLiveSample("Adding_a_reset_keyboard_shortcut", 650, 100)}}

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

禁用和启用重置按钮

要禁用重置按钮，只需在其上指定 {{htmlattrxref("disabled")}} 的全局属性，如下所示：

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

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

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

验证方式

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

例子

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

技术规格

规范 状态
{{SpecName('HTML WHATWG', 'forms.html#reset-button-state-(type=reset)', '<input type="reset">')}} {{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#reset-button-state-(type=reset)', '<input type="reset">')}} {{Spec2('HTML5 W3C')}}

浏览器兼容性

{{Compat("html.elements.input.input-reset")}}

参见