HTML5 输入类型
HTML5 拥有多个新的表单输入类型，这些新特性提供了更好的输入控制和验证。
本章全面介绍这些新的输入类型：
| Input 类型 | Input 描述 | 支持的浏览器 |
|---|---|---|
color |
颜色选择器，允许用户选择颜色。 | Chrome, Firefox, Edge, Opera, Safari 14.1+ |
date |
日期选择器，允许用户选择日期。 | Chrome, Firefox, Edge, Opera, Safari 14.1+ |
datetime |
日期和时间选择器（已弃用，推荐使用 datetime-local）。 |
已弃用，不推荐使用 |
datetime-local |
本地日期和时间选择器，允许用户选择日期和时间。 | Chrome, Firefox, Edge, Opera, Safari 14.1+ |
email |
电子邮件输入框，自动验证输入的电子邮件格式。 | 所有主流浏览器 |
month |
月份选择器，允许用户选择年份和月份。 | Chrome, Firefox, Edge, Opera, Safari 14.1+ |
number |
数字输入框，允许用户输入数字。 | 所有主流浏览器 |
range |
范围滑块，允许用户选择一个范围内的值。 | 所有主流浏览器 |
search |
搜索输入框，通常用于搜索功能。 | 所有主流浏览器 |
tel |
电话号码输入框，用于输入电话号码。 | 所有主流浏览器 |
time |
时间选择器，允许用户选择时间。 | Chrome, Firefox, Edge, Opera, Safari 14.1+ |
url |
URL 输入框，自动验证输入的 URL 格式。 | 所有主流浏览器 |
week |
周选择器，允许用户选择年份和周数。 | Chrome, Firefox, Edge, Opera, Safari 14.1+ |
注意：并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。
Input 类型: color
color 类型用在input字段主要用于选取颜色，如下所示：
选择你喜欢的颜色：<input type="color" name="favcolor">Input 类型: date
date 类型允许你从一个日期选择器中选择一个日期，如下所示：
生日：<input type="date" name="bday">Input 类型: datetime-local
datetime-local 类型允许你选择一个日期和时间 (无时区)，如下所示：
生日 (日期和时间)：<input type="datetime-local" name="bdaytime">Input 类型: email
email 类型用于应该包含 e-mail 地址的输入域，如下所示：
E-mail：<input type="email" name="email">提示: iPhone 中的 Safari 浏览器支持 email 输入类型，并通过改变触摸屏键盘来配合它（添加 @ 和 .com 选项）。
Input 类型: month
month 类型允许你选择一个月份，如下所示：
生日 (月和年)：<input type="month" name="bdaymonth">Input 类型: number
number 类型用于应该包含数值的输入域，还能对输入的数字做限定，如下所示：
数量 ( 1 到 5 之间 )：<input type="number" name="quantity" min="1" max="5">Input 类型: range
range 类型用于包含一定范围内数字值的输入域，显示为滑动条，如下所示：
定义一个不需要非常精确的数值（类似于滑块控制）：<input type="range" name="points" min="1" max="10">请使用下面的属性来规定对数字类型的限定：
- max - 规定允许的最大值
- min - 规定允许的最小值
- step - 规定合法的数字间隔
- value - 规定默认值
Input 类型: search
search 类型用于搜索域，比如站点搜索或 Google 搜索，如下所示：
Search Google：<input type="search" name="googlesearch">Input 类型: tel
tel 类型用于输入电话号码字段，如下所示：
电话号码：<input type="tel" name="usrtel">Input 类型: time
time 类型允许你选择一个时间，如下所示：
选择时间：<input type="time" name="usr_time">Input 类型: url
url 类型用于应该包含 URL 地址的输入域，在提交表单时，会自动验证 url 域的值，如下所示：
添加您的主页：<input type="url" name="homepage">提示: iPhone 中的 Safari 浏览器支持 url 输入类型，并通过改变触摸屏键盘来配合它（添加 .com 选项）。
Input 类型: week
week 类型允许你选择周和年，如下所示：
选择周：<input type="week" name="week_year">
评论区 0
发表评论
教程介绍
HTML5 是 HTML 的修订标准，2014年由万维网联盟（W3C）完成标准制定。
60
章节
121
阅读
0
评论