html5form
DESCRIPTION
TRANSCRIPT
HTML5 Web Forms
By:灵玉2011-07-04
WebSockets
GeoLocation
Local Storage
Session Storage
Post Message
Offline Applications
Workers
Query Selector
WebSQL Database
IndexDB Database
Drag and Drop
Hash Change (Event)History Management
Touch
canvasforms
communication
audiovideo
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 Forms
min and max Attributes，number Type
Opera
Chrome
HTML5 Web FormsAutofocus Attribute
Placeholder Attribute
Email Type
URL Type
HTML5 Web Forms
range Input Type and output Tag
HTML5 Web Formsdatetime, datetime-local, date, week and week Types
HTML5 Form UI Bug
1、提示气泡文本空白
2、Window�Resize�时气泡位置错误
3、Opera�气泡提示溢出浏览器
4、UI�bug举不胜举
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
http://a.tbcdn.cn/app/dp/insure/car/demo/html5form‐base.html
车险 Html5 Web Forms
http://a.tbcdn.cn/app/dp/insure/car/demo/html5form‐base.html
Modernizr
http://www.modernizr.com/
Modernizr为HTML5而生——它是一个检测浏览器对HTML5和CSS3特性支持的JS库，著名的HTML5/CSS3浏
览器兼容性网站FindmeByIP就是基于该框架实现的。
https://github.com/Modernizr/Modernizr
Modernizr
Detects css3.yourclass {
//declarations goes here}.no-textshadow .yourclass {//declarations goes here
}
Detects Html5Modernizr.load({
test: Modernizr.websockets,yep : 'socket.js',nope: 'socket-polyfill.js'
});
YUI3 Gallery Modernizr
http://bj.ued.taobao.net/lingyu/html5form/html5form.html
TFS
保险TPL应用流程
…
APP
APP
APP
TOOL
APP
submitvm
Check.class
formsjson
class
class
…
class
HTML
XML
TPLid、key
jar
classloader
memoryview
保险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