FORM在HTML5中的变化算是比较大的，一方面体现在新增了大量的2.0时代的控件，另一方面则是整个FORM结构的变化。与新增的控件相比，新的FORM结构一样为将来的开发工作提供了很大的便利性。

一、2.0的FORM结构

    1. 可以随便放置的表单控件

        在HTML4的表单实现中，如果不借助脚本则必须将表单控件放置在<form></form>标签之中才能顺利的提交到服务器，这就要求将提交到同一服务器的数据必须集中到一个DOM块中，这在form元素和表单控件较多的情况下对设计以及实现带来一定程度的限制。例如在某个注册模块中，有一部分信息需要提交到地址A，而另一部分则需要提交到地址B，然而在展现上这些控件又是混在一块的。这一场景在HTML4中处理起来是比较麻烦的，但是在HTML5中则可以轻松处理，因为在HTML5中，所有的表单控件都增加了一个新属性-form,以元素ID为值，表示该控件属于某个元素。通过这个属性则彻底突破了必须将控件写在<form></form>之中的限制。例如：

以下是代码片段：
<form id="testform" action="serve.php"> 

    <button type="submit">Submit</button> 

</form> 

<input form="testform" name="var1" value="val1">

在提交表单testform时会将var1提交到服务器。不过，目前仅有Opera10支持这一特性。

    2. 一个表单，多处提交

        在HTML4中，一个form指定了action后便只能将<form></form>中的表单元素提交到一个地址。而在HTML5中则给所有的提交按钮，诸如<input type="submit">、<input type="image">、<button type="submit">都增加了form*属性，具体的如下：

        formaction - 指定表单提交地址，如果指定则覆盖<form>中的action;

        formenctype - 如果指定则覆盖<form>中的enctype;

        formmethod - 如果指定则覆盖<form>中的method;

        formtarget - 如果指定则覆盖<form>中的target;

        formnovalidate - 如果指定则覆盖<form>中的novalidate(新增form属性，表示不对表单进行有效性检查);

        有了这些属性使得一个表单中的数据可以根据提交按钮的不同提交到不同的地址，例如：

以下是代码片段：
<form id="testform" action="serve.php"> 

    <input type="submit" name="s1" value="v1" formaction="s1.php">Submit to S1 

    <input type="submit" name="s2" value="v2" formaction="s2.php">Submit to S2 

</form> 

<input form="testform" name="var1" value="val1"> 

<input form="testform" name="var2" value="val2">

与第一点相比，这一特性的浏览器支持则更糟糕，目前尚无浏览器支持。测试的浏览器包括：IE8、IE9、Firefox3.6、Chrome5.0、Opera10、Safari4。

二、2.0的新控件新属性

    1.新控件

        FORM2.0的新控件很大一部分是对<input>的type属性进行了扩展，新的type包括：

TYPE	描述	浏览器支持
search	检索类型，如：	Opera10、Safari4、Chrome5
tel	电话号码	NONE
url	绝对URL，有效性验证，如：	Opera10
email		Opera10
date & datetime & month & week & time & datetime-local		Opera10
number		Opera10
range		Safari4、Opera10、Chrome5
color	颜色值	NONE

    2. 新属性

ATTRIBUTE	描述	浏览器支持
pattern	属于input元素，设置正则表达式来给input的值设定特定的格式	Opera10
required	标识表单控件是必填的（不能用于hidden、range、color和submit）	Opera10
list	当用户输入时，可以给与选择的列表，如：	Opera10
placeholder	在未获得焦点并且无输入时的提示文字，如：	Safari4、Chrome5
autofocus	页面加载后是否自动获得焦点	Safari4、Chrome5

以上结果在以下浏览器中测试：

Firefox3.6 Chrome5、Safari4、Opera10、IE9 Platform Prevew

测试页面在此

此外，更详细的FORM标准请参考文档。

建议继续学习：

1. HTML5 离线缓存-manifest简介    (阅读：16095)
2. 面向移动设备的HTML5开发框架梳理    (阅读：5909)
3. JavaScript，只有你想不到    (阅读：5087)
4. HTML5本地存储初探(二)    (阅读：4385)
5. Phonegap + HTML5 开发经验小结    (阅读：4102)
6. HTML5是什么东东 我们为什么要关注    (阅读：3842)
7. HTML5文件API之图片预览    (阅读：3659)
8. HTML6 初探 — 你没看错，是6不是5    (阅读：3642)
9. 让你的网站也像Gmail一样支持文件拖放上传-HTML5之File API    (阅读：3444)
10. HTML5技术的调研以及贴吧应用总结    (阅读：3450)