HTML标签解析(二) input标签的HTML5新类型

在上一篇博文中，我们初步了解到了input标签一些基础的类型和属性，而在 HTML5中，input标签又增加了许多 新的类型和属性，那么今天就让我们来了解下吧。

一：类型

各种类型的默认显示在不同的浏览器有不同的表现，本次演示均以Chrome浏览器为准。

color拾色器

			<input type="color"/>

将输入类型设定为颜色，在页面上生成一个拾色器，带有RGB，HEX，HSL三种颜色进制供选择，但无论使用哪种进制进行选择，在表单进行提交后，获得的value值都会变成HEX，即十六进制值。同时我们可以在编写代码时提前将value设置一个十六进制的颜色值，来改变浏览器显示的预览颜色。

			<input type="color" value="#808080"/>

日期选择器

1. date年月日选择器

			<input type="date" />

将输入类型设定为date日期，在页面中生成一个可供选择的日历，显示格式为“yyyy–MM–dd”，即年四位显示，月、日两位显示，设定value预设值和提交后获得的数据也是同样的显示格式。

	<input type="date"  value="2021-09-09"/>

2.datetime UTC时间选择器

			<input type="datetime"/>

将输入类型设定为获取UTC时间（格林威治时间）的年、月、日、小时、分，但是大部分浏览器都不兼容，进而直接显示为text文本输入框。

3.datetime-local 本地时间选择器

			<input type="datetime-local"/>

将输入类型设定为获取本地时区的年、月、日、小时、分，但目前似乎只有chrome内核的浏览器支持改类型，如chrome谷歌浏览器，Edge浏览器，新版Opera浏览器。

4. month 日期选择器 年-月

			<input type="month"/>

将输入类型设定为获取年月。

5. week 日期选择器 年-周

			<input type="week"/>

将输入类型设定为获取年份，和日期所在的周数，即此年份的第多少周。

6. time 日期选择期 时-分

			<input type="time"/>

将输入类型定义为获取小时和分钟。

email 定义邮件输入

		<input type="email" name="email"/>

将输入类型定义为邮件输入，表现为自带一定的识别力度，能简单检测用户的输入数据是否规范。（不同浏览器识别力度不同）

number 定义带有spinner控件数字字段

			<input type="email" name="num"/>

将输入类型定义为带有spinner控件的数字字段，限制用户的输入数据类型只能为数字。而什么是spinner控件？简单来说就是为用户提供了可以选择数字的上下箭头，同时可以通过一些属性来对选择进行约束，这个我们下次再来说。

url 定义网址输入

			Homepage: <input type="url" name="user_url" />

将输入类型定义为网址输入，表现和email类型相同，自带一定的识别力度，检测用户输入的网址是否正确完整。

search 定义搜索字段

			<input type="search" name="search" />

将输入类型定义为搜索字段，可用于站内搜索或百度，谷歌等搜索。但是百表现外观与普通的文本输入框无异，在chrome浏览器的表现不同点为多了一个清空按钮。

tel 定义号码字段

将输入字段定义为电话号码输入。表现和search相同，外观和文本输入框无异，也没有识别力度。

range 滑块进度条

		<input type="range" name="number_range"/>

将输入类型定义为滑块进度条，用于获得规定范围内的数字。因此必须通过min最小值。max最大值，value初始值这三个属性来进行初步的规范。除了这三个属性外，还可以使用step属性来规定数字之间的间隔。

<input type="range" name="number_range" min="1" max="10" value="0"/>

至此，input标签的html5新类型都已介绍完毕。虽然距html5的标准发布已经发布了很多年，但实际上大部分浏览器都还未全部支持。所以最好适情况而使用。
上期链接：HTML标签解析(一) input

这里是万物之恋，我们下次再见了！