Enviar búsqueda
Cargar
Html5form
•
9 recomendaciones
•
1,039 vistas
jay li
Seguir
Tecnología
Diseño
Vista de diapositivas
Denunciar
Compartir
Vista de diapositivas
Denunciar
Compartir
1 de 25
Descargar ahora
Descargar para leer sin conexión
Recomendados
Js doc toolkit
Js doc toolkit
jay li
JavaScript Engine
JavaScript Engine
jay li
Jswebapps
Jswebapps
jay li
Js高级技巧
Js高级技巧
fool2fish
ASP.NET Core MVC 2.2從開發到測試 - Development & Unit Testing
ASP.NET Core MVC 2.2從開發到測試 - Development & Unit Testing
江華 奚
犀牛书第六版
犀牛书第六版
jay li
ASP.NET Core 2.1設計新思維與新發展
ASP.NET Core 2.1設計新思維與新發展
江華 奚
Java Script 调试
Java Script 调试
guest8ef035
Recomendados
Js doc toolkit
Js doc toolkit
jay li
JavaScript Engine
JavaScript Engine
jay li
Jswebapps
Jswebapps
jay li
Js高级技巧
Js高级技巧
fool2fish
ASP.NET Core MVC 2.2從開發到測試 - Development & Unit Testing
ASP.NET Core MVC 2.2從開發到測試 - Development & Unit Testing
江華 奚
犀牛书第六版
犀牛书第六版
jay li
ASP.NET Core 2.1設計新思維與新發展
ASP.NET Core 2.1設計新思維與新發展
江華 奚
Java Script 调试
Java Script 调试
guest8ef035
Structs2簡介
Structs2簡介
catonchuang
Nodejs部门分享
Nodejs部门分享
zffl
Kindeditor 设计思路
Kindeditor 设计思路
luolonghao
Real World ASP.NET MVC
Real World ASP.NET MVC
jeffz
前端基础知识回顾
前端基础知识回顾
Wu tianhao
Java 1(Java概述)
Java 1(Java概述)
xzdbd
J S教材
J S教材
yiditushe
Jsp
Jsp
rdandy
Web前端标准在各浏览器中的实现差异
Web前端标准在各浏览器中的实现差异
cleverpig
TypeScript-twmvc#16
TypeScript-twmvc#16
twMVC
Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)
ziggear
Kindeditor设计思路v2
Kindeditor设计思路v2
luolonghao
【项目分享】赶集移动Web App开发总结
【项目分享】赶集移动Web App开发总结
yangdj
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
Jackson Tian
Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練
Joseph Chiang
前端工程開發實務訓練
前端工程開發實務訓練
Joseph Chiang
透過 Windows Azure Mobile Services 開發各平台 Apps
透過 Windows Azure Mobile Services 開發各平台 Apps
Eric ShangKuan
淘宝开放产品前端实践
淘宝开放产品前端实践
taobao.com
Introduction to CodeIgniter
Introduction to CodeIgniter
Chun-Kai Wang
Kind editor设计思路
Kind editor设计思路
taobao.com
淘宝前端技术巡礼
淘宝前端技术巡礼
jay li
introduction of web 2.0
introduction of web 2.0
soboring
Más contenido relacionado
La actualidad más candente
Structs2簡介
Structs2簡介
catonchuang
Nodejs部门分享
Nodejs部门分享
zffl
Kindeditor 设计思路
Kindeditor 设计思路
luolonghao
Real World ASP.NET MVC
Real World ASP.NET MVC
jeffz
前端基础知识回顾
前端基础知识回顾
Wu tianhao
Java 1(Java概述)
Java 1(Java概述)
xzdbd
J S教材
J S教材
yiditushe
Jsp
Jsp
rdandy
Web前端标准在各浏览器中的实现差异
Web前端标准在各浏览器中的实现差异
cleverpig
TypeScript-twmvc#16
TypeScript-twmvc#16
twMVC
Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)
ziggear
Kindeditor设计思路v2
Kindeditor设计思路v2
luolonghao
【项目分享】赶集移动Web App开发总结
【项目分享】赶集移动Web App开发总结
yangdj
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
Jackson Tian
Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練
Joseph Chiang
前端工程開發實務訓練
前端工程開發實務訓練
Joseph Chiang
透過 Windows Azure Mobile Services 開發各平台 Apps
透過 Windows Azure Mobile Services 開發各平台 Apps
Eric ShangKuan
淘宝开放产品前端实践
淘宝开放产品前端实践
taobao.com
Introduction to CodeIgniter
Introduction to CodeIgniter
Chun-Kai Wang
Kind editor设计思路
Kind editor设计思路
taobao.com
La actualidad más candente
(20)
Structs2簡介
Structs2簡介
Nodejs部门分享
Nodejs部门分享
Kindeditor 设计思路
Kindeditor 设计思路
Real World ASP.NET MVC
Real World ASP.NET MVC
前端基础知识回顾
前端基础知识回顾
Java 1(Java概述)
Java 1(Java概述)
J S教材
J S教材
Jsp
Jsp
Web前端标准在各浏览器中的实现差异
Web前端标准在各浏览器中的实现差异
TypeScript-twmvc#16
TypeScript-twmvc#16
Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)
Kindeditor设计思路v2
Kindeditor设计思路v2
【项目分享】赶集移动Web App开发总结
【项目分享】赶集移动Web App开发总结
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練
前端工程開發實務訓練
前端工程開發實務訓練
透過 Windows Azure Mobile Services 開發各平台 Apps
透過 Windows Azure Mobile Services 開發各平台 Apps
淘宝开放产品前端实践
淘宝开放产品前端实践
Introduction to CodeIgniter
Introduction to CodeIgniter
Kind editor设计思路
Kind editor设计思路
Similar a Html5form
淘宝前端技术巡礼
淘宝前端技术巡礼
jay li
introduction of web 2.0
introduction of web 2.0
soboring
HTML5 历史、现状及未来
HTML5 历史、现状及未来
Yongbin Tian
MobileWebAppFramework_V5_design
MobileWebAppFramework_V5_design
Jackson Tian
ASP.NET MVC Code Templates實戰開發 -twMVC#4
ASP.NET MVC Code Templates實戰開發 -twMVC#4
twMVC
twMVC#04 | ASP.NET MVC - Code Templates實戰開發
twMVC#04 | ASP.NET MVC - Code Templates實戰開發
twMVC
非常靠谱 Html 5
非常靠谱 Html 5
Tony Deng
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Gelis Wu
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
leneli
Windows 8 apps dev.整理及分享
Windows 8 apps dev.整理及分享
Liyao Chen
2011 JavaTwo JSF 2.0
2011 JavaTwo JSF 2.0
Anthony Chen
前端杂谈
前端杂谈
salinet
移动Web开发框架jqm探讨
移动Web开发框架jqm探讨
newker
EtherCodes中的HTML5
EtherCodes中的HTML5
Garry Yao
通行证项目技术分享
通行证项目技术分享
Tony Deng
敦群學院-SharePoint精英計畫-系統開發-Day 3
敦群學院-SharePoint精英計畫-系統開發-Day 3
群智信息有限公司 CAREY Software Service
张所勇:前端开发工具推荐
张所勇:前端开发工具推荐
zhangsuoyong
那些年,我们一起跨过域
那些年,我们一起跨过域
ksky521
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
taobao.com
富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用
luolonghao
Similar a Html5form
(20)
淘宝前端技术巡礼
淘宝前端技术巡礼
introduction of web 2.0
introduction of web 2.0
HTML5 历史、现状及未来
HTML5 历史、现状及未来
MobileWebAppFramework_V5_design
MobileWebAppFramework_V5_design
ASP.NET MVC Code Templates實戰開發 -twMVC#4
ASP.NET MVC Code Templates實戰開發 -twMVC#4
twMVC#04 | ASP.NET MVC - Code Templates實戰開發
twMVC#04 | ASP.NET MVC - Code Templates實戰開發
非常靠谱 Html 5
非常靠谱 Html 5
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
Windows 8 apps dev.整理及分享
Windows 8 apps dev.整理及分享
2011 JavaTwo JSF 2.0
2011 JavaTwo JSF 2.0
前端杂谈
前端杂谈
移动Web开发框架jqm探讨
移动Web开发框架jqm探讨
EtherCodes中的HTML5
EtherCodes中的HTML5
通行证项目技术分享
通行证项目技术分享
敦群學院-SharePoint精英計畫-系統開發-Day 3
敦群學院-SharePoint精英計畫-系統開發-Day 3
张所勇:前端开发工具推荐
张所勇:前端开发工具推荐
那些年,我们一起跨过域
那些年,我们一起跨过域
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用
Más de jay li
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
jay li
潜力无限的编程语言Javascript
潜力无限的编程语言Javascript
jay li
Responsive Web UI Design
Responsive Web UI Design
jay li
深入剖析浏览器
深入剖析浏览器
jay li
HTML/CSS/JS基础
HTML/CSS/JS基础
jay li
F2e security
F2e security
jay li
中国元素在设计中的应用 -如瑟
中国元素在设计中的应用 -如瑟
jay li
卫银霞 -统计数字会撒谎
卫银霞 -统计数字会撒谎
jay li
编码大全 拔赤
编码大全 拔赤
jay li
小控件、大学问
小控件、大学问
jay li
Mobile UI design and Developer
Mobile UI design and Developer
jay li
Javascript autoload
Javascript autoload
jay li
Slide
Slide
jay li
新业务新员工培训 Banner设计
新业务新员工培训 Banner设计
jay li
夏之 专题设计
夏之 专题设计
jay li
赤骥 用户研究入门
赤骥 用户研究入门
jay li
Ecmascript
Ecmascript
jay li
2011彩票首页开发实践
2011彩票首页开发实践
jay li
Web设计的画纸深入了解我们的显示器
Web设计的画纸深入了解我们的显示器
jay li
潜意识设计
潜意识设计
jay li
Más de jay li
(20)
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
潜力无限的编程语言Javascript
潜力无限的编程语言Javascript
Responsive Web UI Design
Responsive Web UI Design
深入剖析浏览器
深入剖析浏览器
HTML/CSS/JS基础
HTML/CSS/JS基础
F2e security
F2e security
中国元素在设计中的应用 -如瑟
中国元素在设计中的应用 -如瑟
卫银霞 -统计数字会撒谎
卫银霞 -统计数字会撒谎
编码大全 拔赤
编码大全 拔赤
小控件、大学问
小控件、大学问
Mobile UI design and Developer
Mobile UI design and Developer
Javascript autoload
Javascript autoload
Slide
Slide
新业务新员工培训 Banner设计
新业务新员工培训 Banner设计
夏之 专题设计
夏之 专题设计
赤骥 用户研究入门
赤骥 用户研究入门
Ecmascript
Ecmascript
2011彩票首页开发实践
2011彩票首页开发实践
Web设计的画纸深入了解我们的显示器
Web设计的画纸深入了解我们的显示器
潜意识设计
潜意识设计
Html5form
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
19.
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
Descargar ahora