【input 标签的 type 属性详解】

【HTML】 专栏收录该内容
26 篇文章 3 订阅

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

⑸ 文件上传: 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的构造方法 是从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)的 实际名称之外,还有一些特殊的关键字可以使用:
      • 这里指定的值 覆盖所属表单的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值 属性搭配
    • ① 提交时 传递值 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
    • 版权声明:本文为博主原创文章,转载请附上博文链接!

在这里插入图片描述

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值