全新的input控件类型

在HTML5中，增加了一些新的input控件类型，通过这些新的控件，可以丰富表单功能，更好的实现表单的控制和验证，下面将详细讲解这些新的input控件类型。

1.email类型< input type="email" />

email类型的input控件是一种专门用于输入E-mail地址的文本输入框，用来验证email输入框的内容是否符合Email邮件地址格式；如果不符合，将提示相应的错误信息。

2.url类型< input type="url" />

url类型的input控件是一种用于输入URL地址的文本框。如果所输入的内容是URL地址格式的文本，则会提交数据到服务器；如果输入的值不符合URL地址格式，则不允许提交，并且会有提示信息。

3.tel类型< input type="tel" />

tel类型用于提供输入电话号码的文本框，由于电话号码的格式千差万别，很难实现一个通用的格式。因此tel类型通常会和pattern属性配合使用，关于pattern属性将在7.5.4小节中进行讲解。

4.search 类型< input type="search" />

search 类型是一种专门用于输入搜索关键词的文本框，它能自动记录一些字符，例如站点搜索或者Google搜索。在用户输入内容后，其右侧会附带一个删除图标，单击这个图标按钮可以快速清除内容。

5.color类型< input type="color" />

color类型用于提供设置颜色的文本框，用于实现一个RGB颜色输入。其基本形式是#RRGGBB，默认值为#000000，通过value属性值可以更改默认颜色。单击color类型文本框，可以快速打开拾色器面板，方便用户可视化选取一种颜色。

注意：

需要注意的是，不同的浏览器对url类型的输入框的要求有所不同，在多数浏览器中，要求用户必须输入完整的URL地址，并且允许地址前有空格的存在。例如，输入“https://www.baidu.com/”。

6.number类型< input type="number" />

number类型的input控件用于提供输入数值的文本框。在提交表单时，会自动检查该输入框中的内容是否为数字。如果输入的内容不是数字或者数字不在限定范围内，则会出现错误提示。

number类型的输入框可以对输入的数字进行限制，规定允许的最大值和最小值、合法的数字间隔或默认值等。具体属性说明如下：

● value：指定输入框的默认值。

● max：指定输入框可以接受的最大的输入值。

● min：指定输入框可以接受的最小的输入值。

● step：输入域合法的间隔，如果不设置，默认值是1。

7.range类型< input type="range" />

range类型的input控件用于提供一定范围内数值的输入范围，在网页中显示为滑动条。它的常用属性与number类型一样，通过min属性和max属性，可以设置最小值与最大值，通过step属性指定每次滑动的步幅。

8. Date pickers类型<input type= date, month, week…" />

Date pickers类型是指时间日期类型，HTML5中提供了多个可供选取日期和时间的输入类型，用于验证输入的日期，具体如表1所示。

表1 时间和日期类型

在表1中，UTC是Universal Time Coordinated的英文缩写，即“协调世界时”，又称世界标准时间。简单地说，UTC时间就是0时区的时间。例如，如果北京时间为早上8点，则UTC时间为0点，即UTC和北京的时差为8。

注意：

对于浏览器不支持的input控件输入类型，将会在网页中显示为一个普通输入框。