zoukankan      html  css  js  c++  java
  • input type=”reset” (Elements) – HTML 中文开发手册

    [
  •   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)

  •   HTML 中文开发手册
    ]
    转载请保留页面地址:https://www.breakyizhan.com/html/30905.html
  • 相关阅读:
    [人物存档]AI【捏脸数据】【捏人数据】【人物卡精选】少女3DCG设计参考萌萌的耳朵
    [人物存档]AI【捏脸数据】【捏人数据】【人物卡精选】少女3DCG设计参考
    碧蓝航线-cosplay-吾妻猉 绘画CG设计参考
    Pixiv日榜2020-4-5精选动漫插画壁纸 设计参考
    Marvelous Designer 旗袍设计参考素材免费分享及服装3D模型导入MD教程
    [人物存档]AI【捏脸数据】【捏人数据】【人物卡精选】少女设计参考
    P站日榜【2020-3-22】pixiv动漫美图热门插画壁纸
    Pixiv腿部渔网袜绘画设计参考特辑,在我眼里你就是一个弟弟(姐弟特辑)绘画参考
    Daz3D studio 快速上手进阶免费教程,持续更新
    Airflow 1.10安装
  • 原文地址:https://www.cnblogs.com/breakyizhan/p/13239129.html
Copyright © 2011-2022 走看看