HTML5 表单

HTML5 表单
为体验而生
BY 神飞
前端观察
http://www.qianduan.net

HTML 3.2的表单

HTML 4表单
新增Button元素
增加label元素
增加filedset和legend元素
新增optgroup元素
增加accesskey属性
增加disable属性
增加readonly属性
Input增加accept属性[type=file] （目前opera和firefox均不支持)

HTML 5表单的表现：opera和opera mobile

HTML 5表单的表现：webkit

HTML 5表单：input:url
<input id="inputUrl" type="url" value=""

HTML 5表单：input:email
<input id="inputEmail" type="email" value=""

HTML 5表单：input:search
<input id="inputSearch" type="search" value=""

HTML 5表单：input:tel
<input id="inputTel" type="tel" value=""

HTML 5表单：input:number
<input id="inputNum" type="number" value=""

HTML 5表单：input:range
<input id= " inputRange“ type="range" value=""

HTML 5表单：input:max,min和step
<input id="inputNumber" type="number" value=""
<div>
<label for="inputNumber">number step</label>
<input id="inputNumber" type="number" step="5" max="100" name="number" />
</div>
<div>
<label for="inputRange">range</label>
<input id="inputRange" type="range" name="range" max="100" min="0" step="10" />
</div>

HTML 5表单：时间
<input id="inputDate" type="date" value=""

HTML 5表单：input:datelist
<input type=“text" name="datelist" list="dataList" />
<datalistid="dataList">
<option value=“BMW">
<option value=“Ford">
<option value=“Volvo">
<option value=“…">
</datalist>
结构类似select

HTML 5 表单：placeorder
<input type="text" id="s" name="s" onfocus="if (this.value == '请输入关键词...') {this.value = '';}" onblur="if (this.value == '') {this.value = '请输入关键词...';}" value="请输入关键词..." class="inputBox">
HTML 5 code：
<input type=“text" value="" name="" placeholder="请输入关键词..." />
设置placeholder的时候，value值必须为空

HTML 5 表单：autofocus
HTML 5 code：
<input type=“text" value="" autofocus />
可以用于input、textarea、button和select等元素

HTML 5 表单：正则
<input type=“text“ pattern=“d*”/>
<input type=“text“ pattern=“d{4}”/>

HTML 5 表单：验证
<input type=“text“ required/>

HTML 5表单的浏览器兼容性：type
注：Firefox 4.0以下的完全不支持 Firefox 4.0即将支持url、Email、number、color等
数据整理自：http://www.findmebyip.com/litmus#html5-forms-inputs

HTML 5表单的浏览器兼容性：属性
注：Firefox 4.0以下的只支持multiple熟悉(其实这个不是HTML 5中的) Firefox 4.0即将支持autocompleta、required和pattern等
数据整理自：http://www.findmebyip.com/litmus#html5-forms-attributes

HTML 5表单：分裂的UI
Chrome
Opera

HTML 5表单：appearance
http://www.w3.org/TR/css3-ui/#appearance
http://davidwalsh.name/webkit-appearance
https://developer.mozilla.org/en/CSS/-moz-appearance

参考
http://www.w3.org/TR/WD-html40-970708/interact/forms.html
http://www.w3.org/TR/REC-html32
http://www.w3.org/TR/html5/forms.html
http://diveintohtml5.org/forms.html
http://www.opera.com/docs/specs/presto25/forms/

http://www.qianduan.net	4968
http://www.webjx.com	409
http://www.jshtmlcss.com	255
http://www.bobd.cn	95
http://www.blue1000.com	60
http://www.kuqin.com	54
http://www.missyuan.com	30
http://www.80ok.net	29
http://www.examw.com	29
http://blog.she.com	25
http://www.lanrenzz.com	23
http://opener.asia	19
http://www.chengxuyuans.com	16
http://static.slidesharecdn.com	13
http://ce.sysu.edu.cn	11
http://www.onlyfed.com	11
http://feeds2.feedburner.com	10
http://cache.baidu.com	9
http://www.kojog.com	8
http://127.0.0.1	8
http://www.qytop.com	7
http://www.cnwebshow.com	7
http://www.20ju.com	7
http://www.jsjgz.cn	7
http://xianguo.com	7
http://reader.youdao.com	6
http://zhangxl.caicai.us	6
http://www.slideshare.net	5
http://www.itfeed.cn	5
http://renren.it	5
http://www.zhuaxia.com	4
http://www.key8.com	4
http://www.aipinbo.com	3
http://wap.qianduan.net	3
http://info.163ns.com	3
http://blog.udn.com	3
http://www.wljsxx.com	3
http://blogcity.me	3
http://qmecms.sinaapp.com	2
http://translate.googleusercontent.com	2
http://www.ppxue.com	2
http://17003006.blog.hexun.com	2
http://www.wd51.com	2
http://www.xhccl.cn	2
http://www.yindaoxian.com	2
http://121.22.112.210	1
http://designcss.org	1
http://new.xianguo.com	1
http://www.wpbars.com	1
http://www.wpbars.com	1
http://www.designcss.org	1

HTML5 表单

by shenfei lee on Aug 07, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

63 Embeds 6,202

Statistics

HTML5 表单 — Presentation Transcript