HTML5中的FORM2.0

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包括：

    2. 新属性

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

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

测试页面在此

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