input 标签的 type 属性详解

1. input 输入标签的 type 属性
- 1.1 input 标签的 type类型属性的常用属性值
- - ⑴ 单行文本框: type="text"
  - ⑵ 密码框: type="password"
  - ⑶ 复选框: type="checkbox"
  - ⑷ 隐藏值: type="hidden"
  - ♣ 6 种按钮类型
  - ⑸ 文件上传: type="file"
  - ⑹ 图片提交按钮: type="image"
  - ⑺ 按钮: type="button"
  - ⑻ 单选按钮: type="radio"
  - ⑼ 重置清空表单: type="reset"
  - ⑽ 提交按钮: type="submit"
- 1.2 input 标签的 type 属性的 html5 新增类型值
- - ⑴ 颜色: type="color" （颜色选择器 / 颜色文本框）
  - ⑵ 年月日: type="date"( yyyy-MM-dd )
  - ⑶ 年月日小时分钟: type="datetime-local"( yyyy-MM-ddThh:mm )
  - ⑷ 年月: type="month" ( YYYY-MM )
  - ⑸ 年份周号: type="week" ( yyyy-Www )
  - ⑹ 小时分钟,可选的秒: type="time"( hh:mm, hh:mm:ss)
  - ⑺ 输入数字: type="number"
  - ⑻ 不精确数值 (范围数值): type="range"
  - ⑼ 搜索文本框: type="search"
  - ⑽ 输入电话号码: type="tel"
  - ⑾ 输入url: type="url"
  - ⑿ 邮箱: type="email"

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>

<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 新增类型值

属性值	用于
① color	html5. 颜色. 用于指定颜色的控件。颜色选择器的UI 除了接受简单的颜色作为文本外，没有其他必需的特性.
② date	html5. 日期. 用于输入日期(年、月、日，没有时间)的控件。
③ datetime-local	html5. 无时区日期和时间. 用于输入日期和时间的控件，没有时区。
④ time	html5. 无时区时间. 用于输入没有时区的时间值的控件。
⑤ month	html5 年月. 用于输入月份和年份的控件，没有时区。
⑥ week	用于输入日期的控件，该日期由一个星期编号和一个没有时区的星期编号组成。
⑦ number	html5 数字 . 用于输入数字的控件。
⑧ range	html5 范围值不精确数字.一种用于输入精确值不重要的数字的控件。
⑨ tel	html5 电话号码 . 输入电话号码的控件。
⑩ email	html5. 电子邮件. 用于编辑电子邮件地址的字段。
⑪ url	html5. url. 用于输入URL的字段。
⑫ search	html5 搜索文本. 用于输入搜索字符串的单行文本字段。换行符将自动从输入值中删除。
⑬ 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 fallbacknativePicker.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 injectedwhile(daySelect.firstChild){daySelect.removeChild(daySelect.firstChild);}//创建变量 来保存 要注入的新天数  Create variable to hold new number of days to injectvar 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 notvar 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的值 设置为该日，以避免 在更改年份时将该日跳回到1if(previousDay) {daySelect.value = previousDay;// 如果将前一天 设置为一个较大的数字，比如31，然后选择一个天数 较少的月份(例如二月)，代码的这一部分 将确保选中可用的最高天数，而不是显示一个空白的daySelectif(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>

// 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 fallbacknativePicker.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 numbervar 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>

// 定义变量
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 selectfor(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>

// 定义变量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-59for(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>

<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>

/*翻转范围值的滑动块 变成垂直的*/.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，直接将数据提交给服务器。
- 服务器端要有格式验证代码: 如果服务器端代码无法验证它接收到的数据，那么当格式不正确的数据(或者数据太大、类型错误等等)被输入数据库时，会出现大问题。

捐助: 喜欢这篇文章吗? 创作不易, 捐助此文,向团团表示鼓励和支持吧~❤
捐助二维码:

参考文档
- W3School 教程
- MDN HTML 教程
感谢：♥♥♥ 如果这篇文章对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~

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

【input 标签的 type 属性详解】相关推荐

input标签的value属性详解
请结合这篇文章一起看 input 标签的 value 属性的作用是由 input 标签的 type 属性的值决定的当 type 的取值为 button.reset.submit 中的其中一个时,此时 ...
input标签的name属性详解
请结合这篇文章一起看 name 属性规定 input 元素的名称 name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据只有设置了 name 属性 ...
html中input标签中type属性小总(包含html5新增表单属性)
前言 HTML5新增了许多属性和方法,其中一些就有input标签中 type属性. 有关于input中type的全部可取值如下 1.button 2.text 3.time(会呈现表的形状) 4. ...
html5中preload是什么意思,html的video标签的preload属性详解
--------------------------------------------------------- Ta 只分享的内容开始 ------------------------------ ...
html密码字段语法,HTML input 标签的 type 属性
HTML 标签的 type 属性定义和用法 type 属性规定 input 元素的类型. 实例下面的表单拥有两个输入字段以及一个提交按钮: First name: Last name: 亲自试一试 ...
表单input标签type属性详解
目标:详解表单input标签type属性常用的属性值一.input标签和它的type属性 PS:input 元素可以用来生成一个供用户输入数据的简单文本框. 在默认的情况下, 什么样的数据均可以输入 ...
前端CSS input type属性详解
input在前端中使我们需要熟悉使用的一个标签,input中type属性值不止text一个. 1.首先是最常用的 text <input type="text" placeh ...
[暑假]＜script＞标签中的type属性详解
type属性是必须写的属性吗? 不写的情况: <script>标签中的type属性不是必须写的属性, 因为按照惯例,这个值始终都是"text/javascript", ...
script标签type属性详解
1.(这是我们常用的)省略或 JavaScript MIME 类型:这表明脚本是 JavaScript. HTML5 规范敦促作者省略该属性,而不是提供多余的 MIME 类型.在早期的浏览器中,这标识 ...

【input 标签的 type 属性详解】

input 标签的 type 属性详解

1. input 输入标签的 type 属性

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

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

⑵ 密码框: type=“password”

⑶ 复选框: type=“checkbox”

⑷ 隐藏值: type=“hidden”

♣ 6 种按钮类型

⑸ 文件上传: type=“file”

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

⑺ 按钮: type=“button”

⑻ 单选按钮: type=“radio”

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

⑽ 提交按钮: type=“submit”

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

⑴ 颜色: type=“color” （颜色选择器 / 颜色文本框）

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

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

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

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

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

⑺ 输入数字: type=“number”

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

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

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

⑾ 输入url: type=“url”

⑿ 邮箱: type=“email”

【input 标签的 type 属性详解】相关推荐

最新文章

热门文章

【input 标签的 type 属性详解】

input 标签的 type 属性详解

1. input 输入标签的 type 属性

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

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

⑵ 密码框: type=“password”

⑶ 复选框: type=“checkbox”

⑷ 隐藏值: type=“hidden”

♣ 6 种 按钮类型

⑸ 文件上传: type=“file”

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

⑺ 按钮: type=“button”

⑻ 单选按钮: type=“radio”

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

⑽ 提交按钮: type=“submit”

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

⑴ 颜色: type=“color” （颜色选择器 / 颜色文本框）

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

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

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

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

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

⑺ 输入数字: type=“number”

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

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

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

⑾ 输入url: type=“url”

⑿ 邮箱: type=“email”

【input 标签的 type 属性详解】相关推荐

最新文章

热门文章

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

♣ 6 种按钮类型

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

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

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