0
HTML5 Web Forms                  By:灵玉                  2011-07-04
Local Storage            audio      forms                      canvas                        video      communication     ...
HTML5 Web Formshtml5forms 优势1、简洁、易用、灵活、属性语义清晰2、自定义校验规则,优雅降级3、内置控件、内置校验类型、属性4、省去编程代码5、无视 javascript禁用html5forms 不足1、浏览器兼容2、...
HTML5 Web Formsrequired and pattern Attributes                                  Firefox                                  O...
HTML5 Web Formsmin and max Attributes,number Type                           Opera                            Chrome
HTML5 Web FormsAutofocus AttributePlaceholder AttributeEmail TypeURL Type
HTML5 Web Formsrange Input Type and output Tag
HTML5 Web Formsdatetime, datetime-local, date, week and week Types
HTML5 Web Formshttp://tinyliu.info/2011/02/html5‐test/
HTML5 Form UI Bug1、提示气泡文本空白2、WindowResize时气泡位置错误3、Opera气泡提示溢出浏览器4、UIbug举不胜举 https://bugzilla.mozilla.org/show_bug.cgi?...
HTML5 Form Controls UI ?1、气泡提示方式?遮挡下面表单解决方案:增加间距?2、焦点移出,气泡消失交互可取3、提交表单提示一个错误?用户希望一次性更改所有错误解决方案: 提交表单所有控件错误标红,提示首个错误4、2秒提示消...
为了技术而实现技术   ?
车险 Html5 Web Forms
车险 Html5 Web Formshttp://a.tbcdn.cn/app/dp/insure/car/demo/html5form‐base.html
车险 Html5 Web Formshttp://a.tbcdn.cn/app/dp/insure/car/demo/html5form‐base.html
ModernizrModernizr为HTML5而生——它是一个检测浏览器对HTML5和CSS3特性支持的JS库,著名的HTML5/CSS3浏览器兼容性网站FindmeByIP就是基于该框架实现的。     http://www.moderni...
ModernizrDetects css3.yourclass {   //declarations goes here}.no-textshadow .yourclass {  //declarations goes here}Detects...
YUI3 Gallery Modernizrhttp://bj.ued.taobao.net/lingyu/html5form/html5form.html
保险TPL应用流程                                     TPL                         class         id、key                vm          ...
保险Form后端xml验证规则
保险Form前端json验证规则
险种Form UI
保险车险项目DPL   html5Dom-xml-styleHTML5语义元素DEMO应用HTML5语义元素,采用XML‐style namespace的形式(namespace hack)   车险项目公用样式DEMO包括通用按钮button...
THX
Html5form
Upcoming SlideShare
Loading in...5
×

Html5form

1,686

Published on

Published in: Technology, Design
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,686
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
124
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Transcript of "Html5form"

  1. 1. HTML5 Web Forms By:灵玉 2011-07-04
  2. 2. Local Storage audio forms canvas video communication WebSockets Session Storage GeoLocation Workers IndexDB DatabaseWebSQL Database Offline Applications Query Selector Post Message Touch Hash Change (Event) History Management Drag and Drop SVG
  3. 3. HTML5 Web Formshtml5forms 优势1、简洁、易用、灵活、属性语义清晰2、自定义校验规则,优雅降级3、内置控件、内置校验类型、属性4、省去编程代码5、无视 javascript禁用html5forms 不足1、浏览器兼容2、UI丑陋3、bug较多
  4. 4. HTML5 Web Formsrequired and pattern Attributes Firefox Opera Chrome
  5. 5. HTML5 Web Formsmin and max Attributes,number Type Opera Chrome
  6. 6. HTML5 Web FormsAutofocus AttributePlaceholder AttributeEmail TypeURL Type
  7. 7. HTML5 Web Formsrange Input Type and output Tag
  8. 8. HTML5 Web Formsdatetime, datetime-local, date, week and week Types
  9. 9. HTML5 Web Formshttp://tinyliu.info/2011/02/html5‐test/
  10. 10. HTML5 Form UI Bug1、提示气泡文本空白2、WindowResize时气泡位置错误3、Opera气泡提示溢出浏览器4、UIbug举不胜举 https://bugzilla.mozilla.org/show_bug.cgi?id=558593
  11. 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. 12. 为了技术而实现技术 ?
  13. 13. 车险 Html5 Web Forms
  14. 14. 车险 Html5 Web Formshttp://a.tbcdn.cn/app/dp/insure/car/demo/html5form‐base.html
  15. 15. 车险 Html5 Web Formshttp://a.tbcdn.cn/app/dp/insure/car/demo/html5form‐base.html
  16. 16. ModernizrModernizr为HTML5而生——它是一个检测浏览器对HTML5和CSS3特性支持的JS库,著名的HTML5/CSS3浏览器兼容性网站FindmeByIP就是基于该框架实现的。 http://www.modernizr.com/ https://github.com/Modernizr/Modernizr
  17. 17. ModernizrDetects 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. 18. YUI3 Gallery Modernizrhttp://bj.ued.taobao.net/lingyu/html5form/html5form.html
  19. 19. 保险TPL应用流程 TPL class id、key vm classloadersubmit Check.class view HTML formsjson memory class … APP XML class … APP jar APP TFS TOOL APP
  20. 20. 保险Form后端xml验证规则
  21. 21. 保险Form前端json验证规则
  22. 22. 险种Form UI
  23. 23. 保险车险项目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 autofocusplaceholderdatetime, 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
  24. 24. THX
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×