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-password
ornew-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
数据提交操作 属性 中 指定的页面。
- 表单的
- 显示:
- 搭配属性
- ① 按钮的标签:
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
- 纯文本;主要用于调试,所以可以很容易地看到 要提交的数据。
- 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 电话号码 . 输入电话号码的控件。 |
⑩ email | 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)
p
div>
span>(label+select)
span>(label+select>option)
span>(label+select)
<form>
<div class="nativeDatePicker">
<label for="bday">Enter your birthday:</label>
<input type="date" id="bday" name="bday">
<span class="validity"></span>
</div>
<p class="fallbackLabel">Enter your birthday:</p>
<div class="fallbackDatePicker">
<span>
<label for="day">Day:</label>
<select id="day" name="day">
</select>
</span>
<span>
<label for="month">Month:</label>
<select id="month" name="month">
<option selected>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
</span>
<span>
<label for="year">Year:</label>
<select id="year" name="year">
</select>
</span>
</div>
</form>
- javascript
- 检查类型: 检测浏览器是否支持 日期输入
<input type="date">
- 创建一个新的
<input>
元素,将其类型 设置为date
检查 日期输入的类型 设置为 什么,
- 创建一个新的
- 隐藏和显示: 不支持的浏览器 将返回
text
,因为date
类型 返回到text
类型,这时候,隐藏不支持的 日期选择器,即<input type="date">
标签,显示回退的控件<select>
分别进行设置的 年 月 日.
- 检查类型: 检测浏览器是否支持 日期输入
// 定义变量 define variables
var nativePicker = document.querySelector('.nativeDatePicker');
var fallbackPicker = document.querySelector('.fallbackDatePicker');
var fallbackLabel = document.querySelector('.fallbackLabel');
var yearSelect = document.querySelector('#year');
var monthSelect = document.querySelector('#month');
var daySelect = document.querySelector('#day');
// 初始化 隐藏回控件 hide fallback initially
fallbackPicker.style.display = 'none';
fallbackLabel.style.display = 'none';
// 测试新的日期输入是否返回到文本输入 test whether a new date input falls back to a text input or not
var test = document.createElement('input');
test.type = 'date';
// 如果是,运行if(){}块中的代码 if it does, run the code inside the if() {} block
if(test.type === 'text') {
// 隐藏本机日期选择器 并显示回退控件 hide the native picker and show the fallback
nativePicker.style.display = 'none';
fallbackPicker.style.display = 'block';
fallbackLabel.style.display = 'block';
// 动态填充日期和年份 populate the days and years dynamically
// (月份总是相同的,因此是硬编码的 the months are always the same, therefore hardcoded)
populateDays(monthSelect.value);
populateYears();
}
function populateDays(month) {
// 删除的当前日的选项集,准备填充下一组 delete the current set of <option> elements out of the
// day <select>, ready for the next set to be injected
while(daySelect.firstChild){
daySelect.removeChild(daySelect.firstChild);
}
//创建变量 来保存 要注入的新天数 Create variable to hold new number of days to inject
var dayNum;
// 31 or 30 days? 根据月份 判断天数
if(month === 'January' || month === 'March' || month === 'May' || month === 'July' || month === 'August' || month === 'October' || month === 'December') {
dayNum = 31;
} else if(month === 'April' || month === 'June' || month === 'September' || month === 'November') {
dayNum = 30;
} else {
// 如果月份是二月,计算它是否是闰年 If month is February, calculate whether it is a leap year or not
var year = yearSelect.value;
var isLeap = new Date(year, 1, 29).getMonth() == 1;
isLeap ? dayNum = 29 : dayNum = 28;
}
// 在天数的下拉列表中 输入选项的正确的数字 inject the right number of new <option> elements into the day <select>
for(i = 1; i <= dayNum; i++) {
var option = document.createElement('option');
option.textContent = i;
daySelect.appendChild(option);
}
// 如果已经设置了前一天,则将daySelect的值 设置为该日,以避免 在更改年份时将该日跳回到1
if(previousDay) {
daySelect.value = previousDay;
// 如果将前一天 设置为一个较大的数字,比如31,然后选择一个天数 较少的月份(例如二月),代码的这一部分 将确保选中可用的最高天数,而不是显示一个空白的daySelect
if(daySelect.value === "") {
daySelect.value = previousDay - 1;
}
if(daySelect.value === "") {
daySelect.value = previousDay - 2;
}
if(daySelect.value === "") {
daySelect.value = previousDay - 3;
}
}
}
function populateYears() {
// 把今年作为一个数字
var date = new Date();
var year = date.getFullYear();
// 让今年 和之前的100年成为可能的 <select>的选项
for(var i = 0; i <= 100; i++) {
var option = document.createElement('option');
option.textContent = year-i;
yearSelect.appendChild(option);
}
}
// 当年和月的<select>值改变时, 重新运行populateDays(),以防更改影响可用天数
yearSelect.onchange = function() {
populateDays(monthSelect.value);
}
monthSelect.onchange = function() {
populateDays(monthSelect.value);
}
//选择保留一天
var previousDay;
//更新 以前设置为使用populateDays()结束的日期 update what day has been set to previously see end of populateDays() for usage
daySelect.onchange = function() {
previousDay = daySelect.value;
}
⑶ 年月日 小时分钟: type=“datetime-local”( yyyy-MM-ddThh:mm )
- 输入 日期和时间:
<input type="datetime-local">
- ① 具体到分钟,不支持秒: 创建输入控件,使用户 可以轻松地 输入日期和时间,包括年、月、日 以及 以小时和分钟 为单位的 时间。
- ② 回退成 文本输入:不支持该类型的浏览器,会回退成文本输入
<input type="text">
- 回退成文本时的 日期格式限制:
pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}"
- 回退成文本时的 日期格式限制:
- ③ 年月日 小时分钟:
- 控件仅用于 表示 本地日期和时间,而不一定表示 用户的 本地日期和时间。
- 换句话说,一个实现 应该允许 任何年、月、日、小时和分钟的 有效组合——即使这样的组合 在用户的本地时区 是无效的.
- ④ 单独的
date
日期 和time
时间输入:- 由于浏览器对
datetime-local
的支持有限,以及输入的工作方式 存在差异,因此目前最好 还是使用 框架或库 来表示这些内容. - 或者使用 您自己的自定义输入。另一个选项是 使用单独的
date
日期 和time
时间输入,每个输入都比datetime-local
得到更广泛的支持。
- 由于浏览器对
- 浏览器支持
- 搭配属性:
value,min,max,step,required
- 遵循
yyyy-MM-ddThh:mm
格式 step
间隔秒数: 对于datetime-loca
l输入,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"
: 测试新的日期输入 是否返回到文本输入
`
- 如何判断 浏览器是否支持
- 约束模式
- 示例2: 浏览器兼容问题
- 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-id
input-list=datalist-id
- 嵌套关系: datalist>
<option> value
- 关联关系:
<form action="">
<label for="ticketnumber">票号:</label>
<input id="ticketnumber" type="number" list="defaultNumbers" />
<datalist id="defaultNumbers">
<option value="10001"></option>
<option value="10002"></option>
<option value="10003"></option>
<option value="10004"></option>
<option value="10005"></option>
</datalist>
<input type="submit" value="提交" />
</form>
-
示例6: 当输入有效值和无效值时,在后面显示 叉 ×和 对 √
-
html
<form action="">
<label for="balloons">气球的数量:</label>
<input type="number" id="balloons" placeholder="请输入10的倍数" step="10" min="0" max="100" required/>
<span class="validity"></span>
</br>
<input type="submit" value="提交" />
</form>
- css
<head>
<style>
#balloons{
width:120px;
}
input:invalid+.validity:after{
content:"×";
}
input:valid+.validity:after{
content:"√";
}
</style>
</head>
⑻ 不精确数值 (范围数值): type=“range”
- 输入不精确 范围数值:
<input type="range">
(美 /reɪndʒ/)- 类型
range
的元素 允许用户 指定一个数值,该数值 必须不小于给定值,且不大于 另一个给定值。 - 然而,是否是精确的数值 并不重要。
- 显示: 这通常使用滑块 或拨号控件表示,而不是像数字输入类型这样的文本输入框。
- 不需要精确值: 由于这种小部件不精确,除非控件的确切值 不重要,否则通常不应该使用它。
- 类型
- 降级为文本: 如果用户的浏览器 不支持类型
range
范围,它将后退 并将其视为文本输入。 - 搭配属性
- ① 最大值
max
: 最大允许值- 如果
max
属性的值 不是一个数字,那么元素就没有最大值。 - 此值必须大于或等于
min
属性的值。
- 如果
- ② 最小值
min
: 最小允许值- 如果为
min
指定的值不是一个有效的数字,则输入没有最小值。 - 此值必须小于或等于
max
属性的值。 - 默认 最小值和最大值: 默认情况下,最小值为
0
,最大值为100
。如果这不是您想要的,您可以通过更改min , max
属性的值 指定不同的边界。这些可以是任何浮点值。
- 如果为
- ③ 间隔值
step
: 步进间隔,用于用户界面和验证目的.step
属性 是一个数字,它指定 值必须遵循的粒度,或者特殊值any
,只有与步进基础相等的值 才是有效的.- 字符串值
any
表示 不指定 步进间隔. - 默认情况下,粒度为 step=“1”,间隔值默认是1,这意味着,默认情况下 输入框的有效值总是整数。
- 小数点后的位数: 可以更改
step
属性来控制粒度,通过控制间隔值的小数点位数,来控制有效值的小数点位数。例如,如果您需要一个介于5和10之间的值,精确到小数点后两位,应该将step
的值设置为0.01
- 如果想接受任何值,无论它扩展到 多少位小数,您可以为
step
属性指定任意值:step="any"
- ④ 所选值
value
:value
属性 包含一个字符串DOMString,它包含所选数字的字符串 表示形式。该值 从来不是空字符串""
。value
的默认值: ❶ 中间值 或者 ❷min
属性的值。位于指定的最小值和最大值之间——除非最大值实际上小于最小值,在这种情况下,默认值被设置为min
属性的值。- 值 和最大值,最小值的关系:
- 如果试图 将值设置为小于最小值,则将其 设置为最小值(最接近的合格值)。类似地,如果试图 将值设置得高于最大值,则会将其 设置为最大值(最接近的合格值)。
- 确定默认值的 算法为:
defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min : rangeElem.min + (rangeElem.max - rangeElem.min)/2;
- ① 最大值
- 知识拓展:三目运算符
- 三目运算符的语法为:
conditions ? statementA : statementB ;
- 如果满足条件
condition
,就执行语句statementA
,否则就执行语句statementB
。 - 注意:
statementA
和statementB
语句必须为单个语句,如果使用多个语句就会报错。
- 三目运算符的语法为:
- 数值
type="number"
和 范围数值type="range"
的区别- 精确值:
number
类型允许用户 输入一个带有可选约束的数字,强制其 值介于最小值和最大值之间,但它确实 要求用户输入一个特定的值。 - 非精确值:
range
输入类型 允许您在用户 甚至不关心或不知道所选择的特定数值 是什么的情况下,向用户询问值,比如调节音量时。 - 相同点:都是表示 数值。
- 精确值:
- 常用 不精确范围值输入的例子:
type="range"
- ① 音频控制,如音量和平衡,或过滤器控制。
- ② 颜色配置控件,如颜色通道、透明度、亮度等。
- ③ 游戏配置控件,如难度、可视距离、世界大小等。
- ④ 密码管理器生成的密码的 密码长度。
- 选择参考: 更注重百分比 而不是具体数值.
- 通常,如果用户 对最小值和最大值之间的 距离的百分比 比实际数字本身更感兴趣,那么 范围值输入是一个很好的选择。
- 例如,在家庭立体声音量控制的情况下,用户通常认为“将音量设置为最大值的一半”,而不是“将音量设置为0.5”。
- 验证
- ① 没有可用的
pattern
格式验证;然而,执行以下形式的自动验证: - ② 如果将值
value
设置为 无法转换为 有效浮点数的值,则验证将失败,因为是错误的输入。 - ③ 值不会小于最小值
min
,默认值为min="0"
。 - ④ 值不会大于最大值
max
。默认值是max="100"
。 - ⑤ 值时 间隔值
step
的倍数.默认是step="1"
.
- ① 没有可用的
- 浏览器支持
- 示例1: 用范围值 表示音量和铃声
<div>
<input type="range" id="volume" name="volume" min="0" max="11" />
<label for="volume">音量</label>
</div>
<div>
<input type="range" id="bell" name="bell" min="0" max="100" value="90" step="5" />
<label for="bell">铃声</label>
</div>
- 示例2: 让用户选择 任何 介于0到π之间的值, 小数部分 没有任何限制。
<input type="range" min="0" max="3.14" step="any">
- 示例3: 显示刻度线和标签
- 刻度线:通过
option-value
值属性 实现 - 标签:通过
option-label
标签描述 属性 实现
- 刻度线:通过
<p>显示刻度线和标签</p>
<input type="range" list="tickmarks" />
<datalist id="tickmarks">
<option value="0" label="0%"></option>
<option value="10"></option>
<option value="20"></option>
<option value="30"></option>
<option value="40"></option>
<option value="50" label="50%"></option>
<option value="60"></option>
<option value="70"></option>
<option value="80"></option>
<option value="90"></option>
<option value="100" label="100%"></option>
</datalist>
- 谷歌:
- 刻度线和标签的 浏览器支持
- 目前还没有浏览器完全支持这些特性。
- 例如,Firefox 根本不支持 刻度线和标签
- 而 Chrome 支持刻度线,但不支持标签描述。
- Chrome 的 66 版本(66.0.3359.181)支持标签描述,但是标签必须使用 CSS 样式,因为它的显示属性默认设置为 none,隐藏标签。
- 示例4: 让滑动块 从默认的水平的 变成垂直的
- 通过 css 代码实现:
transform-origin: 75px 75px;
transform: rotate(-90deg);
旋转方法,逆向90度。
- html
<div class="sliderWrapper">
<input type="range" list="tickmarks" class="rotate-input" min="0" max="100" value="20" />
</div>
<datalist id="tickmarks">
<option value="0" label="0%"></option>
<option value="10" label="10%"></option>
<option value="20" label="20%"></option>
<option value="30" label="30%"></option>
<option value="40" label="40%"></option>
<option value="50" label="50%"></option>
<option value="60" label="60%"></option>
<option value="70" label="70%"></option>
<option value="80" label="80%"></option>
<option value="90" label="90%"></option>
<option value="100" label="100%"></option>
</datalist>
- css
/*翻转范围值的滑动块 变成垂直的*/
.sliderWrapper {
/*设置宽高 为翻转后的滑动块 预留空间*/
width: 20px;
height: 150px;
}
.rotate-input {
width: 150px;
height: 20px;
transform-origin: 75px 75px;
transform: rotate(-90deg);
}
- 输出: 逆时针90度旋转,最大值在顶部,最小值在底部
⑼ 搜索文本框: type=“search”
- 搜索文本框:
<input type="search">
- 用途: 类型是 搜索
search
的元素是 为用户输入 搜索查询 而设计的文本字段。 - 可能的特别样式: 这些输入 在功能上与文本输入相同,但是用户代理(浏览器) 可能对其进行不同的样式设置。
- 用途: 类型是 搜索
- 浏览器支持
- 搭配属性
- ① 搜索文本框的值
value
:value
属性包含一个DOMString
,表示 搜索字段中 包含的值。JavaScript中 可以使用HTMLInputElement.value
检索值。- 如果输入没有验证约束,则值 可以是 任何文本字符串 或 空字符串
(“”)
。
- 如果输入没有验证约束,则值 可以是 任何文本字符串 或 空字符串
- ② 最大长度 字符数
maxlength
: 输入应接受的最大字符数 - ③ 最小长度 字符数
minlength
: 输入长度的最小字符数 可以并且仍然被认为是有效的 - ④ 正则表达式
pattern
: 输入的内容 必须匹配正则表达式 才能有效- 提示文本: 使用
title
属性 指定大多数浏览器将显示为 工具提示的文本,以解释 匹配模式的需求。还应该包括 附近的其他解释性文本。
- 提示文本: 使用
- ⑤ 占位符
placeholder
: 当输入字段为空时,要在该字段中显示的示例值 - ⑥ 只读
readonly
: 指示输入内容 是否为只读的 布尔属性 - ⑦ 字符宽度(可见字符数)
size
: 一个数字,指示输入字段应该有多少个字符宽 - ⑧ 拼写检查
spellcheck
: 控制 是否为输入字段 启用拼写检查,或是否 应使用默认拼写检查配置 - ⑨ 名称
name
: 必须给输入字段 设置一个名称,否则什么也不会提交。- 提交时,发送到服务器的数据 名称/值对
name/value
- 提交时,发送到服务器的数据 名称/值对
- ⑩ 必填 不能为空:
required
属性
- ① 搜索文本框的值
- 示例1: 使用搜索文本框
<!-- 搜索文本框 -->
<label for="site-search">搜索网站:</label>
<input type="search" id="site-search" />
<input type="submit" value="提交" />
- 示例2: 文本框 和搜索文本框的区别
<!-- 搜索文本框 -->
<label for="site-search">搜索网站:</label>
<input type="search" id="site-search" />
<button>搜索</button>
-
主要的基本区别在于: 浏览器处理它们的方式。
-
① 交叉图标和删除: 首先要注意的是,一些浏览器 显示了一个交叉图标,如果需要,可以单击该图标 立即删除搜索项。而普通的文本框,没有这个快捷删除.
- 搜索文本框:
- 普通文本框:
- 搜索文本框:
-
② 自动存储 搜索关键词: 自动完成选项
- 现代浏览器还倾向于自动存储 以前跨域输入的搜索项,当后续搜索 在该域中的搜索输入中 执行时,这些搜索项 将作为自动完成选项 出现。这将帮助 那些倾向于长期对相同或相似的搜索查询 进行搜索的用户。
- 自动完成选项:
- 示例3: 设置占位符
<input type="search" id="site-search" placeholder="请输入网站名" />
- 示例4: 搜索文本框的可访问性
- 常见的设计: 不为搜索字段提供标签(尽管可能有一个放大镜图标或类似的东西
- 导致的 可访问性问题: 没有标签→没有文字,屏幕阅读器读不出来,盲人不知道 这个字段是干嘛用的.
- 解决办法: 不影响视觉设计的方法: 使用 WAI-ARIA(无障碍的网页应用技术)特性:
- 声明表单功能: 使屏幕阅读器时,如何 声明该表单 是搜索表单?
- 使用 aria-label 属性,添加标签描述。
- 属性值,应该是一个描述性的内容,将由屏幕阅读器读出。
- 是用不可视的方式,给元素加 标签 label(如果被描述元素,存在真实的描述元素,可使用
aria-labelledby
属性作为来 绑定描述元素和被描述元素来代替)。 aria-label
属性可以用在 任何典型的 HTML 元素中,并不需要配合特定的ARIA role才能使用。
- 这个属性会为元素添加一个标签 = 不可见的
<label>
标签元素 - 显示: 没有视觉上的区别,但是屏幕阅读器用户(盲人,视力障碍者) 可以获得更多的信息。
- 使用 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
: 输入字段的宽度,即能显示在屏幕上的字符数- 物理大小: 控制 输入框的 物理大小
- 显示的字符数: 指定输入框 一次可以显示的字符数,所以,单位是字符,属性值,必须是整数值。
- ⑧ 不能为空,必填项
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
文本输入。
- 输入和编辑 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
的值。 - 长度和验证: 如果字段的 文本值的长度 大于
maxlength
UTF-16代码单元的长度,则输入会无法通过约束验证 。只有当 用户更改值时 才会应用约束验证。
- ② 最小字符数:
minlength
输入长度的最小字符数 并被认为是有效的- 用户可以输入电子邮件的最小字符数(作为UTF-16代码单元)。
- 非负整数值: 这必须是 一个小于或等于
maxlength
指定的值的 非负整数值。 - 有效: 如果没有指定
minlength
,或者指定了无效值,则电子邮件输入没有最小长度。 - 长度和验证: 如果输入的文本长度小于
minlength
UTF-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
- 版权声明:本文为博主原创文章,转载请附上博文链接!