【input 标签的 type 属性详解】

已于 2022-03-28 22:43:37 修改
阅读量4.9w 收藏 743
点赞数 123
分类专栏： 【HTML】 文章标签： html标签 input标签 input标签type属性 input标签type属性详解 html标签详解
于 2019-09-30 17:41:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/VickyTsai/article/details/94839889
版权

input 标签的 type 属性详解

1. input 输入标签的 type 属性

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

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

属性值用于
① text定义 单行的 输入文本 字段，用户可在其中输入文本。默认宽度为 20 个字符。单行文本字段。换行符 将自动 从输入值中删除。
② checkbox定义 复选框。 允许 选择/取消选择 单个值 的复选框。
③ password定义 密码 字段。该字段中的字符 被掩码。值被隐藏的 单行文本字段。使用maxlength和minlength属性指定 可输入值的最大长度。
④ 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

⑸ 文件上传: 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 一个布尔值，如果存在，表示用户 可以选择多个文件。
  • accept 属性的属性值：唯一的 文件类型说明符
    • 字符串: 惟一的文件类型说明符是 一个字符串，指定上传文件时， 用户可以在 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属性的值 将覆盖 所属表单的 form标签上的 enctype 属性。
      • 一个字符串，用于标识 向服务器提交表单数据时 使用的编码方法。有三个容许值:
      • url 编码： application/x-www-form-urlencoded
        • 这是默认值，在使用encodeURI()等算法 对文本进行 URL编码后，将表单数据 作为字符串发送。
      • 不编码：multipart/form-data
        • 使用FormData API管理数据，允许 将文件提交到服务器。如果表单包含文件输入<input type="file">，则必须 使用 这种编码类型。
      • 只编码空格（变加号+）：text/plain
        • 纯文本;主要用于 调试，所以可以 很容易地看到 要提交的数据。
    • ⑤ formmethod 提交表单时 使用的 HTTP方法
      • 一个字符串，指示 提交表单数据时 使用的 HTTP方法;
      • 此值覆盖所属表单上 给定的任何方法属性。允许的值是:
      • get
        • URL的构造方法 是从formaction或action属性给出的URL开始，附加一个问号(“?”)字符，然后附加 表单的数据，按照formenctype或表单的enctype属性进行 编码。然后使用HTTP get请求 将此URL发送到服务器。
        • url→?→表单数据→编码→http请求→发送到服务器
        • 这种方法适用于 只包含 ASCII 字符 且没有副作用的简单表单。
        • 这是默认值。
      • post
        • 表单的数据 包含在 请求体中，该请求体 使用HTTP post请求 发送到formaction或action属性给出的URL。
        • 此方法支持 复杂的数据 和文件附件。
      • dialog
        • 此方法用于指示 按钮只是关闭 与输入关联的对话框，而根本 不传输表单数据。
    • ⑥ formnovalidate 一个布尔值，如果存在，表示提交前 不验证表单
      • 一个布尔属性，如果存在，它指定 在提交到服务器之前 不验证表单。
      • 这将覆盖 元素所属表单上的novalidate属性的值。
    • ⑦ formtarget 一个字符串，指示要从何处加载 提交表单的结果的内容
      • 指定名称或关键字的 字符串，指示 在何处显示 提交表单后收到的响应。
      • 字符串必须是浏览上下文的名称(即选项卡、窗口、<iframe>)
        • 除了标签、窗口或内联帧(tabs, windows, or inline frames)的 实际名称之外，还有一些特殊的关键字可以使用:
      • 这里指定的值 覆盖所属表单的form标签的 target属性 .
      • 相同位置：_self
        • 默认。在相同的框架中，打开被链接文档。
        • 将响应加载到 包含表单的相同浏览位置中。这将用接收到的数据 替换当前文档。如果没有指定，则使用此 默认值。
        • 使得目标文档载入并显示在相同的框架或者窗口中。
      • 新窗口：_blank
        • 将响应加载到一个新的、未命名的浏览位置中。
        • 通常是与当前文档 相同窗口中的 一个新选项卡，但可能会根据用户代理的配置而有所不同。
      • 父框架中：_parent
        • 在父框架集中打开被链接文档。
        • 将响应加载到 当前响应的父框架位置中。如果没有父内容，则其行为与_self相同。
      • 整个窗口：_top
        • 将响应加载到 顶层浏览位置中;这个浏览位置，它是当前内容的最上层祖先。如果当前的内容，就是最上面的内容，那么它的行为与_self 相同。
        • 用 _top 目标将会清除所有被包含的框架，并将文档载入整个浏览器窗口。
      • 指定框架中： framename
        • 在指定的框架中，打开被链接文档。
    • ⑧ 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值 属性搭配
    • ① 提交时 传递值 name和value
      • (定义单选按钮时,必须的属性,否则不能传递值)
      • 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设置为true或false，就可以在运行时启用和禁用按钮

⑽ 提交按钮: 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 的构造方法是从formaction或action属性给出的URL开始，附加一个问号(“?”)字符，然后附加表单的数据
        • ❷ 编码: 按照formenctype或表单的enctype属性进行编码。
        • ❸ 数据发送: 然后使用HTTP get请求 将此 URL发送到服务器。
        • 这种方法适用于: 只包含 ASCII字符 且没有副作用的简单表单。
        • 这是默认值。
      • ㈡ 请求体数据 post
        • ❶ 请求体: 表单的数据包含在请求体中
        • ❷ 数据发送: 该请求体 使用HTTP post方法发送到formaction或action属性给出的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更改事件。
        • 两个事件的相同点：都与更改值相关。
        • 两个事件的不同点：事件的触发时机不同。每次元素的值改变时，都会触发 input 事件。这与 change 事件不同，change 事件只在 提交值时 触发，比如 选好值，点了确定，按下 enter 键、从选项列表中选择一个值，等等。
      • 在这两种情况下，都可以通过 js 查看元素的value值 来确定元素的新值。
        • 在 谷歌浏览器中，可以按下 ctrl+shift+c 查看源代码，改变颜色后，选中颜色，在右下方的 “accessibility” 菜单项 的 “computed properties” 中查看到改变后的value 属性值。
    • 颜色文本框: 如果浏览器 不支持颜色选择器，而只有一个 输入颜色字符串的 文本框，则可以使用select()方法 来选择 当前编辑中的文本。
      • 如果浏览器提供了颜色选择器，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格式的 有效字符串，则该元素 没有最小值。
      • min≤ max: 此值 必须指定 一个日期字符串，该日期字符 串必须早于或等于 max属性指定的 日期字符串。
    • ④ 日期 间隔天数: step,要使用的 步进间隔，例如 单击向上 和向下旋转器按钮时，以及用于验证时.
      • 数字 or any: step属性是一个数字，它指定值 必须遵循的粒度，或者特殊值any，只有与间隔相等的值 才是有效的.
      • 字符串值any表示不包含 任何间隔约束，并且允 许任何值(排除其他约束，如min和max)。
      • 对于日期输入，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,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，转义为 partydate=2017-06-01T08%3A30，其中%3A，就是转义后的:。

⑷ 年月: 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表示 不包含任何步进，并且允许任何值(排除其他约束，如min和max)。
      • 四舍五入: 当用户输入的数据不符合步进配置时，用户代理可以四舍五入到 最近的有效值，当有两个同样接近的选项时，用户代理更喜欢 正向的数字。
      • 对于month输入，step的值以月为单位给出，比例因子为1(因为底层数值也是以月为单位)。步骤的默认值是1个月。
  • 示例1: 输入年份和月份,带默认值
    • 设置一个默认值: 在value属性中 包含一个月和一年，如下所示:
    • value="2019-05"
    • 显示值和实际值的不同: 当将下面的值 提交给服务器时，它看起来就像startdate=2019-05(name=value)。
    <label for="start">开始年月:</label> 
    <input 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/Opera和Microsoft 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表示 不包含任何 特定间隔值要求，并且允许 任何值(排除其他约束，如min和max)。目前，还不确定step的any属性值 在与时间输入一起使用时的值。
      • 近似值: 当用户输入的数据 不符合步进配置时，用户代理可以四舍五入到最近的有效值
      • 优先 正向近似值: 当有两个同样接近的选项时，用户代理更喜欢正向的数字。
      • 单位: 对于时间输入，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秒，但不会影响小时或分钟。分钟(或小时)只能用于当您以秒为单位指定分钟(或小时)的数量时，例如step的值为 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 不能省略,否则不是有效时间.
    • 限制时间范围: 使用min和max属性 来限制用户可以选择的有效时间。
    • 效果: 无法选择,在一些时间选择器(例如 Edge)中，超出指定范围的时间 甚至无法选择。

在这里插入图片描述

  • 自动限定 时间范围: 上下选择键,自动限定了时间范围,从09:00-18:00,才能选择.
    在这里插入图片描述
  • 无效提示: 手动输入,无效的时间,在提交时,会显示提示信息.
  • 服务器端验证 和客户端验证
    • 不能替代: HTML 客户端的表单验证 不能替代确保输入数据格式正确的服务器脚本。
      • 对某些人来说，要对HTML进行调整以绕过验证或完全删除验证太容易了。
      • 也有可能有人完全绕过HTML，直接将数据提交给服务器。
    • 必须有服务器端验证: 如果服务器端代码 无法验证它接收到的数据，那么当提交格式不正确的数据(或者数据太大、类型错误等等)时，灾难就会发生。

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

    • 降级成单行文本 造成的问题:
      • 用户界面 和数据处理: 不支持时间输入的浏览器会优雅地降级为文本输入，但这会 在用户界面的一致性(呈现的控件将会不同)和数据处理方面造成问题。
      • 时间格式问题: 第二个问题更为严重;如前所述，时间输入的值 总是被规范化为hh:mm或hh: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: 不是一个数字，not a number（非数值）.
    • 浏览器支持
      • 在这里插入图片描述
  • 搭配属性
    • ① 最大值 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"，数字会0.01的进行增和减。


	<form action="">
    <input type="number"  />
    	<input type="submit" value="提交" />
    </form>
  • 不指定 小数点位数(因为，默认间隔值step是 1，所以，默认情况下，带小数点的数值无效)

在这里插入图片描述

  • ③ 指定小数点后两位
  • 在这里插入图片描述
  • 示例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"> （美 /reɪndʒ/）
    • 类型range的元素 允许用户 指定一个数值，该数值 必须不小于给定值，且不大于 另一个给定值。
    • 然而，是否是精确的数值 并不重要。
    • 显示: 这通常使用滑块 或拨号控件表示，而不是像数字输入类型这样的文本输入框。
    • 不需要精确值: 由于这种小部件不精确，除非控件的确切值 不重要，否则通常不应该使用它。
  • 降级为文本: 如果用户的浏览器 不支持类型range范围，它将后退 并将其视为文本输入。
  • 搭配属性
    • ① 最大值 max: 最大允许值
      • 如果max属性的值 不是一个数字，那么元素就没有最大值。
      • 此值必须大于或等于 min属性的值。
    • ② 最小值 min: 最小允许值
      • 如果为 min 指定的值不是一个有效的数字，则输入没有最小值。
      • 此值必须小于或等于max属性的值。
      • 默认 最小值和最大值: 默认情况下，最小值为0，最大值为100。如果这不是您想要的，您可以通过更改min , max属性的值 指定不同的边界。这些可以是任何浮点值。
    • ③ 间隔值 step: 步进间隔，用于用户界面和验证目的.
      • step属性 是一个数字，它指定 值必须遵循的粒度，或者特殊值any，只有与步进基础相等的值 才是有效的.
      • 字符串值any表示 不指定 步进间隔.
      • 默认情况下，粒度为 step=“1”,间隔值默认是1，这意味着，默认情况下 输入框的有效值总是整数。
      • 小数点后的位数: 可以更改step属性来控制粒度，通过控制间隔值的小数点位数，来控制有效值的小数点位数。例如，如果您需要一个介于5和10之间的值，精确到小数点后两位，应该将step的值设置为0.01
      • 如果想接受任何值，无论它扩展到 多少位小数，您可以为step属性指定任意值:step="any"
    • ④ 所选值 value:
      • value属性 包含一个字符串DOMString，它包含所选数字的字符串 表示形式。该值 从来不是空字符串 ""。
      • value 的默认值: ❶ 中间值 或者 ❷ min属性的值。位于指定的最小值和最大值之间——除非最大值实际上小于最小值，在这种情况下，默认值被设置为min属性的值。
      • 值 和最大值,最小值的关系:
        • 如果试图 将值设置为小于最小值，则将其 设置为最小值（最接近的合格值）。类似地，如果试图 将值设置得高于最大值，则会将其 设置为最大值（最接近的合格值）。
      • 确定默认值的 算法为:defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min : rangeElem.min + (rangeElem.max - rangeElem.min)/2;
  • 知识拓展:三目运算符
    • 三目运算符的语法为: conditions ? statementA : statementB ;
    • 如果满足条件condition，就执行语句statementA，否则就执行语句statementB。
    • 注意：statementA 和statementB 语句必须为单个语句，如果使用多个语句就会报错。
  • 数值 type="number"和 范围数值 type="range"的区别
    • 精确值: number类型允许用户 输入一个带有可选约束的数字，强制其 值介于最小值和最大值之间，但它确实 要求用户输入一个特定的值。
    • 非精确值: range输入类型 允许您在用户 甚至不关心或不知道所选择的特定数值 是什么的情况下，向用户询问值，比如调节音量时。
    • 相同点：都是表示 数值。
  • 常用 不精确范围值输入的例子:type="range"
    • ① 音频控制，如音量和平衡，或过滤器控制。
    • ② 颜色配置控件，如颜色通道、透明度、亮度等。
    • ③ 游戏配置控件，如难度、可视距离、世界大小等。
    • ④ 密码管理器生成的密码的 密码长度。
    • 选择参考: 更注重百分比 而不是具体数值.
      • 通常，如果用户 对最小值和最大值之间的 距离的百分比 比实际数字本身更感兴趣，那么 范围值输入是一个很好的选择。
      • 例如，在家庭立体声音量控制的情况下，用户通常认为“将音量设置为最大值的一半”，而不是“将音量设置为0.5”。
  • 验证
    • ① 没有可用的pattern格式验证;然而，执行以下形式的自动验证:
    • ② 如果将值value设置为 无法转换为 有效浮点数的值，则验证将失败，因为是错误的输入。
    • ③ 值不会小于最小值min，默认值为 min="0"。
    • ④ 值不会大于最大值max。默认值是max="100"。
    • ⑤ 值时 间隔值step的倍数.默认是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: 显示刻度线和标签
    • 刻度线：通过 option-value 值属性 实现
    • 标签：通过 option-label 标签描述 属性 实现
        <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: 让滑动块 从默认的水平的 变成垂直的
  • 通过 css 代码实现：
    • transform-origin: 75px 75px;
    • transform: rotate(-90deg); 旋转方法，逆向90度。
  • 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（如果被描述元素，存在真实的描述元素，可使用 aria-labelledby 属性作为来 绑定描述元素和被描述元素来代替）。
          • aria-label 属性可以用在 任何典型的 HTML 元素中，并不需要配合特定的ARIA role才能使用。
        • 这个属性会为元素添加一个标签 = 不可见的<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 属性控制输入框的物理大小。可以指定 输入框 一次可以显示的字符数。
    • size 属性和 minlength，maxlength属性的区别
      • size： 能显示的长度，不代表实际长度。
      • minlength，maxlength：能输入的长度，对实际长度的限制。
      • 相同点：因为表示的都是字符数，所以，都是以字符 为单位，必须是 整数值。
     <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 有效值和:invalid无效值 CSS 伪类， 将自动应用于适当的地方，以直观地 表示字段的当前值 是否是有效的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 的标签描述: option-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 或指定无效值，则电子邮件输入 没有最大长度。
      • 范围: 这个值也必须maxlength ≥minlength的值。
      • 长度和验证: 如果字段的 文本值的长度 大于maxlength UTF-16代码单元的长度，则输入会无法通过约束验证 。只有当 用户更改值时 才会应用约束验证。
    • ② 最小字符数: minlength 输入长度的最小字符数 并被认为是有效的
      • 用户可以输入电子邮件的最小字符数(作为UTF-16代码单元)。
      • 非负整数值: 这必须是 一个小于或等于maxlength指定的值的 非负整数值。
      • 有效: 如果没有指定minlength，或者指定了无效值，则电子邮件输入没有最小长度。
      • 长度和验证: 如果输入的文本长度小于minlengthUTF-16代码单元的长度，则约束验证 将失败。只有 当用户更改值时 才会应用约束验证。
    • ③ 多个邮箱地址: multiple 允许输入 多个 逗号分隔的 电子邮件地址
      • 分隔符: 这些地址 由逗号 和(可选的)空格字符 分隔
      • 多个邮箱的空字符串 属性值和 必填属性的冲突:
        • 通常，如果指定了required属性，用户必须输入一个 有效的电子邮件地址，才能认为字段 是有效的。
        • 但是，如果您添加了multiple属性，一个包含 0个电子邮件地址的列表(一个空字符串，或者一个完全是 空白的字符串)是一个有效值。换句话说，无论required的值是多少，当指定多个电子邮件地址时，用户甚至 不需要输入一个电子邮件地址。
        • 指定 multiple 时有效字符串的例子:
          • ""
          • "me@example"
          • "me@example.org"
          • "me@example.org,you@example.org"
          • "me@example.org, you@example.org"（，后面有一个空格）
          • "me@example.org,you@example.org, us@example.org"
    • ④ 匹配格式: 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属性 且未禁用 disabled，则可以 启用拼写检查。
      • 拼写检查 和用户首选项: 如果 用户代理的首选项 覆盖了该设置，则读取拼写检查 返回的值， 可能不会反映控件中 拼写检查的实际状态。
  • 示例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
    • 版权声明：本文为博主原创文章，转载请附上博文链接！

在这里插入图片描述

Hey_Coder
关注
  • 123
    点赞
  • 踩
  • 743
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
input元素的23种type类型
web前端开发教程htmlcssjs
01-15 5899
随着HTML5的出现，input元素新增了多种类型，用以接受各种类型的用户输入。其中，button、checkbox、file、hidden、image、password、radio、reset、submit、text这10个是传统的输入控件，新增的有color、date、datetime、datetime-local、email、month、number、range、search、tel、tim...
input的type属性整理
要爱学习
02-24 1万+
## **整理input的type属性** 1. type = text 这是我们见得最多也是用的最多的，比如用于登录页面输入用户名，注册是输入电话号码，邮箱等 参数： a：name 表示文本输入框名称 b：size 表示输入框的长度大小 c：maxlength 表示最多可以输入多少个字符 d：value 表示输入框中的默认值 2. type=password 3.type=file 参数： name ：要上传的文件...
input组件 type为nickname pc端获取不到这个绑定的值？
最新发布
天马3798
06-07 393
开发者工具可以获取，Android 手机端可以获取，苹果手机端可以获取。在pc端 使用input blur 事件获取选择昵称结果失败。PC端不少的版本框架目前，获取不到选择的头像；使用微信小程序form表单方式，获取选择的昵称。pc端真机调试，打印没有内容。
input标签的23种type类型
m0_74265396的博客
02-03 1994
示例： <input type="radio" name="radio" value="1">选项1 <input type="radio" name="radio" value="2">选项2。示例： <input type="number" name="quantity" min="1" max="10">示例： <input type="range" name="range" min="0" max="100">示例： <input type="datetime" name="datetime">
input标签属性简述
不负韶话
07-07 3万+
一、input标签属性介绍 input标签有许多属性，如：type,name,id,value，style等 name属性：表示元素的名称，也就是name的值代表当前input元素的名字； id属性：用于css引用或者其他引用 value属性：表示当前input框内显示的文字 style属性：用于设置css样式。如颜色，背景色等 type属性:用于设置输入框的类型，最重要的属性 如图： 以上属性中，type属性最重要，接下来讲解其type属性。 二、input标签的t
＜HTML＞＜type＞标签
小李子还挺酸的博客
03-23 1097
style 定义 <style>标签用于为HTML文档定义样式信息 不像title元素，title元素只能放在<head>标签中。 而style元素可以放在HTML文档中的各个部分，并且一个文档可以包含多个style元素。 属性 属性 值 描述 media screen、tty、tv、projection、handheld、print、braille、aural、all 指定样式适用的媒体。 type text/css 指定样式的类型 实例 <html&
微信小程序中input标签详解及简单实例
08-30
其中，id属性用于标识input标签，type属性用于指定input标签的类型，这里指定为number类型，表示只能输入数字.bindinput事件用于监听input标签的变化，例如输入框中输入的内容变化时触发的事件。 二、input标签的...
详解HTML的input 标签及其禁用方法
01-21
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。HTML 与 XHTML 之间的差异在 HTML 中，<input> 标签没有结束标签。在 XHTML 中，&...
HTML中相似的标签和属性的区别详解
09-28
- `<button>`标签可以包含HTML内容，功能更强大，可添加文本、多媒体等，`type`属性需明确指定，否则在不同浏览器中有不同默认值。 - `<input type="button">`则简单直接，只用于创建按钮，内容通常是文本。 8. `...
详解微信小程序input标签正则初体验
01-03
微信小程序input标签自带type=digit属性，可以调起带有小数点的数字键盘，maxlength属性可以控制我们输入字符的个数，然后我们给input标签绑定bindinput方法。 <input type=digit bindinput=regInput maxlength=...
详解PHP中的 input属性（隐藏 只读 限制）
10-19
本文将深入探讨`<input>`标签的几个关键属性，包括隐藏、只读和限制，以及如何利用这些属性来控制用户输入的行为。 首先，我们来看`<input type="hidden">`，这是一个非常有用的属性，它创建了一个隐藏的输入字段。...
HTML标签新特性之input标签type属性值大全
01-08
关注重工黑大帅，学习不迷路 一、代码 请输入文字： 请输入密码： 请进行单选： 请进行多选： 请选择文件上传： 信息重置： 隐藏提交按钮： 请选择图片： 二、实现结果： 三、代码 请输入搜索的内容： 请输入邮件：
input type 介绍
田军的专栏
11-19 1383
Input表示Form表单中的一种输入对象，其又随Type类型的不同而分文本输入框，密码输入框，单选/复选框，提交/重置按钮等，下面一一介绍。1，type=text 输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，家庭住址等等。当然这也是Input的 默认类型。 参数name：同样是表示的该文本输入框名称。 参数size：输入框的...
<input>的type属性
Ms_WY的博客
12-20 1253
type 属性规定 input 元素的类型。 语法：   text    定义用户可输入文本的单行输入字段。 Email: Pin:   Password  定义密码字段。密码字段中的字符会被掩码（显示为星号或原点）。 Email: Password:   Radio  定义单选按钮。单选按钮允许用户选取给定数目的选
input的知识
m0_53136368的博客
10-20 229
5、v-model双向绑定值，可以添加修饰符，例如：v-model.lazy：用于多行文本，v-model.number：验证输入类型是否为数字，@submit.prevent：阻止默认行为，提交表单，不是使页面刷新和跳转，v-model.trim：清除输入框前后空格。3、type值为checkbox(多个选项)：如果配置了value，取值为value，data定义为数组；2、type值为radio：取值就是value，必须配置value值，data定义为字符串。
HTML5 中的 input 元素的输入类型（type 属性的取值）
在到处之间找我
02-22 2万+
目录 输入类型：text 输入类型：image 输入类型：reset 输入类型：password 输入类型：submit 输入类型：radio 输入类型：checkbox 输入类型：button 输入类型：hidden 输入类型：file HTML5输入类型 输入类型：number 输入类型：date 输入类型：color 输入类型：range 输入类型：month...
input 的type类型总结
明天的你会感谢今天的自己
08-02 7734
  &lt;input type="text"&gt; 定义供文本输入的单行输入字段，有很多类型，在这里我做一个总结。 text：一个输入文本框，输入的内容直接显示出来； password：密码输入框，输入的内容以小圆点的形式显示出来； submit：提交表单数据至表单处理程序的按钮； radio：单选按钮； checkbox：多选按钮； button：定义按钮，常用于点...
input标签 各属性解释
热门推荐
chao430的博客
03-22 4万+
input标签最全面的type属性   (2016-08-21 23:56:07) 转载▼ 标签：  type   属性   input   分类： HTML标签 由于时间关系，在上一节中只是简单的列举了input标签中的type属性，在本节中就详细地来运用input标签中的type属性。 因为以
input标签如何写入图片
05-31
_data_i_new_clamped); __m128i index01 = _mm_add_epi32(_mm_mullo_epi32(y_transformed_data_i_new_clamped, _mm_set1_epi32(input.cols)), _mm_add_epi32(x_transformed_data_i_new_clamped, _您可以使用`<input>`标签的`type`属性为`file`来创建一个文件上传控件，并且可以使用`mm_set1_epi32(1))); __m128i index10 = _mm_add_epi32(_mm_mullo_epi32(y_transformaccept`属性来指定允许上传的文件类型。在这个控件中，用户可以选择一个或多个文件，并ed_data_i_new_clamped1, _mm_set1_epi32(input.cols)), x_transformed_data_i_new_clamped); __m将其上传到服务器。 如果您想要在文件上传控件中添加一个图片预览功能，您可以在用户选择文件128i index11 = _mm_add_epi32(_mm_mullo_epi32(y_transformed_data_i_new_clamped1, _mm_set后，使用JavaScript将文件内容读取为Base64编码格式，并将其赋值给`<img>`标签的`src1_epi32(input.cols)), _mm_add_epi32(x_transformed_data_i_new_clamped, _mm_set1_epi32(1))); `属性，以便在页面上显示预览图片。 下面是一个简单的示例，它演示了如何 __m128 out_data = _mm_setzero_ps(); __m128 in_data00 = _mm_setzero_ps(); __m128 in_data01 = _mm_setzero_ps(); __m128 in_data10 = _mm_setzero_ps(); __m在文件上传控件中添加图片预览功能： ```html <!DOCTYPE html> <html> <head> <title>Image Upload128 in_data11 = _mm_setzero_ps(); __m128 mask_f = _mm_cvtepi32_ps(mask); if Example</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <div> <label for="image">Select Image:</label> <input type="file" id="image" (_mm_extract_epi32(mask, 0)) { in_data00 = _mm_loadu_ps(in_ptr + _mm_extract_epi name="image" accept="image/*"> </div> <div> <img id="preview" src="#" alt="Preview32(index00, 0)); in_data01 = _mm_loadu_ps(in_ptr + _mm_extract_epi32(index01, Image" style="display: none;"> </div> <script> $(function() { $('#image').change(function() { 0)); in_data10 = _mm_loadu_ps(in_ptr + _mm_extract_epi32(index10, 0)); in_data11 = _mm_loadu_ps(in_ptr + _mm_extract_epi32(index11, 0)); __m128 x_offset_data = var file = this.files[0]; var reader = new FileReader(); reader.onload = function() { $('#preview').attr(' _mm_sub_ps(x_transformed_data_f_new, _mm_cvtepi32_ps(x_transformed_data_i_new)); __m128src', reader.result); $('#preview').show(); } reader.readAsDataURL(file); }); }); </script> </body y_offset_data = _mm_sub_ps(y_transformed_data_f_new, _mm_cvtepi32_ps(y_transformed_data_i_new)); > </html> ``` 在上面的代码中，我们首先创建了一个包含标签和文件上传控件的 __m128 one_minus_x_offset_data = _mm_sub_ps(_mm_set1_ps(1.0), x_offset_data); `<div>`元素。我们将文件上传控件的`type`属性设置为`file`，并使用`accept`属性 __m128 one_minus_y_offset_data = _mm_sub_ps(_mm_set1_ps(1.0), y_offset_data); __m128 top_data = _mm_add_ps(_mm_mul_ps(one_minus_x_offset_data, in_data00), _mm_mul_ps(x_offset来指定只允许上传图片类型的文件。然后，我们创建了另一个包含图片预览的`<div>`_data, in_data01)); __m128 bottom_data = _mm_add_ps(_mm_mul_ps(one_minus_x_offset_data, in_data元素，并使用`<img>`标签来显示预览图片。在`<img>`标签中，我们将`src`属性10), _mm_mul_ps(x_offset_data, in_data11)); out_data = _mm_add_ps(_mm_mul_ps(one_minus_y的值设置为`#`，并将`style`属性的值设置为`display: none;`，以便在页面_offset_data, top_data), _mm_mul_ps(y_offset_data, bottom_data)); } out_data = _mm_and_ps(out_data, mask_f); _mm_storeu_ps(out_ptr + x, out_data); } } return output; } ``加载时隐藏预览图片。 接下来，我们使用jQuery选择器`$('#image')`选中了文件上传控件，并` 这个代码使用了SSE指令集和cv::transform函数来实现图像仿射变换。需要注意的使用`change()`方法为其绑定了一个改变事件。在改变事件的处理函数中，我们首先使用`是，这个代码仅仅是一个示例，实际使用时需要根据具体情况进行优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值