渐进增强的处理HTML5的表单，这恐怕是现阶段能解决这个问题最好的模式了吧，在浏览器支持HTML5特性的时候使用，不支持的时候还是使用js来扩展增强。

加载Yepnope.js

Yepnope.js是一个脚本加载工具，他可以根据条件不同，加载不同的js脚本。你可以给他传一些变量进去，如果为true，那么就去加载这些脚本和css，如果是false，那再做相应的处理。那么如何确定要不要加载这些脚本呢，从能力检测开始：

加载Modernizr

Modernizr可以提供一些检测HTML5和CSS3的方法。比如，当Modernizr加载之后，如果你的浏览器支持HTML5的日期选择方法（Opera支持），那么Modernizr.inputtype.date就会为true，不支持的浏览器中，这个值就是false。

整合这两个工具

有了这两个工具，我们就可以开始了。

yepnope({
  test : Modernizr.inputtypes.date,
  nope : [
      // load scripts to simulate date type
  ]
});

在这个例子中我们不需要yep属性，因为如果浏览器支持这个属性，那么就会执行，不需要做额外的处理。

不支持的时候怎么办

刚才我们的例子是输入框的date属性，那么我们考虑一下如果浏览器不支持的时候怎么办呢。jQuery UI有一个非常不错的日期选择插件。jQuery可以帮助我们解决很多不支持的情况下的问题，是很不错的选择。为了确保浏览器不支持的时候也能够选择日期，我们需要加载下面的插件。

1. jQuery
2. jQuery UI
3. jQuery UI的CSS
4. 调用日期选择脚本

加载他们

这时候yepnope的代码应该是这样的。

yepnope({
  test : Modernizr.inputtypes.date,
  nope : [
        'scripts/jquery.js',
        'scripts/jquery-ui.js',
        'css/jquery-ui.css',
        'scripts/datepicker.js'
  ]
});

我们自己的脚本在最后加载，它的内容就只是调用插件：

// DOM ready function because we should probably
// be doing this in the
$(function() {
        $("input[type='date']").datepicker();
});

这样最后的情况就是：
在opera下面，系统原生支持：

Firefox4中，不支持，但是我们调用了jQuery插件：

继续

我们可以做的不仅仅是日期选择。我们可以看看placeholer的问题，使用另外一个yepnope：

yepnope({
  test : Modernizr.input.placeholder,
  nope : [
        'scripts/jquery.js',
        'scripts/placeholder.js'
  ]
});

注意一下，我们又使用了jQuery，那么当浏览器又不支持date类型的输入框，也不支持placeholder的情况下，会不会加载两次jQuery呢？不会的，Yepnope还是很聪明的。

比Polyfills更酷一些

Polyfills的思想跟这个差不多。他会先检测浏览器是否支持某些特性，如果不支持，就再使用一些其他的办法来让浏览器支持。这也很棒。我们的办法比这个好的地方在于我们不需要测试，Modernizr已经提供了。所以我们加载的时候就认为浏览器不支持这个，然后运行代码。我们的方法比Polyfills好的点在于：

• 我们一开始只加载两个脚本。如果浏览器支持这些特性，那么也就总共加载两个。但是Polyfiils你需要为每一个特性加载一次脚本。
• 我们将检测的任务交给了Modernizr，这个项目提供一些最佳的解决办法。Polyfills可能做的就没有这个好了

或者

对于这部分的内容研究的还不是很多，也有一些其他的研究项目。其中一个就是webforms2。我还是比较喜欢这种自己测试自己写回调的形式，不过那种设置既忘记的形式也很有吸引力啊。[English]

转载请注明：
作者：RockUX-WEB前端
出自：渐进增强的HTML5表单方案

建议继续学习：

1. HTML5 离线缓存-manifest简介    (阅读：16110)
2. Web表单设计之注册表单    (阅读：7690)
3. 面向移动设备的HTML5开发框架梳理    (阅读：5929)
4. JavaScript，只有你想不到    (阅读：5106)
5. HTML5本地存储初探(二)    (阅读：4398)
6. 网页表单设计摘要    (阅读：4401)
7. jquery.form.js，JQuery表单插件    (阅读：4189)
8. Phonegap + HTML5 开发经验小结    (阅读：4109)
9. HTML5是什么东东 我们为什么要关注    (阅读：3849)
10. Web表单设计:表单结构    (阅读：3870)