input 标签的 type 属性详解
- 1. input 输入标签的 type 属性
- 1.1 input 标签的 type类型 属性的常用属性值
- 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 />密 码:
<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-passwordornew-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>输入标签的内容,因<input>输入标签 是空标签 - 获取选中项的值 = 选中项的
value的属性值 - 复选框的值: 表示复选框值的DOMString。这在客户端 是看不到的，但是在服务器端，这是用复选框的
name名称属性 提交的value属性的值。name, value属性来提交选中值. - 搭配属性:
name, value,checked- ① 默认 选中状态:
checked- 一个布尔属性，指示 默认情况下 是否选中 此复选框(当页面加载时)。
- 它 不指示 当前是否选中此复选框:如果复选框的状态 已更改，则此内容属性 不反映更改。(只有HTMLInputElement的checked IDL属性被更新。)
- ② 提交时 复选框的值:
value- 如果复选框 当前处于选中状态，则在 提交表单时 用作复选框值的字符串.
- 当提交表单时，只有当前选中的复选框 才提交给服务器，报告的值 是
value属性的值。 - 缺省值: 如果 没有指定 该值，则默认为
value="on"的字符串。
- ① 默认 选中状态:
- 获取的不是
- input-
- 示例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">
- 隐藏输入最常见的用途之一是 跟踪在提交编辑表单时 需要更新哪些数据库记录。一个典型的工作流是这样的:
- 提高网站的安全
- 隐藏输入 还用于 存储和提交 安全令牌或密码，以提高网站的安全性。
- 基本的想法是,如果用户填写一个敏感的表单,比如 在银行网站上 转一些钱到另一个帐户的表单,提供的密码 将会证明 用户的身份,以及他们使用正确的形式 提交转款申请。
- 跟踪编辑内容:使用隐藏输入 来记住 正在编辑的记录的ID
- 搭配属性
- input
type="hidden"和name名称属性,value值属性 搭配 - 名称和值 属性,用来 存储值和传递值
- input
- 示例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一个布尔值，如果存在，表示用户 可以选择多个文件。
- input-
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属性
- 一个字符串，指示要向其提交数据的URL。这优先于
- ④
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 字符 且没有副作用的简单表单。
- 这是默认值。
- URL的构造方法 是从
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 添加行为
- 使用
- 如何在用户点击按钮时 启动 JavaScript 程序 ?
- 用于
- 搭配属性
- 按钮上显示的文字
value- input-
type="button"和value值属性结合 - 不定义
value值,不显示按钮,这是 按钮上面显示的文字 - 按钮上面显示的文字 = input-
value值
- input-
- 按钮上显示的文字
- 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: 在提交表单时, 用作单选按钮值的字符串(如果单选按钮 当前处于选中状态)
- input-
- 示例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数据提交操作 属性 中 指定的页面。
- 表单的
- 显示:
- 搭配属性
- ① 按钮的标签:
valuevalue属性 包含一个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- 纯文本;主要用于调试，所以可以很容易地看到 要提交的数据。
- url编码,
- 一个字符串，用于标识向服务器提交表单数据时使用的编码方法。有三个容许值:
- ④ HTTP 方法
formmethod: HTTP 方法 (get or post) ,提交表单时使用- 一个字符串，指示提交表单数据时使用的HTTP方法;此值覆盖所有表单上给定的任何方法属性。允许的值是:
- ㈠ url数据
get- ❶ 数据: URL 的构造方法是从
formaction或action属性给出的URL开始，附加一个问号(“?”)字符，然后附加表单的数据 - ❷ 编码: 按照
formenctype或表单的enctype属性进行编码。 - ❸ 数据发送: 然后使用
HTTP get请求 将此 URL发送到服务器。 - 这种方法适用于: 只包含 ASCII字符 且没有副作用的简单表单。
- 这是默认值。
- ❶ 数据: URL 的构造方法是从
- ㈡ 请求体数据
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 电话号码 . 输入电话号码的控件。 |
| html5. 电子邮件. 用于编辑电子邮件地址的字段。 | |
| ⑪ url | html5. url. 用于输入URL的字段。 |
| ⑫ search | html5 搜索文本. 用于 输入搜索字符串 的单行文本字段。换行符 将自动从输入值中 删除。 |
| ⑬ | 已废弃. 基于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属性值。
- 在 谷歌浏览器中，可以按下 ctrl+shift+c 查看源代码，改变颜色后，选中颜色，在右下方的 “accessibility” 菜单项 的 “computed properties” 中查看到改变后的
- input 事件 和 change 事件
- 颜色文本框: 如果浏览器 不支持颜色选择器，而只有一个 输入颜色字符串的 文本框，则可以使用
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属性 来更改 每次增加日期时 跳转的天数(例如，可能您只想让 星期六成为可选择的)。然而，在编写本文时，这在任何实现中似乎都不能有效地工作。
- 数字 or
- ⑤ 必须填写:
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)pdiv>span>(label+select)span>(label+select>option)span>(label+select)
<form>
<div class="nativeDatePicker">
<label for="bday">Enter your birthday:</label>
<input type="date" id="bday" name="bday">
<span class="validity"></span>
</div>
<p class="fallbackLabel">Enter your birthday:</p>
<div class="fallbackDatePicker">
<span>
<label for="day">Day:</label>
<select id="day" name="day">
</select>
</span>
<span>
<label for="month">Month:</label>
<select id="month" name="month">
<option selected>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
</span>
<span>
<label for="year">Year:</label>
<select id="year" name="year">
</select>
</span>
</div>
</form>
- javascript
- 检查类型: 检测浏览器是否支持 日期输入
<input type="date">- 创建一个新的
<input>元素，将其类型 设置为date检查 日期输入的类型 设置为 什么,
- 创建一个新的
- 隐藏和显示: 不支持的浏览器 将返回
text,因为date类型 返回到text类型,这时候,隐藏不支持的 日期选择器,即<input type="date">标签,显示回退的控件<select>分别进行设置的 年 月 日.
- 检查类型: 检测浏览器是否支持 日期输入
// 定义变量 define variables
var nativePicker = document.querySelector('.nativeDatePicker');
var fallbackPicker = document.querySelector('.fallbackDatePicker');
var fallbackLabel = document.querySelector('.fallbackLabel');
var yearSelect = document.querySelector('#year');
var monthSelect = document.querySelector('#month');
var daySelect = document.querySelector('#day');
// 初始化 隐藏回控件 hide fallback initially
fallbackPicker.style.display = 'none';
fallbackLabel.style.display = 'none';
// 测试新的日期输入是否返回到文本输入 test whether a new date input falls back to a text input or not
var test = document.createElement('input');
test.type = 'date';
// 如果是，运行if(){}块中的代码 if it does, run the code inside the if() {} block
if(test.type === 'text') {
// 隐藏本机日期选择器 并显示回退控件 hide the native picker and show the fallback
nativePicker.style.display = 'none';
fallbackPicker.style.display = 'block';
fallbackLabel.style.display = 'block';
// 动态填充日期和年份 populate the days and years dynamically
// (月份总是相同的，因此是硬编码的 the months are always the same, therefore hardcoded)
populateDays(monthSelect.value);
populateYears();
}
function populateDays(month) {
// 删除的当前日的选项集,准备填充下一组 delete the current set of <option> elements out of the
// day <select>, ready for the next set to be injected
while(daySelect.firstChild){
daySelect.removeChild(daySelect.firstChild);
}
//创建变量 来保存 要注入的新天数 Create variable to hold new number of days to inject
var dayNum;
// 31 or 30 days? 根据月份 判断天数
if(month === 'January' || month === 'March' || month === 'May' || month === 'July' || month === 'August' || month === 'October' || month === 'December') {
dayNum = 31;
} else if(month === 'April' || month === 'June' || month === 'September' || month === 'November') {
dayNum = 30;
} else {
// 如果月份是二月，计算它是否是闰年 If month is February, calculate whether it is a leap year or not
var year = yearSelect.value;
var isLeap = new Date(year, 1, 29).getMonth() == 1;
isLeap ? dayNum = 29 : dayNum = 28;
}
// 在天数的下拉列表中 输入选项的正确的数字 inject the right number of new <option> elements into the day <select>
for(i = 1; i <= dayNum; i++) {
var option = document.createElement('option');
option.textContent = i;
daySelect.appendChild(option);
}
// 如果已经设置了前一天，则将daySelect的值 设置为该日，以避免 在更改年份时将该日跳回到1
if(previousDay) {
daySelect.value = previousDay;
// 如果将前一天 设置为一个较大的数字，比如31，然后选择一个天数 较少的月份(例如二月)，代码的这一部分 将确保选中可用的最高天数，而不是显示一个空白的daySelect
if(daySelect.value === "") {
daySelect.value = previousDay - 1;
}
if(daySelect.value === "") {
daySelect.value = previousDay - 2;
}
if(daySelect.value === "") {
daySelect.value = previousDay - 3;
}
}
}
function populateYears() {
// 把今年作为一个数字
var date = new Date();
var year = date.getFullYear();
// 让今年 和之前的100年成为可能的 <select>的选项
for(var i = 0; i <= 100; i++) {
var option = document.createElement('option');
option.textContent = year-i;
yearSelect.appendChild(option);
}
}
// 当年和月的<select>值改变时, 重新运行populateDays()，以防更改影响可用天数
yearSelect.onchange = function() {
populateDays(monthSelect.value);
}
monthSelect.onchange = function() {
populateDays(monthSelect.value);
}
//选择保留一天
var previousDay;
//更新 以前设置为使用populateDays()结束的日期 update what day has been set to previously see end of populateDays() for usage
daySelect.onchange = function() {
previousDay = daySelect.value;
}
⑶ 年月日 小时分钟: type=“datetime-local”( yyyy-MM-ddThh:mm )
- 输入 日期和时间:
<input type="datetime-local">- ① 具体到分钟,不支持秒: 创建输入控件，使用户 可以轻松地 输入日期和时间，包括年、月、日 以及 以小时和分钟 为单位的 时间。
- ② 回退成 文本输入:不支持该类型的浏览器,会回退成文本输入
<input type="text">- 回退成文本时的 日期格式限制:
pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}"
- 回退成文本时的 日期格式限制:
- ③ 年月日 小时分钟:
- 控件仅用于 表示 本地日期和时间，而不一定表示 用户的 本地日期和时间。
- 换句话说，一个实现 应该允许 任何年、月、日、小时和分钟的 有效组合——即使这样的组合 在用户的本地时区 是无效的.
- ④ 单独的
date日期 和time时间输入:- 由于浏览器对
datetime-local的支持有限，以及输入的工作方式 存在差异，因此目前最好 还是使用 框架或库 来表示这些内容. - 或者使用 您自己的自定义输入。另一个选项是 使用单独的
date日期 和time时间输入，每个输入都比datetime-local得到更广泛的支持。
- 由于浏览器对
- 浏览器支持
- 搭配属性:
value,min,max,step,required- 遵循
yyyy-MM-ddThh:mm格式 step间隔秒数: 对于datetime-local输入，step的值 以秒为单位给出，比例因子为1000(因为底层数值 以毫秒为单位)。step的默认值是60，表示60秒(或1分钟，或60,000毫秒)。
- 遵循
- 示例1: 设置具体到分钟的 日期和时间
- 设置默认值 和时间限制范围
<label for="meeting-time">请选择会议时间:</label>
<input type="datetime-local" id="meeting-time" name="meeting-time" value="2019-07-13T08:00" min="2019-07-12T00:00" max="2019-07-15T00:00" />
- 显示值 和实际值 不同: 显示的日期和时间格式 与实际值 不同;
- 显示的日期和时间 根据用户的地区(由其操作系统报告)进行格式化，而日期/时间值总是格式化为
yyyy-MM-ddThh:mm。 - 例如，当上面的值 提交到服务器时，它看起来就像
partydate=2017-06-01T08:30,多了 T,不是 / 分隔 ,而是连字符 - 分隔的。 get方法，需要 转义冒号:: 如果通过HTTP GET方法 提交此类数据，则需要 转义冒号:这个字符， 以包含在URL参数中，例如partydate=2017-06-01T08:30，转义为partydate=2017-06-01T08%3A30，其中%3A，就是转义后的:。
- 显示的日期和时间 根据用户的地区(由其操作系统报告)进行格式化，而日期/时间值总是格式化为
⑷ 年月: type=“month” ( YYYY-MM )
- 输入月份和年份:
<input type="month">-
类型
month的元素创建输入字段，允许用户 输入月份和年份，从而可以方便地输入月份和年份。 -
字符串和格式: 该值是一个 字符串，其值的格式为
“YYYY-MM”，其中YYYY是四位数的年份，然后是连字符(“-”),MM是月份号。 -
浏览器支持:
- 控件的UI : 通常因浏览器而异;
- 目前的支持: 还不完善，只有Chrome/Opera和Edge桌面版——以及大多数现代移动浏览器版本——有可用的实现。在不支持
month输入的浏览器中,降级文文本输入.<input type="text">,尽管可能会 自动验证输入的文本，以确保其格式 符合预期。 
-
显示值和实际值的区别: 需要注意的一点是，显示的日期格式与实际值不同;大多数用户代理 根据用户操作系统的设置语言环境 以适合于语言环境的形式 显示月份和年份，而日期的
value总是格式化为yyyy-MM。
-
- 搭配属性:
- ① 最大年月
max: 将最近的年份和月份接受为有效输入- 如果元素中输入的
value超过此值，则元素将 无法通过约束验证。 - 如果
max属性的值 不是“yyyy-MM”格式的 有效字符串，则该元素 没有最大值。
- 如果元素中输入的
- ② 最小年月
min: 作为有效输入接受的最早年份和月份 - 只读 不能编辑
readonly: 布尔值，如果存在，则表示 不能编辑输入值- 因为只读字段不能有值，所以
required必填属性 对指定readonly只读属性的输入没有任何影响
- 因为只读字段不能有值，所以
- ③ 间隔值
step:在递增 和递减输入字段值时 使用的步进间隔step属性是 一个数字，它指定值必须遵循的粒度，或者特殊值any，如下所述。只有与步进基础相等的值才是有效的(如果指定了最小值，则为其他值，如果没有提供这两个值，则为适当的默认值)。- 字符串值
any表示 不包含任何步进，并且允许任何值(排除其他约束，如min和max)。 - 四舍五入: 当用户输入的数据不符合步进配置时，用户代理可以四舍五入到 最近的有效值，当有两个同样接近的选项时，用户代理更喜欢 正向的数字。
- 对于
month输入，step的值以月为单位给出，比例因子为1(因为底层数值也是以月为单位)。步骤的默认值是1个月。
- ① 最大年月
- 示例1: 输入年份和月份,带默认值
- 设置一个默认值: 在
value属性中 包含一个月和一年，如下所示: value="2019-05"- 显示值和实际值的不同: 当将下面的值 提交给服务器时，它看起来就像
startdate=2019-05(name=value)。
- 设置一个默认值: 在
<label for="start">开始年月:</label>
<input type="month" id="start" name="startdate" min="2019-01" value="2019-05" />
- 带默认值的指定年月
- 不带默认值
value属性 - 指定最小和最大时间,在提交时会有提示
- 示例2: 浏览器兼容问题
- 约束模式
pattern="[0-9]{4}-[0-9]{2}" - 单独输入年份和月份: 以跨浏览器的方式 处理表单中的日期(直到所有主流浏览器 都支持它们一段时间)的最佳方法 是让用户 在单独的控件中 输入月份和年份
- 使用
<select>下拉列表 元素;或者使用JavaScript库，如 jQuery date picker 插件。
- 使用
- 处理思路:当浏览器支持
type="month"的输入时,直接使用这个元素,当浏览器不支持时,使用单独输入年份和月份.- 如何判断 浏览器是否支持
type="month": 测试新的日期输入 是否返回到文本输入
`
- 如何判断 浏览器是否支持
- 约束模式
- html
<form>
<div class="nativeDatePicker">
<label for="month-visit">What month would you like to visit us?</label>
<input type="month" id="month-visit" name="month-visit">
<span class="validity"></span>
</div>
<p class="fallbackLabel">What month would you like to visit us?</p>
<div class="fallbackDatePicker">
<div>
<span>
<label for="month">Month:</label>
<select id="month" name="month">
<option selected>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
</span>
<span>
<label for="year">Year:</label>
<select id="year" name="year">
</select>
</span>
</div>
</div>
</form>
- js
// define variables 定义变量
var nativePicker = document.querySelector('.nativeDatePicker');
var fallbackPicker = document.querySelector('.fallbackDatePicker');
var fallbackLabel = document.querySelector('.fallbackLabel');
var yearSelect = document.querySelector('#year');
var monthSelect = document.querySelector('#month');
// hide fallback initially 隐藏回退内容
fallbackPicker.style.display = 'none';
fallbackLabel.style.display = 'none';
// 测试新的日期输入是否返回到文本输入 test whether a new date input falls back to a text input or not
var test = document.createElement('input');
test.type = 'month';
// if it does, run the code inside the if() {} block
if(test.type === 'text') {
// 隐藏本机选择器并显示回退内容 hide the native picker and show the fallback
nativePicker.style.display = 'none';
fallbackPicker.style.display = 'block';
fallbackLabel.style.display = 'block';
// 动态填充年份 populate the years dynamically
// (the months are always the same, therefore hardcoded)
populateYears();
}
function populateYears() {
// 将当前年份作为一个数字 get the current year as a number
var date = new Date();
var year = date.getFullYear();
// 让今年和之前的100年成为可能 Make this year, and the 100 years before it available in the year <select>
for(var i = 0; i <= 100; i++) {
var option = document.createElement('option');
option.textContent = year-i;
yearSelect.appendChild(option);
}
}
- 知识拓展: js中
==和===的区别==表示相等 （值相等）- 等值符，当等号两边的类型相同时，直接比较值是否相等，若不相同，则先转化为类型相同的值，再进行比较；
===表示恒等（类型和值 都要相等）- 等同符，当两边值的类型相同时，直接比较值，若类型不相同，直接返回false；
- 所以类型必须是相同的,可以用来用来判断 值的类型.
- js在比较的时候 如果是
==会先做 类型转换，再判断值得大小，如果是===类型和值必须 都相等。
⑸ 年份 周号: type=“week” ( yyyy-Www )
- 输入年份和周号:
<input type="week">- 类型为
week的元素 创建输入字段，允许轻松输入 年份和该年份的ISO 8601周号(即，第1至52或53周)。 - 值的格式:
yyyy-Www,注意,Www,前缀W必须大写,否则时间值无效.min="2019-W20"有效,min="2019-w20"无效值.
- 类型为
- 浏览器支持
- 跨浏览器支持 目前受限，目前只支持
Chrome/Opera和Microsoft Edge。
- 跨浏览器支持 目前受限，目前只支持
- 降级: 在不支持的浏览器中，控件降级为 与单行文本框
<input type="text">功能相同。 - 外观: 插槽+弹出+清除按钮. 在
Chrome/Opera中，星期控件 提供了填写 星期和年份值的插槽，弹出的日历界面更直观 地选择它们，以及一个“X”按钮来 清除控件的值。- 360 浏览器中的外观(同Chrome内核)
- The Edge 浏览器: 用滑动卷轴打开周和年选择器。
- 360 浏览器中的外观(同Chrome内核)
- 搭配属性
-
① 值
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才能选择
- 时间选择: 年份直接限定在了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小时的格式来输入时间，具体取决于系统语言环境.
- 在Chrome/Opera中:
- 数据提交
- 编码: 提交 包含时间输入的 表单时，在将该值 包含到表单数据 之前对其进行编码。
- 编码的数据格式: 对于时间输入，表单的 时间数据输入 格式
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位小数点的,会显示毫秒
- 显示秒: 如果指定的间隔值
- 时间的默认间隔值: 60秒,
<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小时)。
- 点击箭头会使秒值 改变2秒，但不会影响小时或分钟。分钟(或小时)只能用于当您以秒为单位指定分钟(或小时)的数量时，例如
step="60.1",显示毫秒
step="120",间隔120秒,2分钟,分钟每次改变2分钟,不影响小时
stpe的浏览器差异:- 在 Firefox 中没有箭头，所以没有使用
step值。但是，如果它确实添加了与分钟部分相邻的 秒的输入区域。 - step值在Edge中似乎没有效果。
- 在 Firefox 中没有箭头，所以没有使用
- 示例3: 设置 最大和最小时间:
min="09:00" max="18:00"- 属性值 必须符合时间格式: hh:mm, 注意
09:00,9之前的0 不能省略,否则不是有效时间. - 限制时间范围: 使用
min和max属性 来限制用户可以选择的有效时间。 - 效果: 无法选择,在一些时间选择器(例如 Edge)中，超出指定范围的时间 甚至无法选择。
- 属性值 必须符合时间格式: hh:mm, 注意
- 自动限定 时间范围: 上下选择键,自动限定了时间范围,从09:00-18:00,才能选择.
- 无效提示: 手动输入,无效的时间,在提交时,会显示提示信息.
- 服务器端验证 和客户端验证
- 不能替代: HTML 客户端的表单验证 不能替代确保输入数据格式正确的服务器脚本。
- 对某些人来说，要对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 插件。
- 目前，以跨浏览器的方式 处理表单中的
- 方法1:
- 降级成单行文本 造成的问题:
-
在单独的控件中 输入小时和分钟和秒.
- 动态生成: 回退成文本的 时间选择器的
<select>元素的 小时和分钟值 (下拉列表的子元素<option>)是动态生成的。 - 检查 浏览器支持: 检测浏览器是否支持
< input type = "time" >- 创建元素+设置类型+判断类型+隐藏和显示元素
- 我们创建一个新的
<input>元素,将其type设置为时间,然后立即检查 其类型设置为什么了.—— - 不支持的浏览器 将返回文本,因为类型落回类型文本的时间。
- 如果不支持
<input type="time">，则隐藏本机选择器 并显示回退选择器UI (<select>)。
- 我们创建一个新的
- 创建元素+设置类型+判断类型+隐藏和显示元素
- 动态生成: 回退成文本的 时间选择器的
-
html
<form>
<!-- 针对支持的浏览器: 本地选择器 -->
<div class="nativeTimePicker">
<label for="appt-time">请选择会议时间: (时间段 12:00 to 18:00): </label>
<input id="appt-time" type="time" name="appt-time" min="12:00" max="18:00" required>
<span class="validity"></span>
</div>
<!-- 针对不支持的浏览器: 回退成文本时的 时间选择器 -->
<p class="fallbackLabel">请选择会议时间: (时间段 12:00 to 18:00):</p>
<div class="fallbackTimePicker">
<div>
<span>
<label for="hour">Hour:</label>
<select id="hour" name="hour">
<!-- 子元素<option>,是用js动态添加的 -->
</select>
</span>
<span>
<label for="minute">Minute:</label>
<select id="minute" name="minute">
<!-- 子元素<option>,是用js动态添加的 -->
</select>
</span>
</div>
</div>
</form>
- js
// 定义变量
var nativePicker = document.querySelector('.nativeTimePicker');
var fallbackPicker = document.querySelector('.fallbackTimePicker');
var fallbackLabel = document.querySelector('.fallbackLabel');
var hourSelect = document.querySelector('#hour');
var minuteSelect = document.querySelector('#minute');
// 初始化 隐藏回退选择器,即下拉列表
fallbackPicker.style.display = 'none';
fallbackLabel.style.display = 'none';
// 测试: 测试新的 time 类型输入,是否回退到文本输入
// 新建元素+设置类型+判断元素类型
var test = document.createElement('input');
test.type = 'time';
// 如果是text类型,即回退成文本输入了,代表浏览器不支持,运行if中的代码
if(test.type === 'text') {
// 隐藏本机选择器,并显示回退选择器
// 隐藏+显示
nativePicker.style.display = 'none';
fallbackPicker.style.display = 'block';
fallbackLabel.style.display = 'block';
// 动态填充小时和分钟
populateHours();
populateMinutes();
}
function populateHours() {
// 填充小时下拉列表 <select> ,限制一天6个小时,时间段 12;00-18:00
// 判断+创建+赋值+添加
for(var i = 12; i <= 18; i++) {
var option = document.createElement('option');
option.textContent = i;
hourSelect.appendChild(option);
}
}
function populateMinutes() {
// 填充分钟下拉列表 <select> 每小时60分钟,0-59
for(var i = 0; i <= 59; i++) {
var option = document.createElement('option');
option.textContent = (i < 10) ? ("0" + i) : i;
minuteSelect.appendChild(option);
}
}
// 如果小时是18，分钟值设置为00
// 不能选择超过18:00的时间
function setMinutesToZero() {
if(hourSelect.value === '18') {
minuteSelect.value = '00';
}
}
hourSelect.onchange = setMinutesToZero;
minuteSelect.onchange = setMinutesToZero;
⑺ 输入数字: type=“number”
- 输入数字:
<input type="number">number类型的元素 用于让用户输入一个数字。- 内置验证: 它们包括用于 拒绝非数值项的 内置验证。
- 步进箭头: 浏览器可以选择提供步进箭头，让用户使用鼠标 或简单地用指尖点击 来增加或减少值。
- 简化 和自动验证: 简化在构建用户界面和在表单中输入数字的逻辑时的工作。当您使用正确的类型值
number创建一个数字输入时，您将自动验证输入的文本，是否是一个数字，通常还会得到一组up和down按钮，用于上下移动该值。 - 数字键盘: 移动浏览器 通过显示一个更适合在用户试图输入值时，输入数字的特殊键盘 (数字键盘)，进一步帮助用户体验。
- 有效值:
- 当一个数字输入 为空 或者输入一个数字时，它被认为是有效的，但是在其他情况下 是无效的。
- 如果使用了
required属性，则输入在为空时不再被认为是有效的。 - 任何数字都是可以接受的值，只要它是一个 有效的浮点数(即不是NaN或无穷大)。NaN: 不是一个数字，not a number（非数值）.
- 浏览器支持
- 搭配属性
- ① 最大值
max: 此输入要接受的最大值- 此输入要接受的最大值。
- 如果元素中输入的值 超过此值，则元素将无法通过约束验证。
- 如果
max属性的值不 是一个数字，那么元素 就没有最大值。 - 此值必须大于或等于
min属性的值。
- ② 最小值
min: 此输入要接受的最小值。 - ③ 占位符 示例值
placeholder: 当字段为空时，要在字段内显示的示例值- 占位符属性的属性值： 是一个字符串，它向用户提供一个简短的提示，提示字段中 需要哪些信息。
- 它应该是一个 显示预期数据类型 的单词或短语，而不是一个解释性消息。文本 不能包含回车或换行，即只能单行。
- 如果可以，避免使用占位符属性。它在语义上 不如解释表单的其他方法有用，并且可能导致内容 出现意想不到的技术问题。
- 用于提示输入应该取 值的格式。当元素的值为
“”时，它将显示在编辑框中。一旦数据输入框中，占位符就消失了;如果框被清空，占位符将重新出现。
- ④ 只读
readonly: 控制值是否只读的布尔属性 - ⑤ 间隔值
step: 当使用向上和向下箭头 来调整值以及验证时 使用的步进间隔
- ① 最大值
- 客户端验证和 服务器验证: 重要的是要记住，用户可以在幕后修改HTML，因此站点不能出于任何安全目的 ，只使用简单的客户端验证。必须也要在服务器端 进行验证，避免出现任何安全隐患。
- △: 数字输入 不被支持时，可使用
pattern属性 ，使输入的值 符合特定的 regex 模式。使用min,max,step进行一定的约束。
- 示例1: 输入一个数字,设置最小值和最大值
<form>
<label for="product">产品数量</label>
<input type="number" id="product" min="5" max="15" name="product" />
<input type="submit" value="提交" />
</form>
- 自带验证
- 示例2: 自带默认值:
value="10"
- 示例3: 占位符:
<input type="number" placeholder="请输入小于10的值" max="10">
- 示例4:
- ① 设置间隔值
<form action="">
<input type="number" placeholder="请输入10的倍数" step="10" min="0" max="100" style="width:120px" />
<input type="submit" value="提交" />
</form>
-
-
② 指定小数点位数: 使用
step间隔值 属性- 数字输入的一个问题是，它们的步长默认为1——如果您试图输入一个小数，比如“1.1”，它将被认为是无效的。如果您想要输入一个需要小数的值，需要在
step值中反映这一点.
- 数字输入的一个问题是，它们的步长默认为1——如果您试图输入一个小数，比如“1.1”，它将被认为是无效的。如果您想要输入一个需要小数的值，需要在
-
允许小数点后两位:
step="0.01"，数字会0.01的进行增和减。
<form action="">
<input type="number" />
<input type="submit" value="提交" />
</form>
- 不指定 小数点位数(因为，默认间隔值
step是 1，所以，默认情况下，带小数点的数值无效)
- ③ 指定小数点后两位
- 示例5: 提供建议值
- 关联关系:
label-for=input-idinput-list=datalist-id
- 嵌套关系: datalist>
<option> value
- 关联关系:
<form action="">
<label for="ticketnumber">票号:</label>
<input id="ticketnumber" type="number" list="defaultNumbers" />
<datalist id="defaultNumbers">
<option value="10001"></option>
<option value="10002"></option>
<option value="10003"></option>
<option value="10004"></option>
<option value="10005"></option>
</datalist>
<input type="submit" value="提交" />
</form>
-
示例6: 当输入有效值和无效值时,在后面显示 叉 ×和 对 √
-
html
<form action="">
<label for="balloons">气球的数量:</label>
<input type="number" id="balloons" placeholder="请输入10的倍数" step="10" min="0" max="100" required/>
<span class="validity"></span>
</br>
<input type="submit" value="提交" />
</form>
- css
<head>
<style>
#balloons{
width:120px;
}
input:invalid+.validity:after{
content:"×";
}
input:valid+.validity:after{
content:"√";
}
</style>
</head>
⑻ 不精确数值 (范围数值): type=“range”
- 输入不精确 范围数值:
<input type="range">（美 /reɪndʒ/）- 类型
range的元素 允许用户 指定一个数值，该数值 必须不小于给定值，且不大于 另一个给定值。 - 然而，是否是精确的数值 并不重要。
- 显示: 这通常使用滑块 或拨号控件表示，而不是像数字输入类型这样的文本输入框。
- 不需要精确值: 由于这种小部件不精确，除非控件的确切值 不重要，否则通常不应该使用它。
- 类型
- 降级为文本: 如果用户的浏览器 不支持类型
range范围，它将后退 并将其视为文本输入。 - 搭配属性
- ① 最大值
max: 最大允许值- 如果
max属性的值 不是一个数字，那么元素就没有最大值。 - 此值必须大于或等于
min属性的值。
- 如果
- ② 最小值
min: 最小允许值- 如果为
min指定的值不是一个有效的数字，则输入没有最小值。 - 此值必须小于或等于
max属性的值。 - 默认 最小值和最大值: 默认情况下，最小值为
0，最大值为100。如果这不是您想要的，您可以通过更改min , max属性的值 指定不同的边界。这些可以是任何浮点值。
- 如果为
- ③ 间隔值
step: 步进间隔，用于用户界面和验证目的.step属性 是一个数字，它指定 值必须遵循的粒度，或者特殊值any，只有与步进基础相等的值 才是有效的.- 字符串值
any表示 不指定 步进间隔. - 默认情况下，粒度为 step=“1”,间隔值默认是1，这意味着，默认情况下 输入框的有效值总是整数。
- 小数点后的位数: 可以更改
step属性来控制粒度，通过控制间隔值的小数点位数，来控制有效值的小数点位数。例如，如果您需要一个介于5和10之间的值，精确到小数点后两位，应该将step的值设置为0.01 - 如果想接受任何值，无论它扩展到 多少位小数，您可以为
step属性指定任意值:step="any"
- ④ 所选值
value:value属性 包含一个字符串DOMString，它包含所选数字的字符串 表示形式。该值 从来不是空字符串""。value的默认值: ❶ 中间值 或者 ❷min属性的值。位于指定的最小值和最大值之间——除非最大值实际上小于最小值，在这种情况下，默认值被设置为min属性的值。- 值 和最大值,最小值的关系:
- 如果试图 将值设置为小于最小值，则将其 设置为最小值（最接近的合格值）。类似地，如果试图 将值设置得高于最大值，则会将其 设置为最大值（最接近的合格值）。
- 确定默认值的 算法为:
defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min : rangeElem.min + (rangeElem.max - rangeElem.min)/2;
- ① 最大值
- 知识拓展:三目运算符
- 三目运算符的语法为:
conditions ? statementA : statementB ; - 如果满足条件
condition，就执行语句statementA，否则就执行语句statementB。 - 注意：
statementA和statementB语句必须为单个语句，如果使用多个语句就会报错。
- 三目运算符的语法为:
- 数值
type="number"和 范围数值type="range"的区别- 精确值:
number类型允许用户 输入一个带有可选约束的数字，强制其 值介于最小值和最大值之间，但它确实 要求用户输入一个特定的值。 - 非精确值:
range输入类型 允许您在用户 甚至不关心或不知道所选择的特定数值 是什么的情况下，向用户询问值，比如调节音量时。 - 相同点：都是表示 数值。
- 精确值:
- 常用 不精确范围值输入的例子:
type="range"- ① 音频控制，如音量和平衡，或过滤器控制。
- ② 颜色配置控件，如颜色通道、透明度、亮度等。
- ③ 游戏配置控件，如难度、可视距离、世界大小等。
- ④ 密码管理器生成的密码的 密码长度。
- 选择参考: 更注重百分比 而不是具体数值.
- 通常，如果用户 对最小值和最大值之间的 距离的百分比 比实际数字本身更感兴趣，那么 范围值输入是一个很好的选择。
- 例如，在家庭立体声音量控制的情况下，用户通常认为“将音量设置为最大值的一半”，而不是“将音量设置为0.5”。
- 验证
- ① 没有可用的
pattern格式验证;然而，执行以下形式的自动验证: - ② 如果将值
value设置为 无法转换为 有效浮点数的值，则验证将失败，因为是错误的输入。 - ③ 值不会小于最小值
min，默认值为min="0"。 - ④ 值不会大于最大值
max。默认值是max="100"。 - ⑤ 值时 间隔值
step的倍数.默认是step="1".
- ① 没有可用的
- 浏览器支持
- 示例1: 用范围值 表示音量和铃声
<div>
<input type="range" id="volume" name="volume" min="0" max="11" />
<label for="volume">音量</label>
</div>
<div>
<input type="range" id="bell" name="bell" min="0" max="100" value="90" step="5" />
<label for="bell">铃声</label>
</div>
- 示例2: 让用户选择 任何 介于0到π之间的值, 小数部分 没有任何限制。
<input type="range" min="0" max="3.14" step="any">
- 示例3: 显示刻度线和标签
- 刻度线：通过
option-value值属性 实现 - 标签：通过
option-label标签描述 属性 实现
- 刻度线：通过
<p>显示刻度线和标签</p>
<input type="range" list="tickmarks" />
<datalist id="tickmarks">
<option value="0" label="0%"></option>
<option value="10"></option>
<option value="20"></option>
<option value="30"></option>
<option value="40"></option>
<option value="50" label="50%"></option>
<option value="60"></option>
<option value="70"></option>
<option value="80"></option>
<option value="90"></option>
<option value="100" label="100%"></option>
</datalist>
- 谷歌:
- 刻度线和标签的 浏览器支持
- 目前还没有浏览器完全支持这些特性。
- 例如，Firefox 根本不支持 刻度线和标签
- 而 Chrome 支持刻度线，但不支持标签描述。
- Chrome 的 66 版本(66.0.3359.181)支持标签描述，但是标签必须使用 CSS 样式，因为它的显示属性默认设置为 none，隐藏标签。
- 示例4: 让滑动块 从默认的水平的 变成垂直的
- 通过 css 代码实现：
transform-origin: 75px 75px;transform: rotate(-90deg);旋转方法，逆向90度。
- html
<div class="sliderWrapper">
<input type="range" list="tickmarks" class="rotate-input" min="0" max="100" value="20" />
</div>
<datalist id="tickmarks">
<option value="0" label="0%"></option>
<option value="10" label="10%"></option>
<option value="20" label="20%"></option>
<option value="30" label="30%"></option>
<option value="40" label="40%"></option>
<option value="50" label="50%"></option>
<option value="60" label="60%"></option>
<option value="70" label="70%"></option>
<option value="80" label="80%"></option>
<option value="90" label="90%"></option>
<option value="100" label="100%"></option>
</datalist>
- css
/*翻转范围值的滑动块 变成垂直的*/
.sliderWrapper {
/*设置宽高 为翻转后的滑动块 预留空间*/
width: 20px;
height: 150px;
}
.rotate-input {
width: 150px;
height: 20px;
transform-origin: 75px 75px;
transform: rotate(-90deg);
}
- 输出: 逆时针90度旋转,最大值在顶部,最小值在底部
⑼ 搜索文本框: type=“search”
- 搜索文本框:
<input type="search">- 用途: 类型是 搜索
search的元素是 为用户输入 搜索查询 而设计的文本字段。 - 可能的特别样式: 这些输入 在功能上与文本输入相同，但是用户代理(浏览器) 可能对其进行不同的样式设置。
- 用途: 类型是 搜索
- 浏览器支持
- 搭配属性
- ① 搜索文本框的值
value:value属性包含一个DOMString，表示 搜索字段中 包含的值。JavaScript中 可以使用HTMLInputElement.value检索值。- 如果输入没有验证约束，则值 可以是 任何文本字符串 或 空字符串
(“”)。
- 如果输入没有验证约束，则值 可以是 任何文本字符串 或 空字符串
- ② 最大长度 字符数
maxlength: 输入应接受的最大字符数 - ③ 最小长度 字符数
minlength: 输入长度的最小字符数 可以并且仍然被认为是有效的 - ④ 正则表达式
pattern: 输入的内容 必须匹配正则表达式 才能有效- 提示文本: 使用
title属性 指定大多数浏览器将显示为 工具提示的文本，以解释 匹配模式的需求。还应该包括 附近的其他解释性文本。
- 提示文本: 使用
- ⑤ 占位符
placeholder: 当输入字段为空时，要在该字段中显示的示例值 - ⑥ 只读
readonly: 指示输入内容 是否为只读的 布尔属性 - ⑦ 字符宽度（可见字符数）
size: 一个数字，指示输入字段应该有多少个字符宽 - ⑧ 拼写检查
spellcheck: 控制 是否为输入字段 启用拼写检查，或是否 应使用默认拼写检查配置 - ⑨ 名称
name: 必须给输入字段 设置一个名称，否则什么也不会提交。- 提交时，发送到服务器的数据 名称/值对
name/value
- 提交时，发送到服务器的数据 名称/值对
- ⑩ 必填 不能为空:
required属性
- ① 搜索文本框的值
- 示例1: 使用搜索文本框
<!-- 搜索文本框 -->
<label for="site-search">搜索网站:</label>
<input type="search" id="site-search" />
<input type="submit" value="提交" />
- 示例2: 文本框 和搜索文本框的区别
<!-- 搜索文本框 -->
<label for="site-search">搜索网站:</label>
<input type="search" id="site-search" />
<button>搜索</button>
-
主要的基本区别在于: 浏览器处理它们的方式。
-
① 交叉图标和删除: 首先要注意的是，一些浏览器 显示了一个交叉图标，如果需要，可以单击该图标 立即删除搜索项。而普通的文本框,没有这个快捷删除.
- 搜索文本框:
- 普通文本框:
- 搜索文本框:
-
② 自动存储 搜索关键词: 自动完成选项
- 现代浏览器还倾向于自动存储 以前跨域输入的搜索项，当后续搜索 在该域中的搜索输入中 执行时，这些搜索项 将作为自动完成选项 出现。这将帮助 那些倾向于长期对相同或相似的搜索查询 进行搜索的用户。
- 自动完成选项:
- 示例3: 设置占位符
<input type="search" id="site-search" placeholder="请输入网站名" />
- 示例4: 搜索文本框的可访问性
- 常见的设计: 不为搜索字段提供标签(尽管可能有一个放大镜图标或类似的东西
- 导致的 可访问性问题: 没有标签→没有文字,屏幕阅读器读不出来,盲人不知道 这个字段是干嘛用的.
- 解决办法: 不影响视觉设计的方法: 使用 WAI-ARIA（无障碍的网页应用技术）特性:
- 声明表单功能: 使屏幕阅读器时，如何 声明该表单 是搜索表单？
- 使用 aria-label 属性,添加标签描述。
- 属性值，应该是一个描述性的内容，将由屏幕阅读器读出。
- 是用不可视的方式，给元素加 标签 label（如果被描述元素，存在真实的描述元素，可使用
aria-labelledby属性作为来 绑定描述元素和被描述元素来代替）。 aria-label属性可以用在 任何典型的 HTML 元素中，并不需要配合特定的ARIA role才能使用。
- 这个属性会为元素添加一个标签 = 不可见的
<label>标签元素 - 显示: 没有视觉上的区别，但是屏幕阅读器用户（盲人，视力障碍者） 可以获得更多的信息。
- 使用 aria-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: 输入字段的宽度，即能显示在屏幕上的字符数- 物理大小: 控制 输入框的 物理大小
- 显示的字符数: 指定输入框 一次可以显示的字符数，所以，单位是字符，属性值，必须是整数值。
- ⑧ 不能为空,必填项
requiredrequired="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: 提供 建议值（可选择的数据列表）
- 标签嵌套
inputdatalist > 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文本输入。
- 输入和编辑 url:
- 浏览器支持
- 搭配属性
- ① 值
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的值。 - 长度和验证: 如果字段的 文本值的长度 大于
maxlengthUTF-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-
- 默认选项列表: 可以提供一个 默认选项列表，用户可以通过指定
<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，直接将数据 提交给服务器。
- 服务器端 要有 格式验证代码: 如果服务器端代码 无法验证 它接收到的数据，那么当格式 不正确的数据(或者数据太大、类型错误等等)被 输入数据库时，会出现大问题。
- 必须设置 验证格式的脚本: HTML 表单验证 不能替代 确保输入数据格式正确 的脚本。
- 捐助: 喜欢这篇文章吗? 创作不易, 捐助此文,向团团 表示鼓励和支持吧~❤
- 捐助二维码:
- 参考文档
- 感谢：♥♥♥ 如果这篇文章 对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
- 转载 请注明出处 ,Thanks♪(･ω･)ﾉ
- 作者：Hey_Coder
- 来源：CSDN
- 原文：https://blog.csdn.net/VickyTsai/article/details/94839889
- 版权声明：本文为博主原创文章，转载请附上博文链接！
5862
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
