HTML5新的Input类型
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
成都创新互联长期为1000多家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为朔城企业提供专业的成都网站建设、网站制作，朔城网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。
介绍这些新的输入类型：
- email
- url
- number
- range
- Date pickers (date, month, week, time, datetime, datetime-local)
- search
- color
- telephone
- color
EMAIL
-
在提交表单时会自动验证email的格式
效果：
URL
-
在提交表单时会自动验证url的格式
效果：
NUMBER
-
可以限制输入的数字，step为上一个数字与下一个数字的间隔
效果：
RANGE
-
滑动条，能过选择性的对限制范围内的数值进行设置
效果：
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 :
地址：http://diveintohtml5.org/forms.html
以上都是从关于时间的都是网上找到，自己做的是这样的
其中图片中显示的UTC为世界统一时间
SEARCH
-
-
-
-
-
-
这里的datalist相当于下拉列表，可以进行选择
效果：
TELEPHONE
-
可输入一个电话号码
效果：
COLOR
-
可以获取颜色
效果：
以上个人图片效果显示均来自opera浏览器
下面图片时各主流浏览器对input的支持情况：
input标签表单类型的显示情况：
【编辑推荐】
- 12个精妙有趣的HTML 5应用
- 20个HTML 5和CSS3的免费网站模板与教程
- 10个国外开发的HTML 5精彩应用
- 初学者必知的HTML 5入门级技巧
新闻标题：HTML5新的Input类型
URL地址：
http://cdbrznjsb.com/article/dpcshie.html
