input html5 新特性,html5 input 新特性

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

介绍这些新的输入类型：

email

url

number

range

Date pickers (date, month, week, time, datetime, datetime-local)

search

color

telephone

color

1:email

在提交表单时会自动验证email的格式

效果：

2：url

在提交表单时会自动验证url的格式

效果：

3：number

可以限制输入的数字，step为上一个数字与下一个数字的间隔

效果：

4：range

滑动条，能过选择性的对限制范围内的数值进行设置

效果：

5：Date Pickers(数据检出器)

HTML5 拥有多个可供选取日期和时间的新输入类型：

date - 选取日、月、年

month - 选取月、年

week - 选取周和年

time - 选取时间(小时和分钟)

datetime - 选取时间、日、月、年(UTC 时间)

datetime-local - 选取时间、日、月、年(本地时间)

This is how Opera renders :

If you need a time to go with that date, Opera also supports :

If you only need a month + year (perhaps a credit card expiration date), Opera can render a :

Less common, but also available, is the ability to pick a specific week of a year with :

Last but not least, you can pick a time with :

其中图片中显示的UTC为世界统一时间

6:search

这里的datalist相当于下拉列表，可以进行选择

效果：

7:telephone

可输入一个电话号码

效果：

8:color

可以获取颜色

效果：

input标签表单类型的显示情况：