前端工程师-设计开发HTML5表单新功能解析

1、Web世界里这簇美艳的花朵一-HTML 5.毋庸宜疑是新趋势的技术，木文我将详细介绍一下HTML 5中对表 魏功能的更新.。AD：时光车轮滚滾礙來,前輸之路永无止歡对于这个前蜩这门将一多些的技术，任何一次技术苯新，我们都必须第一时fHJi-T解它学 习它，比如b世界里这续美艳的花朵HTML 5.虽然HTML 5发布之初,许多人（包插我都觉得普及它还很遥远，但自发布以来, 许多企业级对它的尝试应用（比l<!doctype htnil应用，比如canvas的应用），使HTXL 5的边岀了一人步，随Z而來IE9的发布, 无疑又让我们看到了 HTML 5离我们不再遥远.学习HTML 5半年冇余了

2、，虽然对它的离线存储以及canvas零革新件技术还是一知半解,但我还足希里我现在所学到的能帮助更多的帕蜩人学习这门毋庸置疑足新趋势的技术木文我将详细介绍一卞HTXL 5中对表单功能的更新一一. 表单结构更自由XHTML中孟要放在fonn之中的诸如inpu/button/select/textarea等标签尤索，在HTML 5中完全可以放在页面任何位匙，然后通 过新增的form属性指向元素所属表单的ID值，即可关联起来.比如：1. <form id=,iform*>2. <input tv*pe=,ext,*>3 4. </£orm>5. <i

3、nput alue=w我在工d 为 ifonr.的茨单外” fcrm=nfooM>二、多样的输入类型（大部分新类型目笳井不为所¥j标准浏览器支持,请鑫见样例演示中的提示）的“1输入类型1. <input tv*pe=，emailw name=Meir.ailw>此类型要求输入恪式正确的email地址，否则浏览器是不允许提交的，并会有一个错沒信息提示此类型Opera中必须揣定name 値,否則无效果.输入类型1. <input tv-pe=MurlM>卜.面代码展示的文本域要求输入格式正确的URL地址,Opera中会门动在开始处添加.日期时何相关输入类型（

4、这些个很牛X的 这一系列是很酷的-个类型，完全解决了烦琐的JS曰历控件问题.但目前XS只有Opera/Chrome新版本支持，且展示效果也不一 样.number输入类型1. <input匸e”>2 . <input t >*pe=nciir.e,>3. <input 17*pe=Mmonthw>4 . <input t v*pe=,week'*>这个不用多解禅了，要求输入一个数字字符，若未输入则会抛出一个错谋.ran耽输入类型1. <input t=Mnturber°>此类型将显示一个町拖动的滑块条,井可通过设

5、定max/min/step值限定搭动X I乩拖动时会反馈给value 一个值.search输入类型1. <input 17tpe=,*search,>此类型茨示输入的将足一个搜左关键字，通过results”町显示一个捜穽小图标.tel输入类型1. <input 1此类型要求输入一个，但实际上它井没冇特殊的验证，与text类型没什么区别.color输入类型1. <input 匸ype="uolor'>此类型茨单，对让用户通过颜色选择器选择一个顏色值，井反饮到value中.三、新增的表单属性placeholder 属性1. <input tv*

6、pe=,exf, plaumho二dez:=”,点泊村戈会以蛊除>这足一个很实用的属性，免左了用JS去实现点击淸除茨单初始值.浏览器支持也还不错,MS除了 Firefox,其他标准浏览器都能很 好的支持.require pattern 朋性<input 匸ypw="二"匸” name=°requireu required=MH>2 . <input 匸ypm="二匸” nanie=nrequirelu requLred=°required,>3. <input tv-pe=,extr, name=,rrequ

7、ire2n pattern=MX 1-9 dS$M>茨单验证require类型时，若输入值为空，则拒绝提交，并会有一个捉示上面两种写法都对，这个很有用并且町以用干 textarea以及hidden/image/submit类型.pattern类型为正則骏证，町以完成备种复杂的脸证.这两种类型在Opera中必须描定 name值,否則无效果.autofocus 属性1. <input type=,extr, aucofocus=Mruew>默认聚佐属性，町在页面加载时聚條到一个表单控件,类似干JS的focus0list属性1. <input t%-pe=McextM list=HilistM>二.id=Milisf>3.Voption label=,aM xalue=Haw>4 .</optionXoption label=Mb" value=Mbw>5. </optionXoption label=Hcu value=,'cw>6. </optionX/datalist>该属性需要冒datalist属性共用fatalist足对选择框的记忆，而list属性町以为选择框自定义记忆的内客.max/min/step 属性1. <input tv-pe=Mrange