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

HTML5拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。本文将介绍HTML5新的Input类型。AD：HTML5拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。介绍这些新的输入类型：emailurlnumberrangeDatepickers(date,month,week,time,datetime,datetime-local)searchcolortelephonecolorEMAIL1.inputtype=email/在提交表单时会自动验证email的格式效果：URL1.inputtype=url/在提交表单时会自动验证url的格式效果：NUMBER1.inputtype=numbermax=9min=0step=2/可以限制输入的数字，step为上一个数字与下一个数字的间隔效果：RANGE1.inputtype=rangemin=1max=10/滑动条，能过选择性的对限制范围内的数值进行设置效果：DatePickers(数据检出器)HTML5拥有多个可供选取日期和时间的新输入类型：date-选取日、月、年month-选取月、年week-选取周和年time-选取时间(小时和分钟)datetime-选取时间、日、月、年(UTC时间)datetime-local-选取时间、日、月、年(本地时间)ThisishowOperarendersinputtype=date:Ifyouneedatimetogowiththatdate,Operaalsosupportsinputtype=datetime:Ifyouonlyneedamonth+year(perhapsacreditcardexpirationdate),Operacanrenderainputtype=month:Lesscommon,butalsoavailable,istheabilitytopickaspecificweekofayearwithinputtype=week:Lastbutnotleast,youcanpickatimewithinputtype=time:地址：，自己做的是这样的其中图片中显示的UTC为世界统一时间SEARCH1.inputid=searchtype=urllist=searchlistrequired/2.datalistid=searchlist3.optionvalue==Google/4.optionvalue==Yahoo/5.optionvalue==Bing/6./datalist这里的datalist相当于下拉列表，可以进行选择效果：TELEPHONE1.inputtype=telephone/可输入一个电话号码效果：COLOR1.inputtype=color/可以获取颜色效果：以上个人图片效果显示均来自opera浏览器下面图片时各主流浏览器对input的支持情况：input标签表单类型的显示情况：