Html5form
Upcoming SlideShare
Loading in...5
×
 

Html5form

on

  • 1,848 views

 

Statistics

Views

Total Views
1,848
Views on SlideShare
1,847
Embed Views
1

Actions

Likes
9
Downloads
119
Comments
0

1 Embed 1

http://whojinhui.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html5form Html5form Presentation Transcript

  • HTML5 Web Forms By:灵玉 2011-07-04
  • 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
  • HTML5 Web Formshtml5forms 优势1、简洁、易用、灵活、属性语义清晰2、自定义校验规则,优雅降级3、内置控件、内置校验类型、属性4、省去编程代码5、无视 javascript禁用html5forms 不足1、浏览器兼容2、UI丑陋3、bug较多
  • HTML5 Web Formsrequired and pattern Attributes Firefox Opera Chrome
  • 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?id=558593
  • HTML5 Form Controls UI ?1、气泡提示方式?遮挡下面表单解决方案:增加间距?2、焦点移出,气泡消失交互可取3、提交表单提示一个错误?用户希望一次性更改所有错误解决方案: 提交表单所有控件错误标红,提示首个错误4、2秒提示消失? 用户读不完错误,还需要知道错误信息解决方案:如果错误获取焦点再提示错误信息?文字在后面标注?5、UI视觉丑陋,浏览器差异大?解决方案: javascript 统一UI http://a.tbcdn.cn/app/dp/insure/car/demo/html5form.html
  • 为了技术而实现技术 ?
  • 车险 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.modernizr.com/ https://github.com/Modernizr/Modernizr
  • 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 });
  • YUI3 Gallery Modernizrhttp://bj.ued.taobao.net/lingyu/html5form/html5form.html
  • 保险TPL应用流程 TPL class id、key vm classloadersubmit Check.class view HTML formsjson memory class … APP XML class … APP jar APP TFS TOOL APP
  • 保险Form后端xml验证规则
  • 保险Form前端json验证规则
  • 险种Form UI
  • 保险车险项目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
  • THX