input type=”reset” (Elements) – HTML 中文开发手册
input type="reset" (Elements) - HTML 中文开发手册
<input>类型的元素"reset"被渲染为重置按钮 - 单击一个将重置所有输入的形式,它是其初始值的一部分。
<input type="reset" value="Reset the form">
注意:通常不建议在表单中包含重置按钮。它们很少有用,而且当意外按下而不是主动按下提交按钮时往往会使用户沮丧。
值 |
用作按钮标签的DOMString |
---|---|
活动 |
点击 |
支持的通用属性 |
类型和价值 |
IDL属性 |
值 |
方法 |
没有 |
值
一个<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属性来控制此功能。
验证
按钮不参与约束验证; 他们没有真正的价值被约束。
示例
我们已经包含上面的简单例子。关于重置按钮没有什么可说的。
规范
规范 |
状态 |
---|---|
HTML生活标准在该规范中定义'<input type ='reset'>''。 |
生活水平 |
HTML5该规范中的<input type =“reset”>“的定义。 |
建议 |
浏览器兼容性
Feature |
Chrome |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
---|---|---|---|---|---|
Basic support |
1.0 |
1.0 (1.7 or earlier) |
(Yes) |
(Yes) |
1.0 |
Feature |
Android |
Firefox Mobile (Gecko) |
IE Mobile |
Opera Mobile |
Safari Mobile |
---|---|---|---|---|---|
Basic support |
(Yes) |
4.0 (4.0) |
(Yes) |
(Yes) |
(Yes) |