精华内容
下载资源
问答
  • Hidden属性的input标签中XSS的触发方法

    千次阅读 2017-08-18 08:57:36
    今天看到一个XSS漏洞,插入点在一个有hidden 属性的input 标签,大致情况如下: input type="hidden" name="returnurl" value="[USER INJECT]" />11 正常情况下的XSS应当是: http://victim/?value=” ...

    今天看到一个XSS漏洞,插入点在一个有hidden 属性的input 标签,大致情况如下:

    <input type="hidden" name="returnurl" value="[USER INJECT]" />
     
    • 1
    • 1

    正常情况下的XSS应当是:

    http://victim/?value=” οnclick=”alert(document.domain)

    但是这里由于该input 未在页面中显示,常用的onclick 方法无法使用(点不到这个标签怎么触发onclick…),不过在浏览器中还有一个好玩的属性叫accesskey 于是乎构造:

    <input type="hidden" name="returnurl" value="" accesskey="X" onclick="alert(document.domain)" />
     
    • 1
    • 1

    PoC为:

    http://victim/?returnurl=” accesskey=”X” οnclick=”alert(document.domain)

    触发方法不同的浏览器不同,下面是w3school的总结: 
    accesskey 
    所以上面的XSS触发方法为: 
    FF下:shift+alt+X (测试成功) 
    Chrome:alt+X (最新版Chrome未测试成功) 

    IE下:alt+X (未测试成功)

    原文链接:http://blog.csdn.net/change518/article/details/51024706

    展开全文
  • 在寻找XSS的过程中,会发现从POST或者URL中...通过网上查询资料,最总找到使用一个比较高级一点属性accesskey=""来触发不可见标签事件,accesskey是HTML语言标签中的一个全局属性 <input type="hidden" name="...

    在寻找XSS的过程中,会发现从POST或者URL中参数拿到INPUT中存放,但这些input都是hidden不可见的,通过F12调试,查看构造出来的代码确实存在点击事件,但是总是触发不了

    通过网上查询资料,最总找到使用一个比较高级一点属性accesskey=""来触发不可见标签事件,accesskey是HTML语言标签中的一个全局属性

     <input type="hidden" name="" accesskey="x" onclick="alert(/xss1/)">

    使用方式:
    1473748-20181229202125435-460320586.png

    
    提示: 各种浏览器下accesskey快捷键的使用方法:
    
    IE浏览器
    
    按住Alt键,点击accesskey定义的快捷键(焦点将移动到链接),再按回车.
    
    FireFox浏览器
    
    按住Alt+Shift键,点击accesskey定义的快捷键.
    
    Chrome浏览器
    
    按住Alt键,点击accesskey定义的快捷键.
    
    Opera浏览器
    
    按住Shift键,点击esc,出现本页定义的accesskey快捷键列表可供选择.
    
    Safari浏览器
    
    按住Alt键,点击accesskey定义的快捷键.

    经过测试,只有FireFox通过。比较遗憾

    最总解决方案思路

    • F12 在控制台使用js代码通过dom定位input
    • 使用js修改input type属性值为text,然后点击事件触发
    
    <input type="hidden" id="xss" value="123"  onclick="alert(/xss2/)">
    控制台输入:
     document.getElementById("xss").setAttribute("type","text");
    

    其实更加高级一点就是将修改属性的那一步一并封装到input事件中,就是代码长了一点

    在最近项目中遇到的是代码中可能使用了某种过滤规则,导致我输入<>或者(),只要走中间加入字母就会被拦截,无奈使用了跳转展现出来触发效果,使用了window.location.href='xxx'

    转载于:https://www.cnblogs.com/ssjt/articles/10197838.html

    展开全文
  • 【input 标签的 type 属性详解】

    万次阅读 多人点赞 2019-09-03 23:16:31
    input 输入标签的type 属性1.1 input 标签的 type类型 属性的常用属性值⑴ type="text"⑵ type="button"⑶ type="checkbox"⑷ type="file"⑸ type="hidden"⑹ type="image"⑺ type="password"⑻ type="radio"⑼ ...

    1. input 输入标签的 type 属性

    • 用于
      • 如何规定 input 输入元素的 类型 ?
      • 使用 type 类型 属性
    • type 类型 属性的语法
      • <input type="value">

    1.1 input 标签的 type类型 属性的常用属性值

    属性值用于
    ① text定义 单行的 输入文本 字段,用户可在其中输入文本。默认宽度为 20 个字符。单行文本字段。换行符 将自动 从输入值中删除。
    ② checkbox定义 复选框。 允许 选择/取消选择 单个值 的复选框。
    ③ password定义 密码 字段。该字段中的字符 被掩码。值被隐藏的 单行文本字段。使用maxlengthminlength属性指定 可输入值的最大长度。
    ④ hidden隐藏的 输入值: 定义 隐藏的 输入字段。不显示 但其值 提交给服务器的控件。
    ⑤ file选择文件. 定义输入字段和 "浏览"按钮,供 文件上传。允许用户 选择文件的控件。使用accept属性 定义控件 可以选择的 文件类型。
    ⑥ button无 默认行为的按钮: 定义 可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。一个没有默认行为的按钮。
    ⑦ radio定义 单选 按钮。一个单选按钮,允许 从多个选项中 选择一个值。
    ⑧ reset定义 重置按钮。重置按钮会 清除表单中的 所有数据。将表单内容重 置为默认值的按钮。
    ⑨ submit定义 提交按钮。提交按钮 会把表单 数据发送到 服务器。提交表单的 按钮。
    ⑩ image图片提交按钮: 定义 图像形式的 提交按钮。 一个图形化的 提交按钮。必须使用src属性 定义图像的源,使用alt属性定义 替代文本。可以使用height高度和width宽度属性 以像素为单位 定义图像的大小。

    • 示例1: 一个简单的 表单示例
        <form action="">
    
            用户名:
            <input type="text" />
            <br />&nbsp;&nbsp;&nbsp;码:
            <input type="password" />
            <br />
    
            <!-- 通过 相同 name 值 绑定成一组,实现单选 -->
            性别:
            <input type="radio" name="sex" checked="checked" /><input type="radio" name="sex" /><br />
    
            <!-- 复选框,可以同时选中 多项 -->
    
            爱好:
            <input type="checkbox" name="hobby" checked="checked" />小说
            <input type="checkbox" name="hobby" />动漫
            <input type="checkbox" name="hobby" />音乐
            <input type="checkbox" name="hobby" />运动
            
            <!-- 5种 按钮 -->
            <br />搜索:
            <input type="button" value="搜索" />
            <br />
            <br />
    
            <input type="submit" value="提交注册信息" />
    
            <input type="reset" value="清空填写信息" />
            <br />
            <br />
    
            <input type="image" src="images/注册.png" />
    
            <br />
            <input type="file" />
    
    
    
        </form>
    

    在这里插入图片描述


    ⑴ 单行文本框: type=“text”

    • 单行文本框 输入标签: input-type=text
      • 如何定义 单行输入字段 ?
        • <input type="text" />
        • 单行文本: text类型的元素 创建基本的 单行文本字段。
        • 使用选择: 应该在让用户 输入单行值时 使用它们,并且 没有更具体的输入类型 可用来收集该值 ,(例如,如果是日期、URL、电子邮件或搜索项( date, URL, email, or search),有更好的选项可用)。
    • 搭配属性
      • ① 最大长度 maxlength 输入应接受的 最大字符数
        • 以字符为单位
      • ② 最小长度 minlength 输入长度,有效的 最小字符数
        • 以字符为单位
      • ③ 格式 pattern: 输入的内容, 必须匹配正则表达式
      • ④ 占位符 placeholder 当输入字段为空时,要在该字段中显示的示例值
        • 文字颜色: 占位符通常以比元素前景色 更淡的颜色呈现
        • 自动消失: 当用户开始向字段输入文本时 (或者当字段通过编程设置其value属性来设置值时),占位符将自动消失。
      • ⑤只读 readonly 指示输入内容是否为 只读的 布尔属性
      • ⑥ 可见宽度 size: 一个数字,指示输入字段应该有多少个字符宽
        • 以字符为单位
        • 物理大小: 可以使用size属性控制 输入框的物理大小。
        • 一次性显示字符数: 使用它,可以指定 文本输入一次可以显示的字符数。
        • 字符宽度: 这将影响元素的宽度,使您可以根据字符而不是像素指定宽度。
      • ⑦ 拼写检查 spellcheck: 控制是否为输入字段 启用拼写检查,或是否应使用 默认拼写检查配置,属性值如下:
        • false: 禁用此元素的拼写检查。
        • true 启用此元素的拼写检查。
        • "" (空字符串) or 没有值
          • 按照元素的默认行为 进行拼写检查。这可能是 基于父母的拼写检查设置 或其他因素。
        • 如果输入字段没有readonly属性 且未禁用,则可以启用拼写检查。
        • 使用前提: 启用拼写检查的元素,不能是 只读的,不能是 禁用的.
        • 拼写检查实际状态和用户设置: 如果用户代理的首选项 覆盖该设置,则读取拼写检查返回的值 可能不会反映控件中 拼写检查的实际状态。
      • ⑧ 名称 name: 必须记住在<input>元素上包含name名称属性,否则文本字段的值 将不会包含在提交的数据中。
      • ⑨ 必填项 required: 字段不能为空

    • 示例1: 两个文本框
    
      <p>First name: <input type="text" name="fname" /></p>
      <p>Last name: <input type="text" name="lname" /></p>
    
    

    在这里插入图片描述

    • 定义两个 单行文本输入框

    • 示例2: 指定格式
       <form>
            <div>
                <label for="nickname">请输入您的昵称: </label>
                <input type="text" name="nickname" id="nickname" pattern="[a-z]{4,8}" size="20" title="必须是小写字母,长度必须是4-8位" />
                <p style="color:grey;font-size:50%;">必须是小写字母,长度必须是4-8位</p>
            </div>
            <input type="submit" value="提交表单" />
        </form>
    
    • 输出
      • 在这里插入图片描述 在这里插入图片描述
    • 格式要求 提示:
      • 使用title 属性和 <p>分别在元素内和元素外部进行提示.
      • 段落中的提示文字,可以另外设置样式,加以区分

    ⑵ 密码框: type=“password”

    • 密码框 输入标签: input-type=password
      • 用于
        • 如何定义 密码字段 ?
          • <input type="password" />
      • 密码字段的显示
        • 密码字段中的字符会被 掩码(显示为 星号或圆点)。
    • 输入过程的具体工作方式: 可能因浏览器而异;例如,移动设备 在模糊输入字符之前,通常会先显示一会儿,以便用户确定他们按下了想要按的键;这是有帮助的,因为键的尺寸很小,而且很容易按错键,尤其是在虚拟键盘上。
    • 总结: 密码字段 = 掩码 = 星号或原点
    • 搭配属性
      • ① 名称 name名称
        • 用来传递值
      • ② 最大长度 maxlength: 值的最大长度,可以是UTF-16字符
        • 非负整数的值 (non-negative integer value) 这必须是一个整数值, 0或更高。如果没有指定maxlength,或者指定了无效值,则password字段没有最大长度。这个值也必须大于或等于minlength的值。
      • ③ 最小长度 minlength: 将被认为 有效的字符的最小长度,非负整数的值 (non-negative integer value)
      • ④ 匹配模式 pattern: 值必须匹配的正则表达式 才能有效
        • 解释需求: 使用title属性 指定大多数浏览器 将显示为工具提示的文本,以解释 匹配模式的需求。您还应该包括附近的其他解释性文本。
        • 对于密码输入,强烈建议使用模式,以帮助确保用户选择并使用使用各种字符类的有效密码。使用模式,您可以强制使用大小写规则,要求使用一些数字和/或点号字符,等等。
      • ⑤ 占位符 placeholder: 当字段为空时,要在字段中 显示的示例值
      • ⑥ 只读 readonly: 一个布尔属性,如果存在,表明字段的内容不应该被编辑
      • 可见字符宽度 size: 输入字段宽度的字符数
        • 字符宽度: size属性是一个 数值,指示输入字段应该有多少个 字符宽。
        • 该值必须大于零,默认值为20。
        • 由于字符宽度不同,这可能是或不是精确的,不应该依赖于这样;根据字符和字体(正在使用的字体设置),结果输入可能比指定的字符数更窄或更宽。
        • 这并不限制用户可以输入多少字符。它只指定一次大约可以看到多少个。
    • ⑦ 允许自动完成 autocomplete :
      • 要允许用户的密码管理器自动输入密码,请指定autocomplete属性。对于密码,这通常应该是以下内容之一:
      • 自动填写 密码 autocomplete="on"
        • 允许浏览器或密码管理器 自动填写密码字段。这不如使用当前密码或新密码提供更多信息。 current-password or new-password.
      • 不允许自动填写 密码 autocomplete="off''
        • 不允许浏览器或密码管理器 自动填写密码字段。注意,有些软件忽略了这个值,因为它通常对 用户维护 安全密码实践的能力 有害。
      • 当前已知的密码 autocomplete="current-password'
        • 允许浏览器或密码管理器 输入站点的当前密码。这提供了比on更多的信息,
        • 因为它允许浏览器或密码管理器在字段中 自动输入站点当前已知的密码,但不建议输入新密码。
      • 新密码 autocomplete="new-password'
        • 允许浏览器或密码管理器自动为网站输入新密码;这用于“更改密码”和“新用户”表单,用于要求用户 输入新密码的字段。
        • 根据使用的密码管理器,可以以多种方式生成新密码。它可以简单地 填写一个新的建议密码,或者向用户显示 一个创建密码的界面。
    • ⑧ 必填 (字段不能为空) required
      • 要告诉用户的浏览器在提交表单之前password字段必须有 一个有效值,只需指定布尔required属性。
    • ⑨ 设置输入模式 inputmode
      • 数字键盘 , inputmode设置为numeric,以鼓励具有虚拟键盘的设备 切换到数字键盘布局,以便更容易地输入。

    • 示例1: 自动掩码
    Email: <input type="text" name="email" /><br />
      Password: <input type="password" name="pwd" maxlength="8" /><br />
      <input type="submit" value="Submit" />
    

    在这里插入图片描述

    • 密码框中进行输入,不直接显示输入的字符,会变成原点,可以防止密码被窥视

    • 示例2: 限定密码最小位数
    • html
    <form action="">
       <div>
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" />
        </div>
    
        <div>
            <label for="passw">密码 (不小于6位字符):</label>
            <input type="password" id="passw" name="passw" minlength="6"/>
        </div>
    
        	<input type="submit" value="登录" />
        </form>
    
    • css
    <style>
    	label{
    		display:block;
    	}
    	input[type="submit"],label{
    		margin-top:1rem;
    	}
    
    </style>
    
    • 在这里插入图片描述
    • 在这里插入图片描述

    ⑶ 复选框: type=“checkbox”

    • 复选框 输入标签: input-type=checkbox
      • 用于
        • 如何定义 复选框 ?
          • <input type="checkbox" />
          • 显示 方框: 复选框类型的元素 默认呈现为方框,在激活时选中(勾选),
      • 如何设置 允许用户在一定数目的选择中 选取 一个或多个选项 ?
        • 使用 checkbox 复选框 属性值
    • 搭配属性
      • input-type="checkbox"name名称属性 和value值属性搭配使用
        • 用以发送给服务器,传递值: input-name=input-value
      • 服务器 获取选中项的值 是什么值 ?
        • 获取的不是 <input> 输入标签的内容,因 <input>输入标签 是空标签
        • 获取选中项的值 = 选中项的value的属性值
        • 复选框的值: 表示复选框值的DOMString。这在客户端 是看不到的,但是在服务器端,这是用复选框的name名称属性 提交的value属性的值。name, value属性来提交选中值.
        • 搭配属性: name, value,checked
          • 默认 选中状态: checked
            • 一个布尔属性,指示 默认情况下 是否选中 此复选框(当页面加载时)。
            • 它 不指示 当前是否选中此复选框:如果复选框的状态 已更改,则此内容属性 不反映更改。(只有HTMLInputElement的checked IDL属性被更新。)
          • 提交时 复选框的值: value
            • 如果复选框 当前处于选中状态,则在 提交表单时 用作复选框值的字符串.
            • 当提交表单时,只有当前选中的复选框 才提交给服务器,报告的值 是value属性的值。
            • 缺省值: 如果 没有指定 该值,则默认为value="on"的字符串。

    • 示例1: 复选框
    <form action="/example/html/form_action.asp" method="get">
    	<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
    	<input type="checkbox" name="vehicle" value="Car" /> I have a car<br />
    	<input type="checkbox" name="vehicle" value="Airplane" /> I have an airplane<br />
    	<input type="submit" value="Submit" />
    </form>
    

    在这里插入图片描述

    • vehicle=Bike&vehicle=Car

    • 示例2: 多个选项+带标签的复选框
    • 点击相应文字就能选中复选框
        <fieldset>
            <legend>选择您的爱好:</legend>
            <div>
                <input type="checkbox" id="coding" name="interest" value="coding" />
                <label for="coding">编程</label>
            </div>
            <div>
                <input type="checkbox" id="music" name="interest" value="music" />
                <label for="music">音乐</label>
            </div>
        </fieldset>
    

    在这里插入图片描述


    • 示例3: 默认复选框
      • 要使复选框 在默认情况下选中,只需给它一个checked属性。
      • checked="checked"
    <input type="checkbox" id="coding" name="interest" value="coding" checked="checked"/>
    

    在这里插入图片描述


    ⑷ 隐藏值: type=“hidden”

    • 隐藏值: input-type=hidden
      • 用于
        • 如何定义 隐藏字段 ?
          • <input type="hidden" />
      • 什么是 隐藏字段 ?
        • 用户 看不见的。
        • 源代码中可见: 虽然该值 不会在页面的内容中 显示给用户,但是它是可见的——并且可以编辑——使用任何浏览器的 开发工具 或“查看源代码”功能。不要依赖隐藏的输入 作为安全的一种形式。
        • “隐藏”类型的元素 允许web开发人员包含 用户在提交表单时 无法看到或修改的数据。
        • 例如,当前正在排序 或编辑的内容的 ID,或惟一的 安全令牌。隐藏的输入 在呈现的页面中是 完全不可见的,并且无法在页面内容中 使其可见。
        • input输入和change更改事件 不适用于 此输入类型。即使使用JavaScript(例如hiddenInput.focus())也不能 使 隐藏的输入 获得焦点。
      • 隐藏字段通常会
        • 存储一个 默认值,它们的值也可以由 JavaScript 进行修改。
        • 如果存储一个 用户看不见的 默认值 ?
          • 使用 hidden 属性值
    • 常见使用
      • 跟踪编辑内容:使用隐藏输入 来记住 正在编辑的记录的ID
        • 隐藏输入最常见的用途之一是 跟踪在提交编辑表单时 需要更新哪些数据库记录。一个典型的工作流是这样的:
          • ① 用户决定编辑一些他们可以控制的内容,如博客文章或产品条目。他们按下编辑按钮开始。
          • ③ 要编辑的内容 从数据库中 取出并加载到HTML表单中,以便用户进行更改。
          • ③ 编辑之后,用户提交表单,并将更新后的数据 发送回服务器,以便在数据库中进行更新。
            • 保存id: 这里的思想是,在步骤 ②中,正在更新的记录的ID 保存在一个隐藏的输入中。
            • 提交id: 当表单在步骤③ 中提交时,ID 将自动与记录内容 一起发送回服务器。ID让站点的服务器端组件 确切地知道 需要用提交的数据 更新哪条记录。
            • 如,<input type="hidden" id="postId" name="postId" value="34657">
      • 提高网站的安全
        • 隐藏输入 还用于 存储和提交 安全令牌或密码,以提高网站的安全性。
        • 基本的想法是,如果用户填写一个敏感的表单,比如 在银行网站上 转一些钱到另一个帐户的表单,提供的密码 将会证明 用户的身份,以及他们使用正确的形式 提交转款申请。
    • 搭配属性
      • inputtype="hidden"name名称属性,value值属性 搭配
      • 名称和值 属性,用来 存储值和传递值

    • 示例1: 用户不可见 但会被提交的值
    <form action="/example/html/form_action.asp" method="get">
      Email: <input type="text" name="email" /><br />
      <input type="hidden" name="country" value="China" />
      <input type="submit" value="Submit" />
    </form>
    

    在这里插入图片描述

    • 隐藏值,在提交的时候,也会传给服务器

    ♣ 6 种 按钮类型

    • input中的按钮类型 type="xxx"
      • 普通按钮: button (默认 无按钮显示文本 ,用value 设置)
      • 提交按钮: submit(默认显示值 “提交”,更改 用value 属性)
      • 重置按钮: reset (默认显示 “重置”,更改用value 属性)
      • 图片 提交按钮: image (默认显示"提交",添加图片 用 src 属性)
      • 上传文件 按钮file (默认显示 “选择文件”,value无法改变 显示值)
      • 单选按钮: radio 6 种 按钮类型

    ⑸ 文件上传: type=“file”

    • 文件上传 输入标签: input-type=file
      • 用于
        • 如何设置 文件 上传按钮 ?
          • <input type="file" />
          • 选择文件 和文件上传: 类型为文件type="file"的元素 允许用户 从设备存储中 选择一个或多个文件。选择后,可以使用表单提交 将文件上传到服务器,或者使用 JavaScript代码 和文件 API进行操作。
          • value属性- 所选文件的 路径:
            • 文件的路径: 文件输入 的value属性 包含一个 DOMString,它表示 所选文件的路径。
            • 多个文件中的 第一个文件: 如果用户 选择了 多个文件,该值表示 他们选择的文件列表中的 第一个文件。其他文件 可以使用 输入的HTMLInputElement.files来访问其他文件。
            • 没选择 字符串为空: 如果还 没有选择文件,则字符串为“”空)。
            • 字符串的前缀: 是C:/fakepath/,以防止 恶意软件 猜测用户的文件结构。
    • 搭配属性
      • input-type="file"accept接受文件类型,multiple多值属性搭配
        • 限定 上传文件的类型,是否允许 选择多个文件
      • accept 上传文件的类型. 描述 要允许的文件 类型的 一个或多个唯一 文件类型说明符
        • 文件类型字符串: 定义文件输入 应该接受的 文件类型的字符串。
        • 此字符串是由 逗号分隔的 惟一文件类型说明符 列表。
        • 由于给定的文件类型 可以用多种方式 标识,因此在需要给定格式的 文件时,提供一组完整的类型说明符 非常有用。
      • capture 使用什么源 来捕获 图像或视频数据.
        • 如果 accept属性 指示输入应该属于 这些类型之一,则指定 要使用哪个摄像机 捕获图像或视频数据的 字符串。
          • user值 表示应该使用 面向用户的 摄像机和/或麦克风。
          • environment值 指定应该使用 向外的 摄像机和/或麦克风。
        • 如果缺少此属性,用户代理可以 自由决定 自己要做什么。
        • 如果请求的面向模式 不可用,用户代理可能会 回到其 首选的默认模式。
      • files 列出所选文件的文件列表
        • 除非指定了multiple多个属性,否则此列表 只有一个成员。
      • multiple 一个布尔值,如果存在,表示用户 可以选择多个文件
    • 唯一的 文件类型说明符
      • 字符串: 惟一的文件类型说明符是 一个字符串,它描述 用户可以在 input-type="file"的元素中 选择的 文件类型。
      • 文件类型 形式. 每一个独特的 文件类型说明符 可以采取以下形式之一:
        • 文件扩展名 : 一个有效的 不区分大小写的 文件名扩展名,以句点(".")字符开始。
          • 例如:.jpg.pdf.doc
        • MIME 类型字符串: 一个有效的 MIME 类型字符串,没有扩展名。
          • 字符串audio/*, 表示“任何音频文件”。
          • 字符串video/* , 表示“任何视频文件”。
          • 字符串 image/* , 表示“任何图像文件”。

    • 示例1: 上传图片文件
    <input type="file" name="pic" accept="image/gif" />
    

    在这里插入图片描述

    • 默认,只能选择一个文件,需要 一次性选择 多个文件,使用multiple多值属性
      • 选中一个文件,会在旁边显示文件名

    • 示例2: 有很多方法可以识别 Microsoft Word 文件,所以接受 Word 文件的站点 可以使用像这样的文件输入
    <input type="file" id="docpicker"
      accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
    

    • 示例3: 例如,一个文件选择器 需要的内容 可以以图像的形式显示,包括标准图像格式 和PDF文件,可能是这样的:
    <input type="file" accept="image/*,.pdf">
    

    ⑹ 图片提交按钮: type=“image”

    • 图片提交按钮 输入标签: input-type=image
      • 用于
        • 如何定义一个 图像形式的 提交按钮 ?
          • <input type="image" />
          • 图片提交按钮: image类型的元素 用于创建 图形化的提交按钮,即采用图像 而不是文本形式的提交按钮。
      • 使用
        • type="image" 必须与什么属性 搭配使用 ?
          • src 资源 属性 和 alt 图片提示 替代文本 属性 必须与 <input type="image">结合使用。
      • 注释:
        • 图像提交按钮的特别之处
          • 如果 type 属性设置为 image,当用户单击图像时,浏览器将以 像素为 单位
          • 将 鼠标 相对于 图像边界的 偏移量发送到服务器
          • 其中包括
            • 从图像 边界开始的 水平偏移量
            • 以及从图像 边界 开始的 垂直偏移量
              • 类似于,相对于(0,0)原点的第四项限值(但值 为正)
    • 总结: 图像提交按钮= type/src/alt + 偏移量发送
    • 搭配属性
      • ① 图像路径 src :元素不接受 value属性。要显示的 图像的路径 在src属性中指定。
      • 图片替代文本 alt当无法显示图像时,要显示另一个字符串.
        • 无法显示图像时 才显示: 如果无法显示图像(由于错误,用户代理不能显示或配置为不显示图像,或者用户正在使用屏幕读取设备)
        • 按钮标签: alt属性提供一个 备用字符串作为 按钮的标签。
        • 非空: 如果提供,它必须是非空字符串,适合作为 按钮的标签。
        • 内容可用性:虽然alt属性在技术上 是可选的,但应该始终 包含这个属性,以最大化 内容的可用性。 <input type="image"><img> 都应该设置图像替代文本.
        • 图像应该设置alt属性,当作图像的必需属性使用
      • formaction 提交数据的URL
        • 一个字符串,指示要向其提交数据的URL。这优先于
          元素form上的action属性
      • formenctype 提交表单数据时 使用的编码方法
      • 属性覆盖: 如果指定,formenctype属性的值 将覆盖 所属表单的action属性。
        • 一个字符串,用于标识 向服务器提交表单数据时 使用的编码方法。有三个容许值:
        • application/x-www-form-urlencoded
          • 这是默认值,在使用encodeURI()等算法 对文本进行 URL编码后,将表单数据 作为字符串发送。
        • multipart/form-data
          • 使用FormData API管理数据,允许 将文件提交到服务器。如果表单包含文件输入<input type="file">,则必须 使用 这种编码类型。
        • text/plain
          • 纯文本;主要用于 调试,所以可以 很容易地看到 要提交的数据。
      • formmethod 提交表单时 使用的 HTTP方法
        • 一个字符串,指示 提交表单数据时 使用的 HTTP方法;
        • 此值覆盖所属表单上 给定的任何方法属性。允许的值是:
        • get
          • URL的构造方法 是从formactionaction属性给出的URL开始,附加一个问号(“?”)字符,然后附加 表单的数据,按照formenctype或表单的enctype属性进行 编码。然后使用HTTP get请求 将此URL发送到服务器。
          • url→?→表单数据→编码→http请求→发送到服务器
          • 这种方法适用于 只包含 ASCII 字符 且没有副作用的简单表单。
          • 这是默认值。
        • post
          • 表单的数据 包含在 请求体中,该请求体 使用HTTP post请求 发送到formactionaction属性给出的URL。
          • 此方法支持 复杂的数据 和文件附件。
        • dialog
          • 此方法用于指示 按钮只是关闭 与输入关联的对话框,而根本 不传输表单数据。
      • formnovalidate 一个布尔值,如果存在,表示提交前 不验证表单
        • 一个布尔属性,如果存在,它指定 在提交到服务器之前 不验证表单。
        • 这将覆盖 元素所属表单上的novalidate属性的值。
      • formtarget 一个字符串,指示要从何处加载 提交表单的结果的内容
        • 指定名称或关键字的 字符串,指示 在何处显示 提交表单后收到的响应。
        • 字符串必须是浏览上下文的名称(即选项卡、窗口、<iframe>)
          • 除了标签、窗口或内联帧(tabs, windows, or inline frames)的 实际名称之外,还有一些特殊的关键字可以使用:
        • 这里指定的值 覆盖所属表单 target属性 .
        • _self
          • 将响应加载到 包含表单的相同浏览上下文中。这将用接收到的数据 替换当前文档。如果没有指定,则使用此 默认值。
        • _blank
        • 将响应加载到一个新的、未命名的浏览上下文中。
        • 通常是与当前文档 相同窗口中的 一个新选项卡,但可能会根据用户代理的配置而有所不同。
        • _parent
          • 将响应加载到 当前响应的父浏览上下文中。如果没有父上下文,则其行为与_self相同。
        • _top
          • 将响应加载到 顶层浏览上下文中;这是浏览上下文,它是当前上下文的最上层祖先。如果当前上下文是最上面的上下文,那么它的行为与_self相同。
      • height 用于绘制图像的高度(以CSS像素为单位)
        • 指定高度的数字,以CSS像素为单位,用于绘制src属性指定的图像。
      • src 加载图像的URL
        • 指定要显示的图像文件URL的字符串,以表示图形化提交按钮。当用户与图像交互时,输入的处理方式与任何其他按钮输入一样。
      • width 用于绘制图像的宽度(以CSS像素为单位)
        • 一个数字,以CSS像素 表示 绘制图像的宽度。

    • 示例1
    <form action="https://www.w3school.com.cn/example/html/form_action.asp" method="get">
      <p>First name: <input type="text" name="fname" /></p>
      <p>Last name: <input type="text" name="lname" /></p>
      <input type="image" src="/i/eg_submit.jpg" alt="Submit" />
    </form>
    

    在这里插入图片描述
    在这里插入图片描述

    • 点击图像 会提交值,发送给服务器,除了值,还有图片的偏移量 x,y

    • 示例2:
    <div>
            <label for="userid">用户ID:</label>
            <input type="text" id="userid" name="userid" />
    </div>
    <input type="image" id="image" src="https://interactive-examples.mdn.mozilla.net/media/examples/login-button.png" alt="login" style="width:80px;margin:1rem" />
    

    在这里插入图片描述

    • 图片无法显示时,显示alt属性的文本
      在这里插入图片描述

    ⑺ 按钮: type=“button”

    • 按钮 输入标签: input-type=button
      • 用于
        • 如何定义 可点击的按钮,但 没有任何行为 ?
          • <input type="button" />
          • 可自定义功能的 按钮: button 类型的元素 呈现为简单的按钮,当分配 事件处理函数(通常是click事件)时,可以将其编程为 控制页面上任何位置的 自定义功能。
      • button类型常用于
        • 如何在用户点击按钮时 启动 JavaScript 程序 ?
          • 使用 button 属性值,利用 js 添加行为
    • 搭配属性
      • 按钮上显示的文字 value
        • input-type="button"value值属性结合
        • 不定义value值,不显示按钮,这是 按钮上面显示的文字
        • 按钮上面显示的文字 = input-value
    • input-type="button"输入按钮 标签 和<button>按钮 标签的区别
      • 首选<button>标签: 虽然input-type="button"的输入元素 仍然是完全有效的HTML,但较新的<button>元素 现在是创建按钮的 首选方法。
      • 标签内容更灵活: <button>按钮的标签文本是 插入到 开始和结束标签之间的,可以在标签中 包括HTML,甚至包括图像。

    • 示例1: 点击弹出对话窗口的 按钮
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
        function msg(){
        	alert("Hello World");
        }
        </script>
    </head>
    
    <body>
    	<form action="">
    		<input type="button" onclick="msg()" value="Click me" />
    	</form>
    </body>
    

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    • 点击按钮,调用一段 js 代码

    • 示例2: 一个带样式的按钮
    <style>
    
    .styled {
    
        line-height: 2.5;
        padding: 0 20px;
        font-size: 1rem;
        text-align: center;
        color: #fff;
        text-shadow: 1px 1px 1px #000;
        border-radius: 10px;
        background-color: rgba(200, 0, 0, 1);
        background-image: linear-gradient(to top left,
                                          rgba(0, 0, 0, .2),
                                          rgba(0, 0, 0, .2) 30%,
                                          rgba(0, 0, 0, 0));
        box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
                    inset -2px -2px 3px rgba(0, 0, 0, .6);
    }
    
    .styled:hover {
        background-color: rgba(255, 0, 0, 1)/*鼠标经过的颜色*/;
    }
    
    .styled:active {/*鼠标点击时,在上方添加阴影*/
        box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
                    inset 2px 2px 3px rgba(0, 0, 0, .6);
    }
    
    
    </style>
    </head>
    <body>
    <input class="favorite styled" type="button" value="添加到收藏夹">
    </body>
    

    在这里插入图片描述


    • 示例3: 空按钮
      • 如果不指定一个value值,会得到 一个空按钮:
      • 按钮显示值 = value属性值
    <input type="button" value="点击这里">
    <br/>
    
    一个空按钮: <input type="button">
    

    在这里插入图片描述


    • 示例4: 给按钮 添加 键盘快捷键
      • 键盘快捷键,也称为 访问键 和键盘等价物,允许用户 使用键盘上的一个键或多个键的组合 触发一个按钮。
      • accesskey 属性: 使用accesskey全局属性 ['æksɛs],设置快捷键.
    <form>
      <input type="button" value="Start machine" accesskey="s">
    </form>
    <p>The machine is stopped.</p>
    
    • windows 系统,按 alt+s,可以选中按钮

    ⑻ 单选按钮: type=“radio”

    • 单选按钮 输入标签: input-type=radio
      • 用于
        • 如何定义 单选按钮 ?
          • <input type="radio" />
      • 单选按钮允许用户 选取给定数目的选择中的 一个选项。
      • 单选按钮集合: radio类型的元素 通常用于radio groups—描述一组 相关选项的 单选按钮集合。同一时间只能选择 给定组中的一个单选按钮。
      • 显示: 单选按钮通常呈现为 小圆圈,选择时 将填充或突出显示。
    • 搭配属性
      • input-type="radio"name名称属性 value值 属性搭配
      • ① 提交时 传递值 namevalue
        • (定义单选按钮时,必须的属性,否则不能传递值)
        • name=value—>sex=male
      • ② 选中 checked : 一个布尔值,指示此单选按钮 是否为组中 当前选定的项
      • ③ 选项的值 value: 在提交表单时, 用作单选按钮值的字符串(如果单选按钮 当前处于选中状态)

    • 示例1: 一个单选按钮组 ,绑定相关标签
    <form action="">
    <p>请选择您的性别: </p>
        <div>
            <input type="radio" id="male" name="sex" />
            <label for="male"></label>
        </div>
        <div>
            <input type="radio" id="female" name="sex" />
            <label for="female"></label>
        </div>
            <input type="submit" value="提交" />
        </form>
    
    • 关联关系: name 属性值
      • name属性值相同的 多个 radio单选按钮,一次只能选中其中的一个
      • 实现单选: 通过 相同 name 绑定成一组,实现单选
        • 同一组 单选按钮集,name属性值 相同

    在这里插入图片描述

    • 选中使用<label>标签来指定 相关选项的文字内容
      • 点击相关的lael标签的文字,也可以选中按钮
      • 关联关系:label-for="input-id"

    • 示例2: 如何成为一个单选按钮组, 没有规定 相同name的单选按钮,不会只选中一个(相同name才算是一组)
      • 两个单选按钮的name属性值不同,则都能选中,不是只能选中一个
    • 关联关系: 同一组的单选按钮,name属性值 都相同
    <form action="/example/html/form_action.asp" method="get">
      <input type="radio" name="sex1" value="male" /> Male<br />
      <input type="radio" name="sex2" value="female" /> Female<br />
      <input type="submit" value="Submit" />
    </form>
    

    在这里插入图片描述

    • 因为不是相同的name名称,是一组的单选按钮,所以都能选中
      • 选中的单选按钮,无法再点击一次这个按钮,进行取消选中,只能选择一组的其他单选按钮进行取消选中
      • 复选框可以再次点击,进行取消选中
        在这里插入图片描述
    • 选中单选按钮,再次点击选中的按钮,无法取消选中

    • 示例3: 给单选按钮组,语义上 进行分组
    • 使用<filedset>,<legend>
    
    <form action="">
    <fieldset>
    <legend>请选择您的性别:</legend>
        <div>
            <input type="radio" id="male" name="sex" />
            <label for="male"></label>
    
            <input type="radio" id="female" name="sex" />
            <label for="female"></label>
        </div>
      </fieldset>
            <input type="submit" value="提交" />
        </form>
    

    在这里插入图片描述

    • 分组外围 会有外边框
    • 使用<legend>做标题

    • 示例4: 添加样式
    <head>
        <style>
        input[type='submit'],
        legend {
            background-color: black;
            color: white;
            padding: 6px 10px;
        }
        input[type='radio'] {
            /*改变单选按钮样式*/
            /*去除单选按钮原本的样式*/
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            /*重新画圆,重画单选按钮的圆圈,可以控制大小颜色*/
            border-radius: 50%;
            width: 16px;
            height: 16px;
            border: 2px solid #888;
            /*过渡*/
            -webkit-transition: 0.2s all linear;
            -o-transition: 0.2s all linear;
            transition: 0.2s all linear;
        }
        /*单选按钮选中时的样式*/
        input[type='radio']:checked {
            border: 6px solid black;
        }
        input[type='submit']:hover,
        input[type='submit']:focus {
            color: #999;
        }
        input[type='submit']:active {
            /*点击提交按钮时,按钮的背景色,文字颜色,边框*/
            background-color: white;
            color: black;
            outline: 1px solid black;
        }
        </style>
    </head>
    

    在这里插入图片描述

    • 单选按钮的样式
      • 本机样式: 默认情况下,这些控件的单选按钮(和复选框)样式 使用操作系统的本机样式。
      • 删除本机样式: 通过指定appearance: none,可以完全删除本机样式,并为它们创建自己的样式。
      • 动画选择: 我们使用了一个带有边框半径的边框和一个过渡 来创建一个不错的动画选择。border , border-radius ,transition
      • 选中的样式: :checked伪类 用于指定 选中单选按钮外观的样式。

    ⑼ 重置清空表单: type=“reset”

    • 重置清空表单 输入标签: input-type=reset
      • 用于
        • 如何定义 重置按钮 ?
        • 使用 <input type="reset" />重置属性值
        • 显示为 按钮: 类型为“reset”的元素呈现为 按钮
        • 重置为初始值: 有一个 默认的单击click事件处理程序 将表单中的所有输入 重置为其初始值。
      • 如何单击一个按钮, 清除 表单中的所有数据,重置为初始值 ?
        • 使用type="reset"属性值
    • 搭配属性
      • 按钮的标签: value的属性值 = 按钮上 显示的文本标签
      • 重置按钮的 快捷键: accesskey属性
      • 禁用 重置按钮: disabled禁用属性

    • 示例1: 使用重置按钮 清空表单 输入内容
    <form action="/example/html/form_action.asp" method="get">
      Email: <input type="text" name="email" /><br />
      Pin: <input type="text" name="pin" maxlength="4" /><br />
      <input type="reset" value="Reset" />
      <input type="submit" value="Submit" />
    </form>
    

    在这里插入图片描述

    • 重置 清空表单 按钮,会让填写的数据 都清空

    • 示例2: 指定 reset重置按钮的标签内容
            <input type="reset" value="清空输入内容" />
    

    在这里插入图片描述

    • 按钮的标签显示内容,由 值value属性指定

    • 示例3: 不指定 重置按钮的 标签内容( = 不设置value属性值)
            <input type="reset" />
    
    

    在这里插入图片描述

    • 按钮标签,默认显示为"重置"

    • 示例4: 添加重置按钮快捷键
    • accesskey="r", windows 系统下 是按下 alt + r
            <!-- 给重置按钮 添加快捷键 -->
            <label for="user">用户名:</label>
            <input type="text" />
            <input type="reset" value="清空输入内容" accesskey="r" title="按下 alt+r,清空输入内容" />
    

    在这里插入图片描述
    在这里插入图片描述

    • 快捷键 提示文本: title属性

    • 示例5: 禁用 重置按钮: disabled="disabled"
      在这里插入图片描述
    • 禁用和启用: 只需将disabled设置为truefalse,就可以在运行时启用和禁用按钮

    ⑽ 提交按钮: type=“submit”

    • ⑽ 提交按钮 输入标签: input-type=submit
      • 显示: submit 类型的元素 呈现为按钮。
      • 表单提交给服务器: 当单击click事件 发生时(通常是因为用户单击了按钮),用户代理尝试将 表单提交给服务器。
      • 如何向服务器 发送表单数据 ?
        • 使用 submit 提交属性值
      • 提交按钮 会将 数据 发送到哪里 ?
        • 表单的 action 数据提交操作 属性 中 指定的页面。
    • 搭配属性
      • ① 按钮的标签: value
        • value属性 包含一个DOMString,该DOMString 显示为 按钮的标签。否则按钮 没有真正的值。
        • 不设置value属性,不指定值,按钮将具有用户代理 选择的默认标签。
        • 一般默认值为’“提交”.
      • ② 接收表单数据的 url: formaction
        • 表单数据 提交到的URL
        • 覆盖表单的action属性(如果有的话)
      • ③ 表单数据编码类型 formenctype: 指定用于 表单数据的编码类型的 字符串
        • 一个字符串,用于标识向服务器提交表单数据时使用的编码方法。有三个容许值:
          • url编码, application/x-www-form-urlencoded
            • 这是默认值,在使用 encodeURI() 等算法 对文本进行 URL编码后,将表单数据作为 字符串发送。
          • 有上传文件, multipart/form-data
            • 使用 FormData API管理数据,允许将文件提交到服务器。
            • 如果表单包含<input type="file">,则必须使用此编码类型
          • 调试时, text/plain
            • 纯文本;主要用于调试,所以可以很容易地看到 要提交的数据。
      • ④ HTTP 方法 formmethod: HTTP 方法 (get or post) ,提交表单时使用
        • 一个字符串,指示提交表单数据时使用的HTTP方法;此值覆盖所有表单上给定的任何方法属性。允许的值是:
        • ㈠ url数据 get
          • ❶ 数据: URL 的构造方法是从formactionaction属性给出的URL开始,附加一个问号(“?”)字符,然后附加表单的数据
          • ❷ 编码: 按照formenctype或表单的enctype属性进行编码。
          • ❸ 数据发送: 然后使用HTTP get请求 将此 URL发送到服务器。
          • 这种方法适用于: 只包含 ASCII字符 且没有副作用的简单表单。
          • 这是默认值。
        • ㈡ 请求体数据 post
          • ❶ 请求体: 表单的数据包含在请求体中
          • ❷ 数据发送: 该请求体 使用HTTP post方法发送到formactionaction属性给出的URL。
          • 此方法支持: 复杂的数据 和文件附件。
        • ㈢ 不传输数据 dialog
          • 关闭对话框,不传输数据: 此方法用于指示, 按钮只是关闭与输入关联的对话框,而根本不传输表单数据。
      • ⑤ 不验证表单 formnovalidate: 如果存在布尔值,则表示表单的字段 在向服务器提交数据之前 不会受到约束验证
      • ⑥ 何处显示 formtarget: 指定名称或关键字的字符串,指示在何处显示 提交表单后收到的响应。
        • 字符串, 必须是浏览内容的名称,a tab, window, <iframe>
        • 除了标签、窗口或内联帧的实际名称之外,还有一些特殊的关键字可以使用:
        • 替换当前内容: _self
          • 相同框架: 将响应加载到 包含表单的相同浏览器内容中。
          • 这将用接收到的数据 替换当前文档。
          • 如果没有指定,则使用此默认值。
        • 新选项卡: _blank
          • 将响应加载到 一个新的、未命名的浏览器内容中。
          • 这通常是 与当前文档相同窗口中的 一个新选项卡,但可能会根据用户代理的配置而有所不同。
        • 父内容: _parent
          • 将响应加载到当前内容的父浏览内容中。
          • 如果没有父内容,则其行为与_self相同。
        • 根内容: _top
          • 将响应加载到最顶层的浏览器内容中
          • 如果当前内容是 最上面的内容,那么它的行为与_self相同。
    • 注意: 对于 <input type="image"><button>, formaction, formenctype, formmethod,formnovalidate, formtarget属性 也是可用的.
    • ⑥ 添加快捷键: accesskey属性
      • accesskey="s",在windows系统下,使用alt+s触发快捷键
      • 注意: accesskey需要和title搭配使用,提示 存在什么快捷键.
    • ⑦ 禁用按钮: disabled

    • 示例1: 点击提交按钮, 将数据 发送到服务器上 名为 “form_action.asp” 的页面
    <form action="/example/html/form_action.asp" method="get">
      <p>Email: <input type="text" name="email" /></p>
      <p>Pin: <input type="text" name="pin" maxlength="18" /></p>
      <input type="submit" value="Submit" />
    </form>
    
    

    在这里插入图片描述

    • 点击提交按钮,将表单的数据,发送给服务器
    • 提交按钮上显示的文本,通过value值属性来设置

    • 示例2: 设置提交按钮的 显示标签
      <input type="submit" value="提交表单" />
    

    在这里插入图片描述


    • 示例3: <input type="submit">, <input type="button">,<button> 三者的区别和使用
      • 提交表单: 按钮用于 提交表单, <input type="submit">
      • 自定义按钮: 创建一个 自定义按钮,然后使用JavaScript自定义行为: <input type="button">,<button>,最好使用<button>
      • 指定按钮的类型:
        • 表单中只有一个按钮<button>,这个按钮 会被视为“提交”按钮。
        • 所以应该明确指定 哪个按钮是 提交按钮,指明按钮的类型。


    1.2 input 标签的 type 属性的 html5 新增类型值

    属性值用于
    ① colorhtml5. 颜色. 用于 指定颜色 的控件。颜色选择器的UI 除了接受简单的 颜色作为文本外,没有 其他必需的特性.
    ② datehtml5. 日期. 用于输入日期(年、月、日,没有时间)的控件。
    ③ datetime-localhtml5. 无时区 日期和时间. 用于输入 日期和时间 的控件,没有时区。
    ④ timehtml5. 无时区 时间. 用于输入 没有时区的 时间值的控件。
    ⑤ monthhtml5 年月. 用于输入月份和年份的控件,没有时区。
    ⑥ week用于输入日期的控件,该日期由一个星期编号和一个没有时区的星期编号组成。
    ⑦ numberhtml5 数字 . 用于输入数字的控件。
    ⑧ rangehtml5 范围值 不精确数字.一种用于输入 精确值不重要的数字 的控件。
    ⑨ telhtml5 电话号码 . 输入电话号码的控件。
    ⑩ emailhtml5. 电子邮件. 用于编辑电子邮件地址的字段。
    ⑪ urlhtml5. url. 用于输入URL的字段。
    ⑫ searchhtml5 搜索文本. 用于 输入搜索字符串 的单行文本字段。换行符 将自动从输入值中 删除。
    dateime已废弃. 基于UTC时区 输入日期和时间(小时、分钟、秒和秒的几分之一)的控件。该特性 已从WHATWG HTML.Attributes 中删除.

    ⑴ 颜色: type=“color”

    • 颜色输入 颜色: <input type="color">
      • 可视 颜色选择器: 类型为“color”的元素 提供了一个 用户界面元素,该元素 允许用户指定一种颜色,方法是 使用 可视的颜色选择器界面
      • 十六进制格式 文本: 或者将颜色以“#rrggbb”十六进制格式 输入文本字段。
      • 没有 透明值: 只有简单的颜色(没有alpha通道)
      • 显示 不同: 文本输入 或者 颜色选择器.
        • 元素的表示形式 可能 因浏览器 或平台而异.
        • 它可能是一个 简单的文本输入,自动验证 以确保以正确的格式 输入颜色信息
        • 或者是 一个平台 标准的颜色选择器,或者是某种 自定义颜色选择器 窗口。
    • 搭配属性
      • 颜色值 value属性: 十六进制颜色值. 一个DOMString,它包含一个 7个字符的 字符串,以十六进制格式 指定 RGB颜色。
        • 小写存储: 虽然可以输入 大写 或小写的颜色,但它将以 小写形式 存储。该值 永远不 会以任何其他形式 出现,也永远 不会为空。
        • 有效 完全不透明的RGB: 如果将值 设置为十六进制表示法中 不是 有效的、完全不透明的RGB颜色,则值将 被设置为“#000000”
        • 7位 十六进制 颜色值:
          • 特别是,不能使用 CSS的标准化 颜色名称 或任何 CSS 函数语法 来设置值。
          • 此外,不支持 带有 alpha 透明值 通道的颜色;用 9个字符的十六进制表示法(例如#009900aa)指定颜色也会导致颜色被设置为“#000000”
          • 默认黑色: 如果没有 指定值,默认值是“#000000”,它是黑色的。该值必须采用 7个字符的十六进制 表示法,即“#”字符后 跟6个数字,每2个数字 代表红、绿和蓝,如下所示:“#rrggbb”
    • 浏览器支持
      在这里插入图片描述

    • 示例1: 使用 颜色选择器 选择颜色
      • 提供默认颜色: 使用 value 属性
        • 这样颜色 就会预先 被默认的颜色填满,颜色选择器(如果有的话)也会 默认为这个颜色:
        <div>
            <input type="color" id="head" name="head" value="#FF0000" />
            <label for="head">头部</label>
        </div>
        <div>
            <input type="color" id="body" name="body" value="#C04612" />
            <label for="body">身体</label>
        </div>
    

    在这里插入图片描述

    在这里插入图片描述


    • 示例2: 跟踪 颜色变化
      • 有两个事件 可用于 检测颜色值的更改
        • input 事件 和 change
          • input事件: 每当 颜色发生变化时,都会对<input>输入元素 触发input事件。
          • change事件: 当用户 解散颜色选择器时,将触发change更改事件。
        • 在这两种情况下,都可以通过 查看元素的value值 来确定元素的新值。
      • 选择文本: 浏览器 不支持颜色,而是直接用于 输入颜色字符串的 文本字段,您可以使用select()方法 来选择 当前编辑中的文本。
        • 如果浏览器 能很好地使用颜色,select()什么也不做。应该注意 这种行为,这样代码 就可以 在这两种情况下 做出适当的响应。
        • 如前所述,当浏览器 不支持 颜色选择器接口时,其颜色输入的实现 将是一个文本框,该文本框 自动验证内容,以确保值的格式 正确。例如,在 Safari 10.1中,您会看到如下内容 .

    ⑵ 年月日: type=“date”( yyyy-MM-dd )

    • 输入 日期: <input type="date">
      • 输入 日期: 自动验证内容 或 日期选择器.
        • 创建 允许用户 输入日期 的输入字段,或者使用 自动验证内容的文本框,或者使用 特殊的日期选择器 界面。
      • 结果值:年月日: 包括年、月和日,但不包括 时间。
        • type="time"type="datetime-local"的输入类型支持 时间 和 日期/时间 输入。
      • 浏览器支持: 控件的UI 通常因浏览器而异;目前支持尚不完善,在不受支持的浏览器中,控件会退化为一个简单的 文本输入框<input type="text">.
    • 浏览器支持

    在这里插入图片描述

    • 搭配属性
      • 当前默认日期: value属性,必须是yyyy-MM-dd格式.
      • 最大日期: max属性,最迟的 接受的日期
        • 约束验证: 如果元素中 输入的值 晚于此日期,则元素 将无法进行 约束验证。
        • 正确的 日期格式: 如果max属性的值 不是遵循yyyy-MM-dd格式的 有效字符串,则该元素 没有最大值。
        • 属性值 范围: 此值必须指定一个 日期字符串,其时间 晚于或等于min属性 指定的日期字符串。
      • 最小日期: min属性,最早的 接受的日期
        • 日期 早于此 将导致元素约束验证 失败。
        • yyyy-MM-dd格式: 如果min属性的值 不是遵循yyyy-MM-dd格式的 有效字符串,则该元素 没有最小值。
        • minmax: 此值 必须指定 一个日期字符串,该日期字符 串必须早于或等于 max属性指定的 日期字符串。
      • 日期 间隔天数: step,要使用的 步进间隔,例如 单击向上 和向下旋转器按钮时,以及用于验证时.
        • 数字 or any: step属性是一个数字,它指定值 必须遵循的粒度,或者特殊值any,只有与间隔相等的值 才是有效的.
        • 字符串值any表示不包含 任何间隔约束,并且允 许任何值(排除其他约束,如minmax)。
        • 对于日期输入,step的值 以 天 为单位给出.
        • 目前 属性支持度较差: 使用step属性 来更改 每次增加日期时 跳转的天数(例如,可能您只想让 星期六成为可选择的)。然而,在编写本文时,这在任何实现中似乎都不能有效地工作。
      • 必须填写:required="required",不能为空.
      • 回退成 文本输入时的 日期格式: pattern属性
        • yyyy-MM-dd格式: pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"

    • 示例1: 带默认值的 日期
      • 默认日期: 可以通过在value属性中 包含日期 来设置输入的默认值
        <label for="start-date">开始日期: </label>
        <input type="date" id="start-date" name="trip-start" value="2019-07-12" />
    
    • 不带默认日期
      在这里插入图片描述
    • 带 默认日期
      • 2019-07-12,写成2019-7-12会不识别,注意月和日 都是两位数,用0补充
      • yyyy-MM-dd格式
        在这里插入图片描述
    • 支持的 日期选择器

    在这里插入图片描述


    • 示例2: 带最大日期 和最小日期限制的 日期
        <label for="start-date">开始日期: </label>
        <input type="date" id="start-date" name="trip-start" value="2019-07-12" min="2019-01-01" max="2019-10-31" />
    

    在这里插入图片描述

    • 输出
      • 不能输入 日期范围外的值,只能是: min≤值≤max
      • 日期范围外的日期,日期选择器上 也选择不了

    • 示例3: 必须填写,不能为空.
    <form>
        <label for="start-date">开始日期: </label>
        <input type="date" id="start-date" name="trip-start" min="2019-01-01" max="2019-10-31" step="2" required="required"/>
      <input type="submit" value="提交" />
    </form>
    

    在这里插入图片描述

    • 字段为空,提交时 会出现提示.

    • 示例4: 不支持日期输入时的 日期格式问题: 回退成 文本输入时的 日期格式, pattern属性
      • 日期输入 变文本输入: 不支持的浏览器 会优雅地降级为 文本输入,
      • 日期格式 问题: 使用日期输入,实际值总是规范化为yyyy-mm-dd格式。另一方面,如果是文本输入,默认情况下浏览器不会识别日期的格式,人们写日期的方式有很多种
      • 解决办法1: 在日期输入中 添加pattern属性。即使日期输入 不使用它,文本输入回退 也会使用它
      • yyyy-MM-dd格式: pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"
        • 提交时的 错误提醒: 如果输入内容 与模式nnnn-nn-nn不匹配,提交时,浏览器将 显示一条错误消息(并将输入高亮 显示为无效),其中n是从0到9的数字。
        • 相对限制: 这并不能阻止 输入无效的日期 或格式不正确的日期,比如yyyy-dd-mm(而我们需要yyyy-mm-dd)。所以我们仍然有一个问题。
    <input type="date" id="bday" name="bday" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
    
    • IE 浏览器 不支持日期输入,显示的是文本框
      在这里插入图片描述
      在这里插入图片描述
    • 解决办法2: 分别输入年月日. 目前,以跨浏览器的方式 处理表单中的日期的 最佳方法是 让用户在单独的控件中 输入日期、月份和年份.
      • 月份 是硬编码的(因为它们总是相同的),而 日和年的 值 是根据 当前选择的月份和年份 以及当前年份动态生成的.
    • html
    • 嵌套关系
      • div>(label+input+span)
      • p
      • div>
        • span>(label+select)
        • span>(label+select>option)
        • span>(label+select)
    <form>
        <div class="nativeDatePicker">
          <label for="bday">Enter your birthday:</label>
          <input type="date" id="bday" name="bday">
          <span class="validity"></span>
        </div>
        
        <p class="fallbackLabel">Enter your birthday:</p>
        <div class="fallbackDatePicker">
          <span>
            <label for="day">Day:</label>
            <select id="day" name="day">
            </select>
          </span>
          <span>
            <label for="month">Month:</label>
            <select id="month" name="month">
              <option selected>January</option>
              <option>February</option>
              <option>March</option>
              <option>April</option>
              <option>May</option>
              <option>June</option>
              <option>July</option>
              <option>August</option>
              <option>September</option>
              <option>October</option>
              <option>November</option>
              <option>December</option>
            </select>
          </span>
          <span>
            <label for="year">Year:</label>
            <select id="year" name="year">
            </select>
          </span>
        </div>
    </form>
    
    • javascript
      • 检查类型: 检测浏览器是否支持 日期输入<input type="date">
        • 创建一个新的<input>元素,将其类型 设置为date 检查 日期输入的类型 设置为 什么,
      • 隐藏和显示: 不支持的浏览器 将返回text,因为date类型 返回到text类型,这时候,隐藏不支持的 日期选择器,即<input type="date">标签,显示回退的控件<select> 分别进行设置的 年 月 日.
    // 定义变量 define variables
    var nativePicker = document.querySelector('.nativeDatePicker');
    var fallbackPicker = document.querySelector('.fallbackDatePicker');
    var fallbackLabel = document.querySelector('.fallbackLabel');
    
    var yearSelect = document.querySelector('#year');
    var monthSelect = document.querySelector('#month');
    var daySelect = document.querySelector('#day');
    
    // 初始化 隐藏回控件 hide fallback initially
    fallbackPicker.style.display = 'none';
    fallbackLabel.style.display = 'none';
    
    // 测试新的日期输入是否返回到文本输入 test whether a new date input falls back to a text input or not
    var test = document.createElement('input');
    test.type = 'date';
    
    // 如果是,运行if(){}块中的代码 if it does, run the code inside the if() {} block
    if(test.type === 'text') {
      // 隐藏本机日期选择器 并显示回退控件 hide the native picker and show the fallback
      nativePicker.style.display = 'none';
      fallbackPicker.style.display = 'block';
      fallbackLabel.style.display = 'block';
    
      // 动态填充日期和年份 populate the days and years dynamically
      // (月份总是相同的,因此是硬编码的 the months are always the same, therefore hardcoded)
      populateDays(monthSelect.value);
      populateYears();
    }
    
    function populateDays(month) {
      // 删除的当前日的选项集,准备填充下一组 delete the current set of <option> elements out of the
      // day <select>, ready for the next set to be injected
      while(daySelect.firstChild){
        daySelect.removeChild(daySelect.firstChild);
      }
    
      //创建变量 来保存 要注入的新天数  Create variable to hold new number of days to inject
      var dayNum;
    
      // 31 or 30 days? 根据月份 判断天数
      if(month === 'January' || month === 'March' || month === 'May' || month === 'July' || month === 'August' || month === 'October' || month === 'December') {
        dayNum = 31;
      } else if(month === 'April' || month === 'June' || month === 'September' || month === 'November') {
        dayNum = 30;
      } else {
      // 如果月份是二月,计算它是否是闰年 If month is February, calculate whether it is a leap year or not
        var year = yearSelect.value;
        var isLeap = new Date(year, 1, 29).getMonth() == 1;
        isLeap ? dayNum = 29 : dayNum = 28;
      }
    
      // 在天数的下拉列表中 输入选项的正确的数字 inject the right number of new <option> elements into the day <select>
      for(i = 1; i <= dayNum; i++) {
        var option = document.createElement('option');
        option.textContent = i;
        daySelect.appendChild(option);
      }
    
      // 如果已经设置了前一天,则将daySelect的值 设置为该日,以避免 在更改年份时将该日跳回到1
      if(previousDay) {
        daySelect.value = previousDay;
    
        // 如果将前一天 设置为一个较大的数字,比如31,然后选择一个天数 较少的月份(例如二月),代码的这一部分 将确保选中可用的最高天数,而不是显示一个空白的daySelect
        if(daySelect.value === "") {
          daySelect.value = previousDay - 1;
        }
    
        if(daySelect.value === "") {
          daySelect.value = previousDay - 2;
        }
    
        if(daySelect.value === "") {
          daySelect.value = previousDay - 3;
        }
      }
    }
    
    function populateYears() {
      // 把今年作为一个数字
      var date = new Date();
      var year = date.getFullYear();
    
      // 让今年 和之前的100年成为可能的 <select>的选项
      for(var i = 0; i <= 100; i++) {
        var option = document.createElement('option');
        option.textContent = year-i;
        yearSelect.appendChild(option);
      }
    }
    
    // 当年和月的<select>值改变时, 重新运行populateDays(),以防更改影响可用天数
    yearSelect.onchange = function() {
      populateDays(monthSelect.value);
    }
    
    monthSelect.onchange = function() {
      populateDays(monthSelect.value);
    }
    
    //选择保留一天
    var previousDay;
    
    //更新 以前设置为使用populateDays()结束的日期 update what day has been set to previously see end of populateDays() for usage
    daySelect.onchange = function() {
      previousDay = daySelect.value;
    }
    

    ⑶ 年月日 小时分钟: type=“datetime-local”( yyyy-MM-ddThh:mm )

    • 输入 日期和时间: <input type="datetime-local">
      • 具体到分钟,不支持秒: 创建输入控件,使用户 可以轻松地 输入日期和时间,包括年、月、日 以及 以小时和分钟 为单位的 时间。
      • 回退成 文本输入:不支持该类型的浏览器,会回退成文本输入 <input type="text">
        • 回退成文本时的 日期格式限制: pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}"
      • 年月日 小时分钟:
        • 控件仅用于 表示 本地日期和时间,而不一定表示 用户的 本地日期和时间。
        • 换句话说,一个实现 应该允许 任何年、月、日、小时和分钟的 有效组合——即使这样的组合 在用户的本地时区 是无效的.
      • 单独的date日期 和time时间输入:
        • 由于浏览器对datetime-local的支持有限,以及输入的工作方式 存在差异,因此目前最好 还是使用 框架或库 来表示这些内容.
        • 或者使用 您自己的自定义输入。另一个选项是 使用单独的date日期 和time时间输入,每个输入都比datetime-local得到更广泛的支持。
    • 浏览器支持
      在这里插入图片描述
    • 搭配属性:value,min,max,value,step,required
      • 遵循 yyyy-MM-ddThh:mm格式
      • step 间隔秒数: 对于datetime-local输入,step的值 以秒为单位给出,比例因子为1000(因为底层数值 以毫秒为单位)。step的默认值是60,表示60秒(或1分钟,或60,000毫秒)。

    • 示例1: 设置具体到分钟的 日期和时间
      • 设置默认值 和时间限制范围
      <label for="meeting-time">请选择会议时间:</label>
        <input type="datetime-local" id="meeting-time" name="meeting-time" value="2019-07-13T08:00" min="2019-07-12T00:00" max="2019-07-15T00:00" />
    

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    • 显示值 和实际值 不同: 显示的日期和时间格式 与实际值 不同;
      • 显示的日期和时间 根据用户的地区(由其操作系统报告)进行格式化,而日期/时间值总是格式化为 yyyy-MM-ddThh:mm
      • 例如,当上面的值 提交到服务器时,它看起来就像partydate=2017-06-01T08:30,多了 T,不是 / 分隔 ,而是连字符 - 分隔的。
      • get 转义冒号: 如果通过HTTP GET方法 提交此类数据,则需要 转义冒号 以包含在URL参数中,例如partydate=2017-06-01T08:30

    ⑷ 年月: type=“month” ( YYYY-MM )

    • 输入月份和年份: <input type="month">
      • 类型month的元素创建输入字段,允许用户 输入月份和年份,从而可以方便地输入月份和年份。

      • 字符串和格式: 该值是一个 字符串,其值的格式为 “YYYY-MM”,其中YYYY是四位数的年份,然后是连字符(“-”),MM是月份号。

      • 浏览器支持:

        • 控件的UI : 通常因浏览器而异;
        • 目前的支持: 还不完善,只有Chrome/Opera和Edge桌面版——以及大多数现代移动浏览器版本——有可用的实现。在不支持month输入的浏览器中,降级文文本输入.<input type="text">,尽管可能会 自动验证输入的文本,以确保其格式 符合预期。
        • 在这里插入图片描述
      • 显示值和实际值的区别: 需要注意的一点是,显示的日期格式与实际值不同;大多数用户代理 根据用户操作系统的设置语言环境 以适合于语言环境的形式 显示月份和年份,而日期的value总是格式化为yyyy-MM

    • 搭配属性:
      • ① 最大年月 max: 将最近的年份和月份接受为有效输入
        • 如果元素中输入的value 超过此值,则元素将 无法进行约束验证。
        • 如果max 属性的值 不是“yyyy-MM”格式的 有效字符串,则该元素 没有最大值。
      • ② 最小年月 min : 作为有效输入接受的最早年份和月份
      • 只读 不能编辑 readonly: 布尔值,如果存在,则表示 不能编辑输入值
        • 因为只读字段不能有值,所以required必填属性 对指定readonly只读属性的输入没有任何影响
      • ③ 间隔值 step: 在递增 和递减输入字段值时 使用的步进间隔
        • step属性是 一个数字,它指定值必须遵循的粒度,或者特殊值any,如下所述。只有与步进基础相等的值才是有效的(如果指定了最小值,则为其他值,如果没有提供这两个值,则为适当的默认值)。
        • 字符串值any表示 不包含任何步进,并且允许任何值(排除其他约束,如minmax)。
        • 四舍五入: 当用户输入的数据不符合步进配置时,用户代理可以四舍五入到 最近的有效值,当有两个同样接近的选项时,用户代理更喜欢 正向的数字。
        • 对于month输入,step的值以月为单位给出,比例因子为1(因为底层数值也是以月为单位)。步骤的默认值是1个月。

    • 示例1: 输入年份和月份,带默认值
      • 设置一个默认值: 在value属性中 包含一个月和一年,如下所示:
      • value="2019-05"
      • 显示值和实际值的不同: 当将下面的值 提交给服务器时,它看起来就像startdate=2019-05(name=value)。
        <label for="start">开始年月:</label> 
        <input type="text" type="month" id="start" name="startdate" min="2019-01" value="2019-05" />
    
    
    • 带默认值的指定年月

    在这里插入图片描述

    • 不带默认值value属性
      • 在这里插入图片描述
    • 指定最小和最大时间,在提交时会有提示
      • 在这里插入图片描述
      • 在这里插入图片描述

      • 示例2: 浏览器兼容问题
        • 约束模式pattern="[0-9]{4}-[0-9]{2}"
        • 单独输入年份和月份: 以跨浏览器的方式 处理表单中的日期(直到所有主流浏览器 都支持它们一段时间)的最佳方法 是让用户 在单独的控件中 输入月份和年份
          • 使用<select>下拉列表 元素;或者使用JavaScript库,如 jQuery date picker 插件。
        • 处理思路:当浏览器支持type="month"的输入时,直接使用这个元素,当浏览器不支持时,使用单独输入年份和月份.
          • 如何判断 浏览器是否支持type="month": 测试新的日期输入 是否返回到文本输入
            `
    • html
    <form>
      <div class="nativeDatePicker">
        <label for="month-visit">What month would you like to visit us?</label>
        <input type="month" id="month-visit" name="month-visit">
        <span class="validity"></span>
      </div>
      <p class="fallbackLabel">What month would you like to visit us?</p>
      <div class="fallbackDatePicker">
        <div>
          <span>
            <label for="month">Month:</label>
            <select id="month" name="month">
              <option selected>January</option>
              <option>February</option>
              <option>March</option>
              <option>April</option>
              <option>May</option>
              <option>June</option>
              <option>July</option>
              <option>August</option>
              <option>September</option>
              <option>October</option>
              <option>November</option>
              <option>December</option>
            </select>
          </span>
          <span>
            <label for="year">Year:</label>
            <select id="year" name="year">
            </select>
          </span>
        </div>
      </div>
    </form>
    
    • js
    // define variables 定义变量
    var nativePicker = document.querySelector('.nativeDatePicker');
    var fallbackPicker = document.querySelector('.fallbackDatePicker');
    var fallbackLabel = document.querySelector('.fallbackLabel');
    
    var yearSelect = document.querySelector('#year');
    var monthSelect = document.querySelector('#month');
    
    // hide fallback initially 隐藏回退内容
    fallbackPicker.style.display = 'none';
    fallbackLabel.style.display = 'none';
    
    // 测试新的日期输入是否返回到文本输入 test whether a new date input falls back to a text input or not
    var test = document.createElement('input');
    test.type = 'month';
    // if it does, run the code inside the if() {} block
    if(test.type === 'text') {
      // 隐藏本机选择器并显示回退内容 hide the native picker and show the fallback
      nativePicker.style.display = 'none';
      fallbackPicker.style.display = 'block';
      fallbackLabel.style.display = 'block';
    
      // 动态填充年份 populate the years dynamically 
      // (the months are always the same, therefore hardcoded)
      populateYears();
    }
    
    function populateYears() {
      // 将当前年份作为一个数字 get the current year as a number
      var date = new Date();
      var year = date.getFullYear();
    
      // 让今年和之前的100年成为可能 Make this year, and the 100 years before it available in the year <select>
      for(var i = 0; i <= 100; i++) {
        var option = document.createElement('option');
        option.textContent = year-i;
        yearSelect.appendChild(option);
      }
    }
    

    • 知识拓展: js中 =====的区别
      • ==表示相等 (值相等)
        • 等值符,当等号两边的类型相同时,直接比较值是否相等,若不相同,则先转化为类型相同的值,再进行比较;
      • ===表示恒等(类型和值 都要相等)
        • 等同符,当两边值的类型相同时,直接比较值,若类型不相同,直接返回false;
        • 所以类型必须是相同的,可以用来用来判断 值的类型.
      • js在比较的时候 如果是==会先做 类型转换,再判断值得大小,如果是===类型和值必须 都相等。

    ⑸ 年份 周号: type=“week” ( yyyy-Www )

    • 输入年份和周号: <input type="week">
      • 类型为week的元素 创建输入字段,允许轻松输入 年份和该年份的ISO 8601周号(即,第1至52或53周)。
      • 值的格式: yyyy-Www,注意,Www,前缀W必须大写,否则时间值无效.min="2019-W20"有效,min="2019-w20"无效值.
    • 浏览器支持
      • 跨浏览器支持 目前受限,目前只支持Chrome/OperaMicrosoft Edge
        在这里插入图片描述
    • 降级: 在不支持的浏览器中,控件降级为 与单行文本框<input type="text">功能相同。
    • 外观: 插槽+弹出+清除按钮. 在Chrome/Opera中,星期控件 提供了填写 星期和年份值的插槽,弹出的日历界面更直观 地选择它们,以及一个“X”按钮来 清除控件的值。
      • 360 浏览器中的外观(同Chrome内核)
        • 在这里插入图片描述
      • The Edge 浏览器: 用滑动卷轴打开周和年选择器。
        • 在这里插入图片描述
    • 搭配属性
      • ① 值 value: 传递值+默认值

        • 值的格式: 需要注意的是,显示的格式 可能与实际值不同,实际值总是格式化为yyyy-Www,注意,Www,前缀W必须大写,否则时间值无效.
        • 显示值和实际值格式: 显示值,也许是2017年1周, 提交的值总是week=2017-W01.的格式.其他时间值也是如此.
      • ② 最大值max: 将最近的年份和周 作为有效输入接受

        • 必须是 yyyy-Www的时间值格式
      • ③ 最小值 min: 最早接受的年份和周 作为有效输入

        • 必须是 yyyy-Www的时间值格式
      • ④ 只读 readonly: 一个布尔值,如果存在,表示用户不能编辑字段的内容

        • 只读字段不能有值,因为是只读的,用户无法输入值,所以required对指定readonly属性的输入没有任何影响。
        • readonly属性,则required不能为空属性无效,提交时为空也有效,也不会有提示.
      • ⑤ 间隔值 step: 用于用户界面和约束验证的 步进间隔(允许值之间的距离)

        • 对于week周输入,step的值 以为单位,比例系数为604,800,000(因为底层数值 以毫秒 为单位)。
        • step的默认值为1,表示一周。
        • 默认的步进基数是-259,200,000,这是1970年第一周的开始(“1970- w01”)。
        • step值目前在浏览器中无效,即使是支持type=week的浏览器,所以周号输入中 尽量避免使用这个属性.
        • 目前,还不清楚“any”属性值 在与星期输入一起使用时意味着什么。
      • ⑥ 必填项required: 所在字段不能为空.


    • 示例1: 星期输入控件,指定 年份和周号范围
    
            <div>
                <label for="startWeek">请选择开始周:</label>
                <input type="week" id="startWeek" step="2" name="startWeek" min="2019-W20" max="2019-W23" />
            </div>
    
            <input type="submit" value="提交表单" />
    
    • 输出
      • 时间选择: 年份直接限定在了2019年,月份只有20-23才能选择
        在这里插入图片描述
    • 手动输入: 可以手动输入 超出范围的周号,但提交时会报错 并提醒:
      • 在这里插入图片描述

    • 示例2: 解决浏览器不支持,浏览器兼容问题

      • 单独输入
        • 以跨浏览器的方式 处理表单中 星期/年 的最佳方法是, 让用户在单独的控件中 输入星期号和年份(使用<select> 元素 或使用 jQuery等JavaScript库。
      • 周号值: 是由下面的JavaScript代码动态生成的。
      • 测试 浏览器支持
        • 测试: 创建一个新的<input>元素,将其类型设置为week,然后立即检查 其类型设置为 什么。不支持的浏览器将返回文本text.
        • 显示UI: 如果<input type="week">不受支持,我们将隐藏本地选择器并显示回退选择器UI (<select>)。
    • html

    <form>
      <div class="nativeWeekPicker">
        <label for="week">你想从哪一周开始?</label>
        <input id="week" type="week" name="week"
               min="2017-W01" max="2018-W52" required>
        <span class="validity"></span>
      </div>
      <p class="fallbackLabel">你想从哪一周开始?</p>
      <div class="fallbackWeekPicker">
        <div>
          <span>
            <label for="week">Week:</label>
            <select id="fallbackWeek" name="week">
            </select>
          </span>
          <span>
            <label for="year">Year:</label>
            <select id="year" name="year">
              <option value="2017" selected>2017</option>
              <option value="2018">2018</option>
            </select>
          </span>
        </div>
      </div>
    </form>
    
    • js
    // 定义变量
    var nativePicker = document.querySelector('.nativeWeekPicker');
    var fallbackPicker = document.querySelector('.fallbackWeekPicker');
    var fallbackLabel = document.querySelector('.fallbackLabel');
    
    var yearSelect = document.querySelector('#year');
    var weekSelect = document.querySelector('#fallbackWeek');
    
    // 隐藏回退控件
    fallbackPicker.style.display = 'none';
    fallbackLabel.style.display = 'none';
    
    // 测试新的日期输入是否返回到文本输入
    var test = document.createElement('input');
    test.type = 'week';
    // 如果是,那么运行if(){}块中的代码
    if(test.type === 'text') {
      // 隐藏本机选择器并显示回退选择器
      nativePicker.style.display = 'none';
      fallbackPicker.style.display = 'block';
      fallbackLabel.style.display = 'block';
    
      // 动态填充周号
      populateWeeks();
    }
    
    function populateWeeks() {
      // 用52周填充week select
      for(var i = 1; i <= 52; i++) {
        var option = document.createElement('option');
        option.textContent = (i < 10) ? ("0" + i) : i;
        weekSelect.appendChild(option);
      }
    }
    
    • 输出

    在这里插入图片描述


    ⑹ 小时 分钟,可选的秒: type=“time”( hh:mm, hh:mm:ss)

    • 输入小时和分钟,可选的秒: <input type="time">

      • 类型为time的元素 创建输入字段,这些字段的设计目的是 让用户方便地输入时间 (小时和分钟,以及可选的秒)。
      • 显示: 控件的用户界面 因浏览器而异。
        • 在Chrome/Opera中:
          • 在这里插入图片描述
          • 可以根据操作系统的区域设置以12小时或24小时的格式输入小时和分钟,上下箭头可以增加或减少当前选择的组件。在某些版本中,提供了一个“X”按钮来清除控件的值。
        • Firefox :
          • 在这里插入图片描述
          • 时间控制与Chrome 非常相似,只是没有上下箭头。它还使用12小时或24小时的格式输入时间,基于系统区域设置。提供一个“X”按钮来清除控件的值。
        • Edge:
          • 在这里插入图片描述
          • 时间控制稍微复杂一些,打开一个小时和分钟的 选择与滑动卷轴。和Chrome一样,它使用12小时或24小时的格式来输入时间,具体取决于系统语言环境.
      • 数据提交
        • 编码: 提交 包含时间输入的 表单时,在将该值 包含到表单数据 之前对其进行编码。
        • 编码的数据格式: 对于时间输入,表单的 时间数据输入 格式 name=hh%3Amm中,如果包含秒,则name=hh%3Amm%3ass。(%3a,冒号: 的编码)
      • 浏览器支持: 在现代浏览器中支持很好,Safari,IE 是尚未实现它的主流浏览器;
        • 在这里插入图片描述
      • 降级: 在Safari和其他不支持<time>的浏览器中,它会优雅地降级为 单行文本框<input type="text">
    • 搭配属性

      • ① 默认值 value:
        • 在创建<input>输入 元素时,可以在value值属性中 包含一个有效的时间,从而为输入设置一个默认值.
      • ② 最大值 max: 接受的 最新时间,在语法中 按时间值格式描述
        • 必须按照 时间值格式
      • ③ 最小值 min: 接受作为有效输入的 最早时间
        • 必须按照 时间值格式-
      • ④ 只读 readonly: 一个布尔属性,如果存在,表明时间输入的内容 不能 被用户编辑的
        • 属性影响: 必填和只读, 因为只读字段 不能有值,所以required 必填属性 对指定只读readonly属性的输入 没有任何影响。
      • ⑤ 间隔值 step: 用于用户界面 和约束验证期间的步进间隔
        • 一个数字,它指定 值必须遵循的粒度,或者特殊值any.
        • 只有与 间隔值要求相等的值 才是有效的.
        • 字符串值any表示 不包含任何 特定间隔值要求,并且允许 任何值(排除其他约束,如minmax)。目前,还不确定stepany属性值 在与时间输入一起使用时的值。
        • 近似值: 当用户输入的数据 不符合步进配置时,用户代理可以四舍五入到最近的有效值
        • 优先 正向近似值: 当有两个同样接近的选项时,用户代理更喜欢正向的数字。
        • 单位: 对于时间输入,step的值 以 为单位给出,比例因子 为1000(因为底层数值 以毫秒为单位)。
        • 时间的默认间隔值: 60秒, step的默认值是60,表示 60秒(或1分钟,或60,000毫秒)。
        • 显示秒: 如果指定的间隔值 step 小于60秒(1分钟),输入的时间 将在小时和分钟 旁边显示一个秒输入区域:
      • ⑥必填项 required: 所在字段不能为空.

    • 示例1: 指定小时和分钟的时间
           <!-- 输入时间 -->
            <div>
                <label for="appt-time">请选择会议时间: </label>
                <input type="time" id="appt-time" name="appt-time" />
            </div>
            <input type="submit" value="提交表单" />
    
    • 输出
      • 在这里插入图片描述
    • 默认的time类型,只有小时和分钟

    • 示例2: 输入 小时,分钟,带秒的时间
      • 时间的默认间隔值: 60秒, step的默认值是60,表示 60秒(或1分钟,或60,000毫秒)。
        • 显示秒: 如果指定的间隔值 step 小于60秒(1分钟)
          • 1-59的整数值: 输入的时间 将在小时和分钟 旁边显示一个秒的输入区域
        • 显示毫秒: 间隔值 带1位小数点的,会显示毫秒
            <div>
                <label for="appt-time">请选择会议时间: </label>
                <input type="time" id="appt-time" name="appt-time" step="2" />
            </div>
            <input type="submit" value="提交表单" />
    
    • step="2",显示秒,秒的间隔值为 2
      • 点击箭头会使秒值 改变2秒,但不会影响小时或分钟。分钟(或小时)只能用于当您以秒为单位指定分钟(或小时)的数量时,例如120分钟(2分钟)或7200小时(2小时)。
        在这里插入图片描述
    • step="60.1",显示毫秒
      在这里插入图片描述
    • step="120",间隔120秒,2分钟,分钟每次改变2分钟,不影响小时

    在这里插入图片描述

    • stpe的浏览器差异:
      • 在 Firefox 中没有箭头,所以没有使用step值。但是,如果它确实添加了与分钟部分相邻的 秒的输入区域。
      • step值在Edge中似乎没有效果。

    • 示例3: 设置 最大和最小时间: min="09:00" max="18:00"
      • 属性值 必须符合时间格式: hh:mm, 注意 09:00,9之前的0 不能省略,否则不是有效时间.
      • 限制时间范围: 使用minmax属性 来限制用户可以选择的有效时间。
      • 效果: 无法选择,在一些时间选择器(例如 Edge)中,超出指定范围的时间 甚至无法选择。

    在这里插入图片描述

    • 自动限定 时间范围: 上下选择键,自动限定了时间范围,从09:00-18:00,才能选择.
      在这里插入图片描述
    • 无效提示: 手动输入,无效的时间,在提交时,会显示提示信息.

    • 服务器端验证 和客户端验证
      • 不能替代: HTML 客户端的表单验证 不能替代确保输入数据格式正确的服务器脚本。
        • 对某些人来说,要对HTML进行调整以绕过验证或完全删除验证太容易了。
        • 也有可能有人完全绕过HTML,直接将数据提交给服务器。
      • 必须有服务器端验证: 如果服务器端代码 无法验证它接收到的数据,那么当提交格式不正确的数据(或者数据太大、类型错误等等)时,灾难就会发生。

    • 示例4:不支持 time类型的浏览器 time类型 降级为text文本类型输入的 处理方法

      • 降级成单行文本 造成的问题:
        • 用户界面 和数据处理: 不支持时间输入的浏览器会优雅地降级为文本输入,但这会 在用户界面的一致性(呈现的控件将会不同)和数据处理方面造成问题。
        • 时间格式问题: 第二个问题更为严重;如前所述,时间输入的值 总是被规范化为hh:mmhh:mm:ss格式。另一方面,使用文本输入时,默认情况下浏览器不知道时间应该是什么格式,人们写时间的方式有多种.
      • 解决办法:
        • 方法1: time时间输入上 放置一个pattern属性。
          • 即使time时间输入 不使用它,文本输入回退 也会使用它。pattern="[0-9]{2}:[0-9]{2}"
          • nn:nn模式 不匹配,那么不支持它的浏览器将显示一条错误消息(并将输入高亮显示为无效),其中n是从0到9的数字。
          • 不能阻止无效时间: 当然,这并不能阻止人们输入 无效的时间,或者遵循该模式的 格式不正确的时间。
          • 用户不知道时间的 确切格式。
        • 方法2: 在单独的控件中 输入小时和分钟和秒.
          • 目前,以跨浏览器的方式 处理表单中的time时间的最佳方法 是让用户在单独的控件中 输入小时和分钟(如果需要,还可以输入秒)
          • <select> 元素是最常用的;
          • 或者使用JavaScript库,如 jQuery timepicker 插件。
    • 在单独的控件中 输入小时和分钟和秒.

      • 动态生成: 回退成文本的 时间选择器的<select>元素的 小时和分钟值 (下拉列表的子元素 <option>)是动态生成的。
      • 检查 浏览器支持: 检测浏览器是否支持< input type = "time" >
        • 创建元素+设置类型+判断类型+隐藏和显示元素
          • 我们创建一个新的 <input>元素,将其type设置为时间,然后立即检查 其类型设置为什么了.——
          • 不支持的浏览器 将返回文本,因为类型落回类型文本的时间。
          • 如果不支持 <input type="time">,则隐藏本机选择器 并显示回退选择器UI (<select>)。
    • html

    <form>
          <!-- 针对支持的浏览器: 本地选择器 -->
            <div class="nativeTimePicker">
                <label for="appt-time">请选择会议时间: (时间段 12:00 to 18:00): </label>
                <input id="appt-time" type="time" name="appt-time" min="12:00" max="18:00" required>
                <span class="validity"></span>
            </div>
    
            <!-- 针对不支持的浏览器: 回退成文本时的 时间选择器 -->
            <p class="fallbackLabel">请选择会议时间:  (时间段 12:00 to 18:00):</p>
            <div class="fallbackTimePicker">
                <div>
                    <span>
                        <label for="hour">Hour:</label>
                        <select id="hour" name="hour">
                          <!-- 子元素<option>,是用js动态添加的 -->
                        </select>
                    </span>
                    <span>
                        <label for="minute">Minute:</label>
                        <select id="minute" name="minute">
                          <!-- 子元素<option>,是用js动态添加的 -->
                          
                        </select>
                    </span>
                </div>
            </div>
        </form>
    
    • js
    
          // 定义变量
          var nativePicker = document.querySelector('.nativeTimePicker');
          var fallbackPicker = document.querySelector('.fallbackTimePicker');
          var fallbackLabel = document.querySelector('.fallbackLabel');
    
          var hourSelect = document.querySelector('#hour');
          var minuteSelect = document.querySelector('#minute');
    
          // 初始化 隐藏回退选择器,即下拉列表
          fallbackPicker.style.display = 'none';
          fallbackLabel.style.display = 'none';
    
          // 测试: 测试新的 time 类型输入,是否回退到文本输入
          // 新建元素+设置类型+判断元素类型
          var test = document.createElement('input');
          test.type = 'time';
          // 如果是text类型,即回退成文本输入了,代表浏览器不支持,运行if中的代码
          if(test.type === 'text') {
            // 隐藏本机选择器,并显示回退选择器
            // 隐藏+显示
            nativePicker.style.display = 'none';
            fallbackPicker.style.display = 'block';
            fallbackLabel.style.display = 'block';
    
            // 动态填充小时和分钟
            populateHours();
            populateMinutes();
          }
    
          function populateHours() {
            // 填充小时下拉列表 <select> ,限制一天6个小时,时间段 12;00-18:00
            // 判断+创建+赋值+添加
            for(var i = 12; i <= 18; i++) {
              var option = document.createElement('option');
              option.textContent = i;
              hourSelect.appendChild(option);
            }
          }
    
          function populateMinutes() {
            // 填充分钟下拉列表 <select> 每小时60分钟,0-59
            for(var i = 0; i <= 59; i++) {
              var option = document.createElement('option');
              option.textContent = (i < 10) ? ("0" + i) : i;
              minuteSelect.appendChild(option);
            }
          }
    
          // 如果小时是18,分钟值设置为00
          // 不能选择超过18:00的时间
           function setMinutesToZero() {
             if(hourSelect.value === '18') {
               minuteSelect.value = '00';
             }
           }
    
           hourSelect.onchange = setMinutesToZero;
           minuteSelect.onchange = setMinutesToZero;
    

    ⑺ 输入数字: type=“number”

    • 输入数字: <input type="number">
      • number类型的元素 用于让用户输入一个数字。
      • 内置验证: 它们包括用于 拒绝非数值项的 内置验证。
      • 步进箭头: 浏览器可以选择提供步进箭头,让用户使用鼠标 或简单地用指尖点击 来增加或减少值。
      • 简化 和自动验证: 简化在构建用户界面和在表单中输入数字的逻辑时的工作。当您使用正确的类型值number创建一个数字输入时,您将自动验证输入的文本是否是一个数字,通常还会得到一组up和down按钮,用于上下移动该值。
      • 数字键盘: 移动浏览器 通过显示一个更适合在用户试图输入值时输入数字的特殊键盘 (数字键盘),进一步帮助用户体验。
      • 有效值:
        • 当一个数字输入 为空 或者输入一个数字时,它被认为是有效的,但是在其他情况下 是无效的。
        • 如果使用了required属性,则输入在为空时不再被认为是有效的。
        • 任何数字都是可以接受的值,只要它是一个 有效的浮点数(即不是NaN或无穷大)。NaN: 不是一个数字.
      • 浏览器支持
        • 在这里插入图片描述
    • 搭配属性
      • ① 最大值 max : 此输入要接受的最大值
        • 此输入要接受的最大值。
        • 如果元素中输入的值 超过此值,则元素将无法进行约束验证。
        • 如果max属性的值不 是一个数字,那么元素 就没有最大值。
        • 此值必须大于或等于 min属性的值。
      • ② 最小值 min: 此输入要接受的最小值
      • ③ 占位符 示例值 placeholder: 当字段为空时,要在字段内显示的示例值
        • 占位符属性是一个字符串,它向用户提供一个简短的提示,提示字段中 需要哪些信息。
        • 它应该是一个 显示预期数据类型 的单词或短语,而不是一个解释性消息。文本 不能包含回车或换行。
        • 如果可以,避免使用占位符属性。它在语义上 不如解释表单的其他方法有用,并且可能导致内容 出现意想不到的技术问题。
        • 用于提示输入应该取 值的格式。当元素的值为“”时,它将显示在编辑框中。一旦数据输入框中,占位符就消失了;如果框被清空,占位符将重新出现。
      • ④ 只读 readonly: 控制值是否只读的布尔属性
      • ⑤ 间隔值 step : 当使用向上和向下箭头 来调整值以及验证时 使用的步进间隔
    • 客户端验证和 服务器验证: 重要的是要记住,用户可以在幕后修改HTML,因此站点不能出于任何安全目的 使用简单的客户端验证。您必须在服务器端 验证任何事务,其中提供的值 可能具有任何类型的安全含义。
    • △: 数字输入 不支持使用pattern属性 使输入的值 符合特定的 regex模式。使用min,max,step进行一定的约束.

    • 示例1: 输入一个数字,设置最小值和最大值
    <form>
     
        <label for="product">产品数量</label>
        <input type="number" id="product" min="5" max="15" name="product" />
        <input type="submit" value="提交" />
    </form>
    
    • 自带验证
      • 在这里插入图片描述
      • 在这里插入图片描述

    • 示例2: 自带默认值: value="10"
      • 在这里插入图片描述

    • 示例3: 占位符:<input type="number" placeholder="请输入小于10的值" max="10">
      • 在这里插入图片描述

    • 示例4:
      • ① 设置间隔值
    	<form action="">
        <input type="number" placeholder="请输入10的倍数" step="10" min="0" max="100" style="width:120px" />
        	<input type="submit" value="提交" />
        </form>
    
    • 在这里插入图片描述
      在这里插入图片描述

    • ② 指定小数点位数: 使用step间隔值 属性

      • 数字输入的一个问题是,它们的步长默认为1——如果您试图输入一个小数,比如“1.1”,它将被认为是无效的。如果您想要输入一个需要小数的值,需要在step值中反映这一点.
    • 允许小数点后两位:step="0.01"

    
    	<form action="">
        <input type="number"  />
        	<input type="submit" value="提交" />
        </form>
    
    • 不指定 小数点位数(默认)

    在这里插入图片描述

    • ③ 指定小数点后两位
    • 在这里插入图片描述

    • 示例5: 提供建议值
      • 关联关系:
        • label-for=input-id
        • input-list=datalist-id
      • 嵌套关系: datalist> <option> value
    
    	<form action="">
        	<label for="ticketnumber">票号:</label>
        <input id="ticketnumber" type="number" list="defaultNumbers" />
        <datalist id="defaultNumbers">
        	<option value="10001"></option>
        	<option value="10002"></option>
        	<option value="10003"></option>
        	<option value="10004"></option>
        	<option value="10005"></option>
        </datalist>
        	<input type="submit" value="提交" />
        </form>
    

    • 示例6: 当输入有效值和无效值时,在后面显示 叉 ×和 对 √

    • html

    <form action="">
        	<label for="balloons">气球的数量:</label>
        <input type="number" id="balloons" placeholder="请输入10的倍数" step="10" min="0" max="100"  required/>
            <span class="validity"></span>
            </br>
    
        	<input type="submit" value="提交" />
        </form>
    
    • css
    <head>
    	<style>
    		#balloons{
    			width:120px;
    		}
    		input:invalid+.validity:after{
    			content:"×";
    		}
    		
    		input:valid+.validity:after{
    		
    			content:"√";
    		}
    	
    	</style>
    </head>
    

    在这里插入图片描述


    ⑻ 不精确数值 (范围数值): type=“range”

    • 输入不精确 范围数值: <input type="range">
      • 类型range的元素 允许用户 指定一个数值,该数值 必须不小于给定值,且不大于 另一个给定值。
      • 然而,精确的数值 并不重要。
      • 显示: 这通常使用滑块 或拨号控件表示,而不是像数字输入类型这样的文本输入框。
      • 不精确值: 由于这种小部件不精确,除非控件的确切值 不重要,否则通常不应该使用它。
    • 降级为文本: 如果用户的浏览器 不支持类型range范围,它将后退 并将其视为文本输入。
    • 搭配属性
      • ① 最大值 max: 最大允许值
        • 如果max属性的值 不是一个数字,那么元素就没有最大值。
        • 此值必须大于或等于 min属性的值。
      • ② 最小值 min: 最小允许值
        • 如果为 min 指定的值不是一个有效的数字,则输入没有最小值。
        • 此值必须小于或等于max属性的值。
        • 『默认 最小值和最大值』: 默认情况下,最小值为0,最大值为100。如果这不是您想要的,您可以通过更改min , max属性的值 指定不同的边界。这些可以是任何浮点值。
      • ③ 间隔值 step: 步进间隔,用于用户界面和验证目的.
        • step属性 是一个数字,它指定 值必须遵循的粒度,或者特殊值any,只有与步进基础相等的值 才是有效的.
        • 字符串值any表示 不指定 步进间隔.
        • 默认情况下,粒度为1,这意味着值总是整数。
        • 小数点后的位数: 可以更改step属性来控制粒度。例如,如果您需要一个介于5和10之间的值,精确到小数点后两位,应该将step的值设置为0.01
        • 如果想接受任何值,无论它扩展到 多少位小数,您可以为step属性指定任意值:step="any"
      • ④ 所选值 value:
        • value属性 包含一个DOMString,它包含所选数字的字符串 表示形式。该值 从来不是空字符串("")。
        • 默认值: 中间值 或者 min属性的值. 位于指定的最小值和最大值之间——除非最大值实际上小于最小值,在这种情况下,默认值被设置为min属性的值。
        • 值 和最大值,最小值的关系:
          • 如果试图 将值设置为小于最小值,则将其 设置为最小值。类似地,如果试图 将值设置得高于最大值,则会将其 设置为最大值。
        • 确定默认值的 算法为:defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min : rangeElem.min + (rangeElem.max - rangeElem.min)/2;
    • 知识拓展:三目运算符
      • 三目运算符的语法为: conditions ? statementA : statementB ;
      • 如果满足条件condition,就执行语句statementA,否则就执行语句statementB
      • 注意:statementAstatementB 语句必须为单个语句,如果使用多个语句就会报错。
    • type="number"type="range"的区别
      • 精确值: number类型允许用户 输入一个带有可选约束的数字,强制其 值介于最小值和最大值之间,但它确实 要求用户输入一个特定的值。
      • 非精确值: range输入类型 允许您在用户 甚至不关心或不知道所选择的特定数值 是什么的情况下向用户询问值。
    • 常用 不精确范围值输入的例子:type="range"
      • ① 音频控制,如音量和平衡,或过滤器控制。
      • ② 颜色配置控件,如颜色通道、透明度、亮度等。
      • ③ 游戏配置控件,如难度、可视距离、世界大小等。
      • ④ 密码管理器生成的密码的 密码长度。
      • 选择参考: 更注重百分比 而不是具体数值.
        • 通常,如果用户 对最小值和最大值之间的 距离的百分比 比实际数字本身更感兴趣,那么 范围值输入是一个很好的选择。
        • 例如,在家庭立体声音量控制的情况下,用户通常认为“将音量设置为最大值的一半”,而不是“将音量设置为0.5”。
    • 验证
      • ① 没有可用的pattern模式验证;然而,执行以下形式的自动验证:
      • ② 如果将值value设置为 无法转换为 有效浮点数的值,则验证将失败,因为输入遭受了错误的输入。
      • ③ 值不会小于最小值min,默认值为 0
      • ④ 值不会大于最大值max。默认值是100
      • ⑤ 值时 间隔值step的倍数.默认是1.
    • 浏览器支持
      • 在这里插入图片描述

    • 示例1: 用范围值 表示音量和铃声
            <div>
                <input type="range" id="volume" name="volume" min="0" max="11" />
                <label for="volume">音量</label>
            </div>
            <div>
                <input type="range" id="bell" name="bell" min="0" max="100" value="90" step="5" />
                <label for="bell">铃声</label>
            </div>
    

    在这里插入图片描述


    • 示例2: 让用户选择 任何值 介于0到π值值, 小数部分 没有任何限制。
    <input type="range" min="0" max="3.14" step="any">
    

    在这里插入图片描述


    • 示例3: 显示刻度线和标签
            <p>显示刻度线和标签</p>
            <input type="range" list="tickmarks" />
            <datalist id="tickmarks">
                <option value="0" label="0%"></option>
                <option value="10"></option>
                <option value="20"></option>
                <option value="30"></option>
                <option value="40"></option>
                <option value="50" label="50%"></option>
                <option value="60"></option>
                <option value="70"></option>
                <option value="80"></option>
                <option value="90"></option>
                <option value="100" label="100%"></option>
            </datalist>
    

    在这里插入图片描述

    • 谷歌: 在这里插入图片描述
    • 刻度线和标签的 浏览器支持
      • 目前还没有浏览器完全支持这些特性。
      • 例如,Firefox根本不支持 刻度线和标签
      • 而Chrome支持刻度线,但不支持标签。
      • Chrome的66版本(66.0.3359.181)支持标签,但是标签必须使用CSS样式,因为它的显示属性默认设置为none,隐藏标签。

    • 示例4: 让滑动块 从默认的水平的 变成垂直的
    • html
            <div class="sliderWrapper">
                <input type="range" list="tickmarks" class="rotate-input" min="0" max="100" value="20" />
            </div>
            <datalist id="tickmarks">
                <option value="0" label="0%"></option>
                <option value="10" label="10%"></option>
                <option value="20" label="20%"></option>
                <option value="30" label="30%"></option>
                <option value="40" label="40%"></option>
                <option value="50" label="50%"></option>
                <option value="60" label="60%"></option>
                <option value="70" label="70%"></option>
                <option value="80" label="80%"></option>
                <option value="90" label="90%"></option>
                <option value="100" label="100%"></option>
            </datalist>
    
    • css
    /*翻转范围值的滑动块 变成垂直的*/
        .sliderWrapper {
            /*设置宽高 为翻转后的滑动块 预留空间*/
            width: 20px;
            height: 150px;
        }
        .rotate-input {
            width: 150px;
            height: 20px;
            transform-origin: 75px 75px;
            transform: rotate(-90deg);
        }
    

    在这里插入图片描述

    • 输出: 逆时针90度旋转,最大值在顶部,最小值在底部

    ⑼ 搜索文本框: type=“search”

    • 搜索文本框: <input type="search">
      • 用途: 类型是 搜索 search的元素是 为用户输入 搜索查询 而设计的文本字段。
      • 可能的特别样式: 这些输入 在功能上与文本输入相同,但是用户代理(浏览器) 可能对其进行不同的样式设置。
    • 浏览器支持
      • 在这里插入图片描述
    • 搭配属性
      • ① 搜索文本框的值 value: value属性包含一个DOMString,表示 搜索字段中 包含的值。JavaScript中 可以使用HTMLInputElement.value检索值。
        • 如果输入没有验证约束,则值 可以是 任何文本字符串 或 空字符串(“”)
      • ② 最大长度 字符数 maxlength: 输入应接受的最大字符数
      • ③ 最小长度 字符数 minlength: 输入长度的最小字符数 可以并且仍然被认为是有效的
      • ④ 正则表达式 pattern: 输入的内容 必须匹配正则表达式 才能有效
        • 提示文本: 使用title属性 指定大多数浏览器将显示为 工具提示的文本,以解释 匹配模式的需求。还应该包括 附近的其他解释性文本。
      • ⑤ 占位符 placeholder: 当输入字段为空时,要在该字段中显示的示例值
      • ⑥ 只读readonly: 指示输入内容 是否为只读的 布尔属性
      • ⑦ 字符宽度 size: 一个数字,指示输入字段应该有多少个字符宽
      • ⑧ 拼写检查spellcheck: 控制 是否为输入字段 启用拼写检查,或是否 应使用默认拼写检查配置
      • ⑨ 名称 name: 必须记住输入 设置一个名称,否则什么也不会提交。
        • 提交时,发送到服务器的数据 名称/值对 name/value
      • ⑩ 必填 不能为空: required 属性

    • 示例1: 使用搜索文本框
            <!-- 搜索文本框 -->
            <label for="site-search">搜索网站:</label>
            <input type="search" id="site-search" />
    
    
    
            <input type="submit" value="提交" />
    

    在这里插入图片描述


    • 示例2: 文本框 和搜索文本框的区别
            <!-- 搜索文本框 -->
            <label for="site-search">搜索网站:</label>
            <input type="search" id="site-search" />
            <button>搜索</button>
    
    • 主要的基本区别在于: 浏览器处理它们的方式。

    • 交叉图标和删除: 首先要注意的是,一些浏览器 显示了一个交叉图标,如果需要,可以单击该图标 立即删除搜索项。而普通的文本框,没有这个快捷删除.

      • 搜索文本框: 在这里插入图片描述
      • 普通文本框: 在这里插入图片描述
    • 自动存储 搜索关键词: 自动完成选项

      • 现代浏览器还倾向于自动存储 以前跨域输入的搜索项,当后续搜索 在该域中的搜索输入中 执行时,这些搜索项 将作为自动完成选项 出现。这将帮助 那些倾向于长期对相同或相似的搜索查询 进行搜索的用户。
      • 自动完成选项: 在这里插入图片描述

    • 示例3: 设置占位符
     <input type="search" id="site-search" placeholder="请输入网站名" />
    

    在这里插入图片描述


    • 示例4: 搜索文本框的可访问性
      • 常见的设计: 不为搜索字段提供标签(尽管可能有一个放大镜图标或类似的东西
      • 导致的 可访问性问题: 没有标签→没有文字,屏幕阅读器读不出来,盲人不知道 这个字段是干嘛用的.
      • 解决办法: 不影响视觉设计的方法: 使用WAI-ARIA特性:
        • 声明表单功能: 使屏幕阅读器 声明该表单 是搜索表单,
          • 使用aria-label,添加标签.
          • 这应该是一个描述性的文本标签,将由屏幕阅读器读出.
          • 这个属性会为元素添加一个标签 = 不可见的<label>标签元素
          • 显示: 没有视觉上的区别,但是屏幕阅读器用户 可以获得更多的信息。

    • 示例5: 指定搜索框 一次可以显示的字符数,设定为10,20
            <label for="site-search">搜索网站:</label>
            <input type="search" id="site-search" placeholder="请输入网站名" aria-label="搜索网站内容" size="10" />
            <button>搜索</button>
    
            <input type="submit" value="提交" />
    
    • 可见字符数为10: 在这里插入图片描述
    • 可见字符数为20: 在这里插入图片描述

    • 示例6: 要求输入的值 长度为4-8个字符
      • minlength="4" maxlength="8"

      • 少于最小字符数,不符合要求,会有验证提示: 在这里插入图片描述

      • 无法输入,超过最大字符数限制的数量,最多只能输入8个字符


    • 示例7: 指定搜索内容的模式

      • 产品ID 搜索表单,ID都是由 两个字母+四个数字 组成的代码
      • 字母不区分大小写
      • pattern="[A-z]{2}[0-9]{4}"
    • 不符合正则表达式,会有提示: 在这里插入图片描述


    ⑽ 输入电话号码: type=“tel”

    • <input type="tel">
      • 输入和编辑 电话号码: 类型tel的元素 用于让用户输入和编辑电话号码
        • 提交前 不自动验证 特定格式: 在表单提交之前,输入值 不会自动验证为 特定的格式,因为世界各地的电话号码 格式差异很大。
        • 优化的 自定义键盘:
          • 尽管tel类型的输入 在功能上与标准文本输入 相同,但它们确实 具有有用的用途;其中最明显的是,移动浏览器——尤其是移动电话上的浏览器——可能会选择 提供一个 为输入电话号码 而优化的自定义键盘.
          • 特殊键盘: 使移动浏览器 显示一个用于 输入电话号码的特殊键盘,一般是电话号码相关的数字键盘.
          • 在这里插入图片描述
        • 验证和处理号码使用特定的电话号码输入类型 还可以更方便地 添加自定义验证和处理电话号码。
          • 考虑到电话号码的输入 是如此普遍,不幸的是,验证电话号码的“一刀切”解决方案并不实用。
          • 可以考虑自己站点的需求,并自己实现适当级别的验证。
      • 回退: 不支持tel类型的浏览器 将退回到标准 text 文本输入。
      • 使用:
        • 数据收集, 电话号码是网站上 非常常见的数据收集类型。
        • 业务和联系: 例如,在创建任何类型的注册或电子商务网站时,可能需要询问用户的电话号码,无论是出于业务目的 还是紧急联系的目的。
    • 浏览器支持
      • 在这里插入图片描述
    • 搭配属性
      • ① 默认值 value:
        • 元素的value属性 包含一个DOMString,它要么表示 一个电话号码,要么是一个空字符串" "
        • 可以通过设置tel输入框的value属性 为其提供一个默认值
      • ② 最大字符长度 maxlength: 元素值的长度,作为有效输入 可接受的最大长度(UTF-16字符)
        • 以字符为单位
        • 这必须是一个整数值, 0或更高。
      • ③ 最小字符长度 minlength: 元素值的长度, 被认为对字段内容有效的最小长度
        • 以字符为单位
        • 这必须是一个整数值, 0或更高。
      • ④ 格式 pattern: 正则表达式, 输入值必须匹配 才能通过约束验证
        • 格式提示文本: 使用title属性 指定大多数浏览器 将显示为工具提示的文本,以解释匹配模式的需求。您还应该包括附近的其他解释性文本。
      • ⑤ 占位符 placeholder: 在字段中没有值时显示的 示例值.
        • 示例值得形式. 占位符是一个值,它通过提供有效值的示例 来演示该值应该采用的形式,当元素的值为空“”时,有效值将显示 在编辑框中。
        • 一旦数据输入框中,占位符就消失了;如果框被清空,占位符将重新出现。
      • ⑥ 只读 readonly: 一个布尔属性,如果存在,表明字段的内容不应该是用户可编辑的
      • ⑦ 可见宽度字符数 size: 输入字段宽度的字符数 应该显示在屏幕上.
        • 物理大小: 控制 输入框的 物理大小
        • 显示字符数: 指定输入框 一次可以显示的字符数.
      • ⑧ 不能为空,必填项 required
        • required="required",使用该属性后,输入项必须填写 才能提交,否则为无效,无法通过验证

    示例1: 设置格式的 电话输入

        <form action="">
            <label for="phone">请输入您的电话号码: </label>
            <input type="tel" id="phone" name="phone" pattern="[0-9]{4}-[0-9]{7}" title="电话格式:0564-6714222" />
            <small>( 电话格式: 0564-6714222 )</small>
            <br />
    
            <input type="submit" value="提交表单">
    
    
        </form>
    
    • 输出:
      • 在这里插入图片描述
    • 格式要求提示: 配合title 工具提示属性
    • 使用pattern属性,输入值 必须匹配的正则表达式 。

    • 示例2: 设置占位符
      <input type="tel" id="phone" name="phone" pattern="[0-9]{4}-[0-9]{7}" title="电话格式:0564-6714222" placeholder="0564-6714222" />
    

    在这里插入图片描述


    • 示例3: 指定 输入框的物理大小 = 指定输入框一次可以显示的字符数,指定值的的长度范围
      • 可以使用size 属性控制输入框的物理大小。可以指定 输入框 一次可以显示的字符数。
         <input type="tel" id="phone" name="phone" title="电话格式:0564-6714222" placeholder="0564-6714222" size="20" minlength="7" maxlength="11" />
    
    • 输出:
      在这里插入图片描述
    • 属性和验证: minlength,maxlength
      • 如果值的长度 小于9个字符,或者大于14个字符,输入将被视为无效。
      • 大多数浏览器甚至 不允许输入超过最大长度的值。

    • 示例4: 设置一个 默认值.
      • 可以通过设置tel输入框的value属性 为其提供一个默认值:
            <input type="tel" value="6714833" />
    
    
    • 输出
      在这里插入图片描述

    • 示例5: 提供 建议值
      • 标签嵌套
        • input
        • datalist > option
      • 关联关系
        • input-list="datalist-id",数据列表标签 和 输入标签 两标签的相关属性 的值相等
    		<input type="tel"  list="defaultTels" />
            <!-- datalist[id=defaultTels]>option[value=671483$]*4 -->
            <datalist id="defaultTels">
            	<option value="6714831"></option>
            	<option value="6714832"></option>
            	<option value="6714833"></option>
            	<option value="6714834"></option>
            </datalist>
    
    • 输出
      • 在这里插入图片描述
      • 绑定的建议值 和输入时值的提示
        • 当用户键入时,列表被调整为 只显示经过筛选的匹配值。
        • 每个键入的字符 都会缩小列表的范围,直到用户进行选择 或键入自定义值。

    在这里插入图片描述


    • 示例6: 让电话号码输入成为 必填项
            <input type="tel"  list="defaultTels" required="required" />
    
    
    • 输出
      • 在这里插入图片描述

    ⑾ 输入url: type=“url”

    • <input type="url">
      • 输入和编辑 url: url类型的元素 用于 让用户 输入和编辑 url。
      • 自动验证: 在提交表单之前,将自动验证 输入值,以确保它是 空的 或格式正确的URL。
        • 只确保 是正确的格式: 这种验证,不足以 确保指定的文本是一个 实际存在的URL,只是确保字段的值 被正确格式化为URL。
        • 客户端验证不能替代服务器端的验证, 必须在服务器端 验证URL,因为其中提供的文本 可能具有任何类型的安全含义。
      • 有效输入: 输入空URL地址和一个格式正确的URL地址时,它被认为是有效的.
      • 实现: 实现为具有 基本验证功能的 标准文本输入字段。(看上去像是单行文本框,但自带验证,验证是不是合法的url)
      • 搭配 CSS 伪类:直观反应输入值 是否是有效值, :valid:invalidCSS伪类 将自动应用于适当的地方,以直观地 表示字段的当前值 是否是有效的URL。
      • 降级为单行文本输入: 在不支持url类型输入的 浏览器上,url输入 返回到标准text文本输入。
    • 浏览器支持
      • 在这里插入图片描述
    • 搭配属性
      • ① 值 value属性 : 传递值(提交表单时,会传递url的输入值)+设置默认值(创建元素时,使用此属性,会设置一个默认值)
        • 包含一个DOMString,它被自动验证 为符合URL语法
        • 有三种可能的值格式 可以通过验证:
          • 一个 空字符串"",指示用户 没有输入值 或该值已被删除。
          • 一个 格式正确的 绝对URL, 这并不一定意味着 URL地址存在,但至少格式正确。简单地说,这意味着urlscheme://restofurl
          • 一个格式正确的 相对URL
      • ② 最大长度 maxlength: 输入应接受的最大字符数
        • 数字, 以字符为单位
        • 必须是一个整数值, 0或更高。
        • 限制输入长度: 如果没有指定maxlength,或者指定了无效值,则url输入没有最大长度。
        • 大多数浏览器 会拒绝 让用户输入 超过指定最大长度的值。
      • ③ 最小长度 minlength: 输入长度的 最小有效字符数
        • 数字, 以字符为单位
      • ④ 格式 pattern: 输入的内容 必须的匹配正则表达式
        • 搭配属性title: 建议将title属性和pattern一起使用。
        • 解释数据格式: title 必须描述模式;它应该解释 数据应该采用何种格式,而不是任何其他信息。
        • 内容显示: title的内容, 可能作为验证错误消息的一部分 显示给用户.
      • ⑤ 占位符 placeholder: 当输入字段为空时,要在该字段中显示的示例值
      • ⑥ 只读 readonly: 指示输入内容 是否为只读的 布尔属性
      • ⑦ 可见宽度 size: 一个数字,指示输入字段应该有多少个字符宽
        • 不限制输入,只限制可见: 这并不限制 用户可以输入多少字符。它只指定 一次大约可以看到多少个。要设置输入数据长度的上限,使用maxlength属性。
        • 数字,以字符为单位
      • ⑧ 拼写检查 spellcheck: 控制是否 为输入字段 启用拼写检查,或是否应 使用默认拼写检查配置
        • 全局属性: 拼写检查是一个 全局属性,用于指示 是否启用 元素的拼写检查。
        • 可编辑的内容: 它可以用于 任何可编辑的内容,
        • 三个属性值: spellcheck="false| true | "" "
          • 禁用 false: 禁用 此元素的拼写检查
          • 启用 true: 启用 此元素的拼写检查
          • 默认行为 ""(空字符串)或无值 : 按照元素的默认行为 进行拼写检查。这可能是 基于父母的拼写检查设置 或其他因素。
      • ⑨ 必填项 required:
        • 设置此属性,字段不能为空,为空则无法通过验证.

    • 示例1: 输入一个 url
            <div>
                <label for="surl">请输入一个url:</label>
                <input type="url" id="surl" name="url" />
            </div>
            <input type="submit" value="提交表单" />
    
    • 输入不正确的内容,会自动出现提示
      在这里插入图片描述

    • 示例2: 创建一个自带 建议选项值的 url输入框
      • 搭配标签: <datalist> , <option>
      • url的文本标签: label 属性
        • 一些浏览器可能 只显示标签,而另一些浏览器可能同时 显示标签和URL
      • 关联关系: input-list="datalist-id"
      • 显示: 包含建议值的弹出或下拉菜单的形式呈现。
        • 单击编辑框 或者下拉三角 会显示建议url的下拉列表。
      • 建议值范围调整: 当用户键入时,列表被调整为 只显示匹配的值。每个键入的字符都会缩小列表的范围,直到用户进行 选择或键入自定义值。
            <div>
                <label for="surl">请输入一个url:</label>
                <input type="url" id="surl" name="url" list="defaultUrls" />
            </div>
    
            <datalist id="defaultUrls">
                <option value="https://developer.mozilla.org/" label="MDN Web Docs"></option>
                <option value="http://www.google.com/" label="Google"></option>
                <option value="http://www.microsoft.com/" label="Microsoft"></option>
                <option value="https://www.mozilla.org/" label="Mozilla"></option>
                <option value="http://w3.org/" label="W3C"></option>
            </datalist>
    
            <input type="submit" value="提交表单" />
    
    • 输出:
      在这里插入图片描述

    ⑿ 邮箱: type=“email”

    • 输入 电子邮件: <input type="email">
      • 用于 让用户 输入和编辑 电子邮件地址,或者,如果指定了 多个属性,则使用电子邮件地址 列表。
    • 有效值 和伪类:
      • 在提交表单之前,将自动验证 输入值,以确保 它是空的 或格式正确的电子邮件地址(或地址列表)。
      • :valid:invalid CSS伪类 将自动应用于 适当的位置,以直观地表示 字段的当前值 是否是有效的电子邮件地址。
    • 浏览器支持
      • 在这里插入图片描述
    • 回退成 文本输入:
      • 在不支持 电子邮件类型输入的 浏览器上,电子邮件输入 将回到 标准文本输入。
    • value属性: 元素的value属性 包含一个DOMString,它被自动验证为 符合电子邮件语法。更具体地说,有三种可能的 值的格式 可以通过验证:
      • 一个空字符串(""): 指示 用户没有输入值 或该值已被删除。
      • 一个格式正确的邮箱地址: 一个格式正确的 电子邮件地址。这并不一定意味着 电子邮件地址存在,但至少 格式正确。简单地说,这意味着username@domain.tld。当然,远不止这些;有关匹配电子邮件地址验证算法的正则表达式
      • 电子邮箱地址列表: 当且仅当 指定了multiple属性时,该值 可以是 由逗号分隔的 格式正确的 电子邮件地址列表。从列表中的每个地址中 删除任何尾随和前导 空格。
    • 搭配属性: 邮箱输入 支持以下属性:
      • 最大字符数 长度: maxlength 应接受的最大字符数
        • 用户可以 输入电子邮件的 最大字符数(作为 UTF-16 代码单元)。
        • 非负整数值: 这必须是一个整数值0 或更高。
        • 有效: 如果没有指定maxlength 或指定无效值,则电子邮件输入 没有最大长度。
        • 范围: 这个值也必须maxlengthminlength的值。
        • 长度和验证: 如果字段的 文本值的长度 大于maxlength UTF-16代码单元的长度,则输入约束验证 将失败。只有当 用户更改值时 才会应用约束验证。
      • 最小字符数: minlength 输入长度的最小字符数 并被认为是有效的
        • 用户可以输入电子邮件的最小字符数(作为UTF-16代码单元)。
        • 非负整数值: 这必须是 一个小于或等于maxlength指定的值的 非负整数值。
        • 有效: 如果没有指定minlength,或者指定了无效值,则电子邮件输入没有最小长度。
        • 长度和验证: 如果输入的文本长度小于minlengthUTF-16代码单元的长度,则约束验证 将失败。只有 当用户更改值时 才会应用约束验证。
      • 多个邮箱地址: multiple 允许输入 多个 逗号分隔的 电子邮件地址
        • 分隔符: 这些地址 由逗号 和(可选的)空格字符 分隔
        • 多个邮箱的空字符串 属性值和 必填属性的冲突:
          • 通常,如果指定了required属性,用户必须输入一个 有效的电子邮件地址,才能认为字段 是有效的。
          • 但是,如果您添加了multiple属性,一个包含 0个电子邮件地址的列表(一个空字符串,或者一个完全是 空白的字符串)是一个有效值。换句话说,无论required的值是多少,当指定多个电子邮件地址时,用户甚至 不需要输入一个电子邮件地址。
      • 匹配格式: pattern 输入的内容 必须匹配 正则表达式 才能有效
        • 当指定pattern属性时,它是一个 正则表达式,输入的值 必须与之匹配,以便该值 通过约束验证。
        • 在编译正则表达式时 指定’u’标志,以便将模式 视为 Unicode代码点序列,而不是ASCII。
        • 避免 正斜杠: 不应该 在模式文本周围 指定正斜杠。
        • 不应用: 如果指定的模式 未指定 或无效,则不应用 正则表达式,并且 完全忽略此属性。
        • 工具提示文本( 匹配模式的 解释文本): 使用title属性 指定 大多数浏览器将 显示为工具提示的文本,以解释 匹配模式的需求。还应该 包括附近的 其他解释性文本。
      • 占位符 示例值: placeholder 当输入字段 为空时,要在该字段中 显示的示例值
        • 占位符属性 是一个字符串,它向用户 提供一个 简短的提示,提示字段中 需要哪些信息。它应该是 一个 显示预期数据类型的 单词或短语,而不是一个解释性消息。文本 不能包含 回车或换行。
        • 反向显示: 如果控件的内容 只有一个方向(LTR或RTL),但需要以相反的方向 显示占位符,则可以使用 Unicode双向算法 格式化字符 来覆盖 占位符中的方向;
      • 只读: readonly 指示 输入内容 是否为 只读的 布尔属性
        • 布尔属性,如果存在,则表示 该字段不能 由用户编辑。
        • 更改值: 但是,它的值 仍然可以通过JavaScript代码 直接设置 HTMLInputElement.value属性 来更改
        • 因为只读字段 不能有值,所以required对指定readonly只读 属性的输入没有任何影响。
      • 字符宽度: size 一个数字,指示 输入字段 应该有多少个 字符宽
        • size属性是一个 数值,指示输入字段 应该有 多少个字符宽。
        • 值: 该值必须 大于零,默认值为 20。
        • 字符宽度和字体: 由于字符宽度 不同,这可能 是 或不是精确的,不应该 依赖于这样;根据 字符和字体(正在使用的 字体设置),结果输入 可能比指定的字符数 更窄或更宽。
        • 字符不限 和所见: 这并不限制 用户可以输入 多少字符。它只指定 一次大约可以 看到多少个。要设置 输入数据长度的上限,请使用maxlength最大长度 属性。
      • 拼写检查: spellcheck 控制 是否为输入字段 启用拼写检查,或是否 应使用 默认拼写检查配置
        • spellcheck 拼写检查的允许值是:
          • false 禁用 此元素的拼写检查。
          • true 启用 此元素的拼写检查。
          • "" (空字符串)或无值 按照元素的 默认行为 进行拼写检查。这可能是 基于父母的拼写检查设置 或其他因素。
        • 拼写检查 和只读属性: 如果输入字段没有readonly属性集 且未禁用,则可以 启用拼写检查
        • 拼写检查 和用户首选项: 如果 用户代理的首选项 覆盖该设置,则读取拼写检查 返回的值 可能不会反映控件中 拼写检查的实际状态。

    • 示例1:输入 指定格式的 邮箱
      • 限定邮箱格式: 用pattern模式 属性
       <form action="">
            <label for="email">请输入您的QQ邮箱:</label>
            <input type="email" id="email" name="email" pattern=".+@qq.com" required="required" />
    
            <input type="submit" value="提交" />
        </form>
    

    在这里插入图片描述在这里插入图片描述


    • 示例2: 带占位符 提示文本的邮箱输入框
      • placeholder="1079@qq.com"
      • 在这里插入图片描述
      • 一旦输入文本后,占位符 就消失了;如果框 被清空,占位符将 重新出现。

    • 示例3: 设置 邮箱输入框的 显示宽度
      • size="8",显示可见的宽度 变短了
      • 在这里插入图片描述

    • 示例4: 设置 邮箱的最小 和最大字符数
      • minlength="9" maxlength="10"
      • 小于最小字符数,会有提示
      • 在这里插入图片描述
      • 字符数 达到最大字符数后,就不能 再输入任何字符了

    • 示例5: 带 默认值的 邮箱输入框
      • value="107948@qq.com"
      • 和占位符 示例值的区别: 点击输入框,输入值,原来的值 不删除不会自动消失
      • 在这里插入图片描述

    • 示例6: 带提示信息的 邮箱输入
      • title="输入9-10位的QQ邮箱"
      • 鼠标悬浮在输入框上,会显示提示文本
      • 在这里插入图片描述

    • 示例7: 提供 建议值
      • 默认选项列表: 可以提供一个 默认选项列表,用户可以通过指定list属性 从中进行选择。这并不限制 用户只使用这些选项,但是允许他们 更快地选择 常用的电子邮件地址。
      • 自动完成 提示: 这些值 也为autocomplete自动完成 提供了提示。
      • 嵌套关系
        • <input> type list
        • <datalist> id> <option> value
      • 关联关系
        • input-list="datalist-id"
    
    <input type="email"  list="defaultEmails">
    
    <datalist id="defaultEmails">
      <option value="jbond007@mi6.defence.gov.uk">
      <option value="jbourne@unknown.net">
      <option value="nfury@shield.org">
      <option value="tony@starkindustries.com">
      <option value="hulk@grrrrrrrr.arg">
    </datalist>
    
    • 在这里插入图片描述
    • 在这里插入图片描述
    • 注意:
      • 必须设置 验证格式的脚本: HTML表单验证 不能替代 确保输入数据格式正确 的脚本。
        • 对某些人来说,要对 HTML 进行调整 以绕过验证或完全删除验证 太容易了。也有可能有人 完全绕过HTML,直接将数据 提交给服务器。
      • 服务器端 要有 格式验证代码: 如果服务器端代码 无法验证 它接收到的数据,那么当格式 不正确的数据(或者数据太大、类型错误等等)被 输入数据库时,灾难就会发生。

    • 捐助: 喜欢这篇文章吗? 创作不易, 捐助此文,向团团 表示鼓励和支持吧~❤
      在这里插入图片描述
    • 捐助二维码:
      在这里插入图片描述

    • 参考文档
    • 感谢:♥♥♥ 如果这篇文章 对您有帮助的话,可以点赞、评论、关注,鼓励下作者哦,感谢阅读 ~

    • 转载 请注明出处 ,Thanks♪(・ω・)ノ
      • 作者:Hey_Coder
      • 来源:CSDN
      • 原文:https://blog.csdn.net/VickyTsai/article/details/94839889
      • 版权声明:本文为博主原创文章,转载请附上博文链接!

    在这里插入图片描述

    展开全文
  • 属性值有 visible(可见的)这个是默认值,hidden(不可见的),scoll(以滚动条的形式出现)auto(浏览器会以滚动条的方式出现)inherit(继承父类的属性)属性介绍代码如下 <html> <head> <...

    overflow标签的含义:

    overflow属性其代表着  溢出元素内容区域的部分内容应该如何处理;

    其属性值有 visible(可见的)这个是默认值,hidden(不可见的),scoll(以滚动条的形式出现)auto(浏览器会以滚动条的方式出现)inherit(继承父类的属性)属性介绍代码如下

    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>overflow</title>
    		<style type="text/css">
    			.father{
    				width: 400px;
    				height:400px;
    				background-color: #0000FF;
    				border: 1px solid #0000FF;/*解决外边距合并问题*/
    				/* overflow: hidden; */
    				/* overflow: scroll; */
    				
    				
    			}
    			.son{
    				margin-top:200px;
    				margin-left:200px;
    				width: 400px;
    				height:400px;
    				background-color: pink;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="father">
    			<div class="son">
    				
    			</div>
    		</div>
    	</body>
    </html>

    其中结果如下:默认状况:

     overflow:hidden;属性

    overflow:scoll;属性

    然后就是overflow清楚浮动的原理了;

    首先我们要了解BFC规则(Block Formatting Context)块格式化上下文 其本身就相当于一个独立的布局环境;

    触发bfc规则要有以下几个条件:

    1.body为根目录

    2.浮动元素:float:none;以外的值;

    3.绝对定位的元素:position:fixd absolute;

    4.overflow:除了默认值以外;

    5.display:nline-block、table-cells、flex

    当满足以上条件时就可以触发bfc规则:

    bfc布局规则:

    1. 内部的Box会在垂直方向,一个接一个地放置。
    2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
    3. 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
    4. BFC的区域不会与float box重叠。
    5. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
    6. 计算BFC的高度时,浮动元素也参与计算

    所以有如下实例:

    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>overflow清除浮动原理</title>
    		<style type="text/css">
    			.father{
    				width: 100%;
    				/* height: 200px; */
    				background-color: aquamarine;
    				border: 1px solid blue;
    			}
    			.son{
    				width: 100px;
    				height: 200px;
    				background-color: black;
    				float: left;
    			}
    			.son1{
    				width: 200px;
    				height: 100px;
    				background-color: blueviolet;
    			}
    			
    		</style>
    	</head>
    	<body>
    		<div class="father">
    			<div class="son">
    			</div>
    			<div class="son1">
    			</div>
    		</div>
    	</body>
    </html>

     

    其作用是清除浮动:其前后对比的图清除浮动前

     本例是在father  div中设置了一个bfc bfc在计算高度的时候浮动高度也在计算之内所有其达到了清除浮动的效果;

    展开全文
  • 点击a标签触发文件下载

    千次阅读 2018-09-05 15:59:56
    一般文件下载的方法: 1.生成a标签,href='文件地址',click(); ...利用js的click()方法去触发; 2.var a = $('&lt;a href="'+res.href+'" download="'+res.fil...
  • HTML5新增标签属性

    千次阅读 2018-03-16 10:59:46
    HTML5新增标签属性目录一、HTML5新增属性1.1、contextmenu1.2、contentEditable1.3、hidden1.4、draggable1.5、data-*1.6、placeholder占位属性1.7、required必填属性1.8、pattern正则属性1.9、autofocus自动聚焦...
  • Html5和Css3的基础标签及常用属性

    千次阅读 2017-10-05 15:07:32
    H5的常用标签属性: 新增和废弃 新增的结构(布局) 标签:section、artcle、nav、footer、header、hgroup、Aside、figure 新增的其他标签: Video、audio、mark、time、menu、canvas、svg、details、datalist、...
  • 子元素设置float属性之后父元素不能自适应子元素的高度,如果给父元素设置overflow:hidden,则会触发父元素的BFC,使得父元素可以自适应子元素的高度。
  • 文章目录Web前端三大核心技术之-HTMLHTML概念基本格式:书写规范HTML标签字体标签文字列表标签图片标签超链接标签表格标签表单标签HTML框架集HTML转义 HTML概念 全称: 超文本标记语言(HyperText Mackeup Language)...
  • A标签触发onclick事件而不跳转

    千次阅读 2010-06-23 14:42:00
    一个标签仅仅是要触发onclick行为; 2.表现上要有鼠标的pointer指针显示,或者其他类似a标签的视觉效果。 比如执行删除操作时,为了避免误操作,我们要弹出对话框让用户确定是否删除。因此我们经常会用链接...
  • 现在不知什么原因H5的audio标签不能自动播放,让人很是苦恼,经过自己的多方查找,终于找到了解决方案: ...用这个iframe标签可以实现自动播放,不过这个有一个缺点,假如你的网页中有脚本即js等脚本语...
  • 分析改变某个元素的属性,首先...然后去执行一个javascript,form这一开始的type是hidden 当执行这个事件的时候就改变这个属性变成可见--> 评论 function myFunction() { document.getElementById('demo').in
  • Struts HTML标签库常用属性和方法转自:http://blog.sina.com.cn/s/blog_505af4a70100bsjd.html用来创建表单,必须包含一个action属性,否则JSP会抛出一个异常.常用属性:Action 指定用户提交的表单由哪个组件来处理...
  • CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理技巧并 整理...1.对于在IE下不兼容overflow:hidden;而FF下兼容的情况 加一个 posi
  • Chrome已不再支持打开浏览器自动播放声音,为了遏制一些广告对用户的影响70版本以后的都不允许自动播放声音,除非用户自己触发,才可以播放。 这样的做法初衷可能有以下几点: 禁广告,不能自动播放了一定程度上起...
  • 微信小程序之WXML:标签属性

    千次阅读 2020-05-20 18:43:51
    标签属性 语法规则: 1、所有元素都必须闭合标签且小写: <text(小写)> Hello World </text> 2、所有元素都必须正确嵌套: <view>(开始标签1)<text>(开始标签2)Hello </text>...
  • H5_Node1_新标签&新属性& 硬件调用

    千次阅读 2016-10-24 22:34:18
     新增标签  input新类型及新属性  硬件调用 一、HTML5简介 万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改 目标:HTML5取代HTML4和XHTML成为新标准 1、Html5 时间表 ...
  • jQuery 的 Div 标签滚动条属性及判断垂直滚动条是否到达底部?
  • Dialog 标签属性含义及其用法

    千次阅读 2020-10-15 09:26:48
      dialog 是HTML5新增的语义化双标签,用于展示一个交互式的模态对话框。   绝大多数浏览器都不支持,仅有Chrome等浏览器支持。 属性 open   用于控制模态框的显隐,即含有open属性就显示,否则隐藏。 <...
  • 视频标签 video的一些特殊属性详解 HTML5标签video在PC上显示很简单,就一个标签加资源,很少需要关心其它属性。但放到移动设备上,video的标准,Android和iOS有很多区别,另外还有很多各家浏览器特定的属性,本文...
  • 今天上午看某头条的时候有个刚入门的前端小伙伴提问道opacity:0、...首先这三个属性依次设置为0/hidden/none都可以使得用户看不见页面上的元素,不过他们之间还是有区别的,不然若是一样的话,也就没必要用三个...
  • 原文地址 : ...   先看下面代码: php自学网 ...可以看到 span会自动根据包含的内容来变化宽度....这是因为:对于内联元素(可以是默认即为内联的比如 span 元素,也可以是 display: inline 的元素) wid

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 30,440
精华内容 12,176
关键字:

hidden标签可以触发的属性