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标签表单类型的显示情况：
 

【编辑推荐】

1. 12个精妙有趣的HTML 5应用
2. 20个HTML 5和CSS3的免费网站模板与教程
3. 10个国外开发的HTML 5精彩应用
4. 初学者必知的HTML 5入门级技巧

文章题目：HTML5新的Input类型
网页URL：http://www.shufengxianlan.com/qtweb/news32/483182.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联