前端工程师-设计开发html5新的input类型解释

《前端工程师-设计开发html5新的input类型解释》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、HTML5拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。本文将介绍HTML5新的Input类型。AD：HTML5拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。介绍这些新的输入类型：·email·url·number·range·Datepickers(date,month,week,time,datetime,datetime-local)·search·color·telephone·colorEMAIL1. 在提交表单时会自动验证email的格式效果：URL1.

2、 在提交表单时会自动验证url的格式效果：NUMBER1. 可以限制输入的数字，step为上一个数字与下一个数字的间隔效果：RANGE1. 滑动条，能过选择性的对限制范围内的数值进行设置效果：DatePickers(数据检出器)HTML5拥有多个可供选取日期和时间的新输入类型：·date-选取日、月、年·month-选取月、年·week-选取周和年·time-选取时间(小时和分钟)·datetime-选取时间、日

3、、月、年(UTC时间)·datetime-local-选取时间、日、月、年(本地时间)ThisishowOperarenders: Ifyouneedatimetogowiththatdate,Operaalsosupports: Ifyouonlyneedamonth+year(perhapsacreditcardexpirationdate),Operacanrendera: Lesscommon,butalsoavailable,istheabilitytopi

4、ckaspecificweekofayearwith: Lastbutnotleast,youcanpickatimewith:地址：http://diveintohtml5.org/forms.html以上都是从关于时间的都是网上找到，自己做的是这样的其中图片中显示的UTC为世界统一时间SEARCH1. 2. 3.               

5、  4.                 5.                 6. 这里的datalist相当于下拉列表，可以进行选择效果：TELEPHONE1. 可输入一个电话号码效果：COLO

6、R1. 可以获取颜色效果：以上个人图片效果显示均来自opera浏览器下面图片时各主流浏览器对input的支持情况：input标签表单类型的显示情况：