Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/input/reset below:

<input type="reset"> - HTMLï¼ˆè¶…æ–‡æœ¬æ ‡è®°è¯è¨€ï¼‰ | MDN

Baseline Widely available

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

<form>
  <div class="controls">
    <label for="id">User ID:</label>
    <input type="text" id="id" name="id" />

    <input type="reset" value="Reset" />
    <input type="submit" value="Submit" />
  </div>
</form>

.controls {
  padding-top: 1rem;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: 1fr 2fr;
  gap: 0.7rem;
}

label {
  font-size: 0.8rem;
  justify-self: end;
}

input[type="reset"],
input[type="submit"] {
  width: 5rem;
  justify-self: end;
}

input[type="reset"] {
  grid-column: 2;
  grid-row: 2;
}

input[type="submit"] {
  grid-column: 2;
  grid-row: 3;
}

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

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

<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"> 页面。

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

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4