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

《前端工程师-设计开发HTML5新的Input类型解释.pdf》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯精品资料推荐⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯HTML5拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。本文将介绍HTML5新的Input类型。AD：HTML5拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。介绍这些新的输入类型：?email?url?number?range?Datepickers(date,month,week,time,datetime,datetime-local)?search?color?telephone?colorEMAIL1.

2、type="email"/>在提交表单时会自动验证email的格式效果：URL1.在提交表单时会自动验证url的格式效果：NUMBER1⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯精品资料推荐⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯1.可以限制输入的数字，step为上一个数字与下一个数字的间隔效果：RANGE1.滑动条，能过选择性的对限制范围内的数值进行设置效果：

3、DatePickers(数据检出器)HTML5拥有多个可供选取日期和时间的新输入类型：?date-选取日、月、年?month-选取月、年?week-选取周和年?time-选取时间(小时和分钟)?datetime-选取时间、日、月、年(UTC时间)?datetime-local-选取时间、日、月、年(本地时间)ThisishowOperarenders:2⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯精品资料推荐⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯Ifyouneedatimetogowiththatdate,Oper

4、aalsosupports:Ifyouonlyneedamonth+year(perhapsacreditcardexpirationdate),Operacanrendera:Lesscommon,butalsoavailable,istheabilitytopickaspecificweekofayearwith:3⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯精品资料推荐⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯Lastbutnotl

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

6、ue="http://www.yahoo.com"label="Yahoo"/>5.6.这里的datalist相当于下拉列表，可以进行选择效果：4⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯精品资料推荐⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯TELEPHONE1.可输入一个电话号码效果：COLOR1.可以获取颜色效果：以上个人图片效果显示均来自ope

7、ra浏览器下面图片时各主流浏览器对input的支持情况：5⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯精品资料推荐⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯input标签表单类型的显示情况：6