阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      HTML input type reset 类型

      功能介绍

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

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

      <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 设置为 true 或 false 来启用和禁用按钮。在 JavaScript 中,使用btn.disabled = true 或 btn.disabled = false。

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

      验证方式

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

      例子

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

      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录