1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
|
---
title: <input type="reset">
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
---
<p><span class="seoSummary"><span style="font-size: 1rem; letter-spacing: -0.00278rem;"><code>{{HTMLElement("input")}}</code> type 类型为 </span><strong style="font-size: 1rem; letter-spacing: -0.00278rem;"><code>"reset"</code></strong><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> 元素呈现为按钮，且带有默认的 </span><span style="font-size: 1rem; letter-spacing: -0.00278rem;"><code>{{event("click")}}</code> </span><span style="font-size: 1rem; letter-spacing: -0.00278rem;">事件，用于将表单中的所有输入重置为其初始值。</span></span></p>
<div>{{EmbedInteractiveExample("pages/tabbed/input-reset.html", "tabbed-standard")}}</div>
<p class="hidden">该交互式示例的源代码存储在 GitHub 存储库中。 如果您想为交互式示例项目做出贡献，请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>，并发起拉取请求。</p>
<div class="note">
<p>您通常应该尽量避免在表单中包含重置按钮。 它们很少有实用性，事实上更有可能使用户误点而感到沮丧（通常是在尝试单击 “<a href="/zh-CN/docs/Web/HTML/Element/Input/submit">提交</a>” 按钮时）。</p>
</div>
<table class="properties">
<tbody>
<tr>
<td><strong>{{anch("值")}}</strong></td>
<td><code>{{domxref("DOMString")}}</code>用做按钮标签</td>
</tr>
<tr>
<td><strong>事件</strong></td>
<td><code>{{event("click")}}</code></td>
</tr>
<tr>
<td><strong>支持的常用属性</strong></td>
<td><code>{{htmlattrxref("type", "input")}}</code> 和 <code>{{htmlattrxref("value", "input")}}</code></td>
</tr>
<tr>
<td><strong>IDL 属性</strong></td>
<td><code>value</code></td>
</tr>
<tr>
<td><strong>方法</strong></td>
<td>无</td>
</tr>
</tbody>
</table>
<h2 id="值">值</h2>
<p><code><input type="reset"></code> 元素的 <code>{{htmlattrxref("value", "input")}}</code> 属性包含一个用做按钮标签的 <code>{{domxref("DOMString")}}</code>，诸如 <code>reset</code>之类的按钮没有其他值。</p>
<div id="summary-example3">
<pre class="brush: html"><input type="reset" value="Reset the form"></pre>
</div>
<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p>
<p>如果您未指定 <code>value</code>，则会获得一个带有默认标签的按钮（通常为 “重置”，但这将根据 {{Glossary("user agent")}} 而有所不同：</p>
<div id="summary-example1">
<pre class="brush: html"><input type="reset"></pre>
</div>
<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p>
<h2 id="使用重置按钮">使用重置按钮</h2>
<p><code><input type =“ reset”></code> 按钮用于重置表单。 如果您要创建自定义按钮，则使用 JavaScript 自定义行为，您需要使用 <code><a href="/zh-CN/docs/Web/HTML/Element/Input/button"><input type="button"></a></code>，或者最好使用 <code>{{htmlelement("button")}}</code> 元素。</p>
<h3 id="一个简单的重置按钮">一个简单的重置按钮</h3>
<p>我们将从创建一个简单的重置按钮开始：</p>
<pre class="brush: html"><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>
</pre>
<p>如下所示：</p>
<p>{{EmbedLiveSample("A_simple_reset_button", 650, 100)}}</p>
<p>尝试在文本字段中输入一些文本，然后点击重置按钮。</p>
<h3 id="添加重置键盘快捷键">添加重置键盘快捷键</h3>
<p>添加键盘快捷键到提交按钮 — 就像您使用 <code>{{HTMLElement("input")}}</code> 一样做一些事情 — 请使用 <code>{{htmlattrxref("accesskey")}}</code> 全局属性。</p>
<p>在这个例子中， <kbd>r</kbd> 被指定为访问键（您需要按 <kbd>r</kbd> 键与浏览器或操作系统的特定键相组合； 关于这些命令请参见 <code>{{htmlattrxref("accesskey")}}</code> ）。</p>
<pre class="brush: html"><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></pre>
<p>{{EmbedLiveSample("Adding_a_reset_keyboard_shortcut", 650, 100)}}</p>
<p>上面的示例的问题在于，用户无法知道访问键是什么！事实上，是因为修饰符通常是非标准的以避免与系统和软件快捷键冲突。 在构建网站时，请确保以不干扰网站设计的方式提供此信息（例如，通过提供易于访问的链接来指向有关网站访问键的信息）。向按钮添加提示（也可以使用 <code>{{htmlattrxref("title")}}</code> 属性）, 尽管这并不是出于可访问性目的的完善的解决方案。</p>
<h3 id="禁用和启用重置按钮">禁用和启用重置按钮</h3>
<p>要禁用重置按钮，只需在其上指定 <code>{{htmlattrxref("disabled")}}</code> 的全局属性，如下所示：</p>
<div id="disable-example1">
<pre class="brush: html"><input type="reset" value="Disabled" disabled></pre>
</div>
<p>您可以在运行时通过简单地将 <code>disable</code> 设置为 <code>true</code> 或 <code>false</code> 来启用和禁用按钮。在 JavaScript 中，使用<code>btn.disabled = true</code> 或 <code>btn.disabled = false</code>。</p>
<div class="note">
<p>注意：有关启用和禁用按钮的更多想法，请参见 <code><a href="/en-US/docs/Web/HTML/Element/input/button#Disabling_and_enabling_a_button"><input type="button"></a></code> 页面。</p>
</div>
<h2 id="验证方式"><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.33327865600586px;"><strong>验证方式</strong></span></font></h2>
<p>按钮并不参与约束性验证；他们并没有实际的约束价值。</p>
<h2 id="例子">例子</h2>
<p>我们在上面已经提供了一些简单的示例。 实际上关于重置按钮并没有更多的内容了。</p>
<h2 id="技术规格">技术规格</h2>
<table class="standard-table">
<tbody>
<tr>
<td>规范</td>
<td>状态</td>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', 'forms.html#reset-button-state-(type=reset)', '<input type="reset">')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'forms.html#reset-button-state-(type=reset)', '<input type="reset">')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("html.elements.input.input-reset")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li>{{HTMLElement("input")}} 和 {{domxref("HTMLInputElement")}} 实现接口</li>
<li><a href="/en-US/docs/Learn/HTML/Forms_and_buttons">Forms and buttons</a></li>
<li><a href="/en-US/docs/Web/Accessibility/ARIA/forms">Forms (accessibility)</a></li>
<li><a href="/en-US/docs/Learn/HTML/Forms">HTML forms</a></li>
<li>The {{HTMLElement("button")}} element</li>
</ul>
|
