<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.
尝试一下
值
<input type="reset">
元素的 value
属性包含一个用做按钮标签的字符串,诸如 reset
之类的按钮没有其他值。
设置 value 属性
<input type="reset" value="Reset the form" />
省略 value 属性
使用重置按钮
<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
设置为 true
或 false
来启用和禁用按钮。在 JavaScript 中,使用 btn.disabled = true
或 btn.disabled = false
。
备注:
有关启用和禁用按钮的更多概念,请参见 <input type="button">
页面。
验证
按钮并不参与约束性验证,它们并没有实际的约束价值。
示例
我们在上面已经提供了一些简单的示例。实际上关于重置按钮并没有更多的内容了。
规范
Specification |
---|
HTML Standard # reset-button-state-(type=reset) |
浏览器兼容性
BCD tables only load in the browser
参见
<input>
和HTMLInputElement
实现接口- 表单和按钮
- HTML 表单
<button>
元素- 表单控件 CSS 兼容性列表