1. HTML5 Web Forms
By:灵玉
2011-07-04

2. Local Storage audio forms
canvas video
communication
WebSockets
Session Storage GeoLocation
Workers IndexDB Database
WebSQL Database
Offline Applications
Query Selector
Post Message
Touch
Hash Change (Event)
History Management
Drag and Drop SVG

3. HTML5 Web Forms
html5forms 优势
1、简洁、易用、灵活、属性语义清晰
2、自定义校验规则，优雅降级
3、内置控件、内置校验类型、属性
4、省去编程代码
5、无视 javascript禁用
html5forms 不足
1、浏览器兼容
2、UI丑陋
3、bug较多

4. HTML5 Web Forms
required and pattern Attributes
Firefox
Opera
Chrome

5. HTML5 Web Forms
min and max Attributes，number Type
Opera
Chrome

6. HTML5 Web Forms
Autofocus Attribute
Placeholder Attribute
Email Type
URL Type

7. HTML5 Web Forms
range Input Type and output Tag

8. HTML5 Web Forms
datetime, datetime-local, date, week and week Types

9. HTML5 Web Forms
http://tinyliu.info/2011/02/html5‐test/

10. HTML5 Form UI Bug
1、提示气泡文本空白
2、WindowResize时气泡位置错误
3、Opera气泡提示溢出浏览器
4、UIbug举不胜举
https://bugzilla.mozilla.org/show_bug.cgi?id=558593

11. HTML5 Form Controls UI ?
1、气泡提示方式？遮挡下面表单
解决方案：增加间距？
2、焦点移出，气泡消失
交互可取
3、提交表单提示一个错误？用户希望一次性更改所有错误
解决方案： 提交表单所有控件错误标红，提示首个错误
4、2秒提示消失？ 用户读不完错误，还需要知道错误信息
解决方案：如果错误获取焦点再提示错误信息？文字在后面标注？
5、UI视觉丑陋，浏览器差异大？
解决方案： javascript 统一UI
http://a.tbcdn.cn/app/dp/insure/car/demo/html5form.html

12. 为了技术而实现技术 ？

13. 车险 Html5 Web Forms

14. 车险 Html5 Web Forms
http://a.tbcdn.cn/app/dp/insure/car/demo/html5form‐base.html

15. 车险 Html5 Web Forms
http://a.tbcdn.cn/app/dp/insure/car/demo/html5form‐base.html

16. Modernizr
Modernizr为HTML5而生
——它是一个检测浏览器对HTML5和CSS3特性支持的JS库，著名的HTML5/CSS3浏
览器兼容性网站FindmeByIP就是基于该框架实现的。
http://www.modernizr.com/
https://github.com/Modernizr/Modernizr

17. Modernizr
Detects css3
.yourclass {
//declarations goes here
}
.no-textshadow .yourclass {
//declarations goes here
}
Detects Html5
Modernizr.load({
test: Modernizr.websockets,
yep : 'socket.js',
nope: 'socket-polyfill.js'
});

18. YUI3 Gallery Modernizr
http://bj.ued.taobao.net/lingyu/html5form/html5form.html

20. 保险TPL应用流程
TPL class
id、key vm classloader
submit
Check.class
view
HTML formsjson memory
class
…
APP
XML
class
…
APP
jar
APP TFS TOOL
APP

21. 保险Form后端xml验证规则

22. 保险Form前端json验证规则

23. 险种Form UI

24. 保险车险项目DPL
html5Dom-xml-styleHTML5语义元素DEMO
应用HTML5语义元素，采用XML‐style namespace的形式(namespace hack)
车险项目公用样式DEMO
包括通用按钮button Demo，提示信息Message Demo，
小图标Icon Demo&Extend Demo
HTML5FORM表单基本功能汇总
required and pattern Attributes;min and max Attributes,number Type autofocus
placeholderdatetime, datetime‐local, date, week ,week url&email;目前维基百科的
HTML5的形式兼容表
车险项目HTML5FORM表单应用DEMO
http://wiki.ued.taobao.net/doku.php?id=ued.bj:f2e:%E8%BD%A6%E9%99%A9dpl

25. THX