<input type="reset">

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

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

DOMString用做按钮标签
事件 click
支持的常用属性 typevalue
IDL 属性 value
方法

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

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

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

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

如下所示:

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

添加重置键盘快捷键

添加键盘快捷键到提交按钮 — 就像您使用 <input> 一样做一些事情 — 请使用 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>

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

禁用和启用重置按钮

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

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

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

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

验证方式

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

例子

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

技术规格

规范 状态
HTML Living Standard
<input type="reset">
Living Standard
HTML5
<input type="reset">
Recommendation

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
type="reset"Chrome Full support 1Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes Unlike other browsers, Firefox by default persists the dynamic disabled state of a <button> across page loads. Use the autocomplete attribute to control this feature.
IE Full support YesOpera Full support YesSafari Full support 1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4
Notes
Full support 4
Notes
Notes Unlike other browsers, Firefox by default persists the dynamic disabled state of a <button> across page loads. Use the autocomplete attribute to control this feature.
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

参见