在HTML5中增加了许多新的标签和功能属性，那么在HTML5中新加入的这个功能与之前咱们使用的功能区别在哪里呢？请往下看。
假如咱们需要把页面中不同的表单元素提交，而这些表单元素又分布在HTML中的各个位置，那么Form就只能包含所有的Form标签了。
旧方法：
1. <form id="form1" action="http://www.w3cfuns.com/">
2. <input id="userName" name="userName" type="text"/>
3. <input id="userPwd" name="userPwd" type="password"/>
4. <input id="userAge" name="userAge" type="text"/>
5. <input type="submit" value="提交"/>
6. </form>
但是在此Form中又包含一些不需要在此From中提交的元素（比如userAge）怎么办呢？貌似只能提交了，让后台程序员不接受此参数或者使用js把所有需要再此表单中提交的内容放入到hidden隐藏区域中，然后提交，你可能会修改成如下
改进后：
1. <form id="form1" action="http://www.w3cfuns.com/">
2. <input id="hd_userName" name="userName" type="hidden"/>
3. <input id="hd_userPwd" name="userPwd" type="hidden"/>
4. </form>
5.
6. <input id="userName" name="userName" type="text"/>
7. <input id="userPwd" name="userPwd" type="password"/>
8. <input id="userAge" name="userAge" type="text"/>
9. <input type="submit" value="提交"/>
嗯，这样整理了一下是不错，可以满足我们的要求，但是js就太多了，浪费网络资源和HTTP请求数据包，增加项目大小，维护起来相对比较麻烦。
HTML5的方法：
1. <form id="form1" action="http://www.w3cfuns.com/">
2. <input type="submit" value="提交"/>
3. </form>
4.
5. <input id="userName" name="userName" for="form1" type="text"/>
6. <input id="userPwd" name="userPwd" for="form1" type="password"/>
7. <input id="userAge" name="userAge" type="text"/>
这里的for属性=表单的ID，这样一来，这些元素到底归那个表单就一目了然了，这个for属性，你可以理解为label中的for属性，只不过在HTML5中的这种情况下，他就属于fome1的元素了。现在再看代码，干净利索多了，项目文件也不大，易于维护。
例子：
1. <! doctype html>
2. <html>
3. <head>
4. <style>
5. p label {
6. width: 180px;
7. float: left;
8. text-align: right;
9. padding-right: 10px
10. }
11. table {
12. margin-left: 80px
13. }
14. table td {
15. border-bottom: 1px solid #CCCCCC
16. }
17. input.submit {
18. margin-left: 80px
19. }
20. </style>
21. </head>
22. <body>
23. <form action='/register' enctype="application/x-www-form+xml" method="post">
24. <p>
25. <label for='name'>ID(请使用Email注册)</label>
26. <input name='name' required type='email'></input>
27. </p>
28. <p>
29. <label for='password'>密码</label>
30. <input name='password' required type='password'></input>
31. </p>
32. <p>
33. <label for='birthday'>出生日期</label>
34. <input type='date' name='birthday' />
35. </p>
36. <p>
37. <label for='gender'>国籍</label>
38. <select name='country' data='countries.xml'></select>
39. </p>
40. <p>
41. <label for='photo'>个性头像</label>
42. <input type='file' name='photo' accept='image/*' />
43. </p>
44. <table>
45. <thead>
46. <td><button type="add" template="questionId">+</button> 保密问题</td>
47. <td>答案</td>
48. <td></td>
49. </thead>
50. <tr id="questionId" repeat="template" repeat-start="1" repeat-min="1" repeat-max="3">
51. <td><input type="text" name="questions[questionId].q"></td>
52. <td><input type="text" name="questions[questionId].a"></td>
53. <td><button type="remove">删除</button></td>
54. </tr>
55. </table>
56. <p>
57. <input type='submit' value='send' class='submit' />
58. </p>
59. </form>
60. </body>
61. </html>
这是Opera 浏览器的测试。类似于站长的HTML5的表单系统,
这个运用了一些HTML5的新的表单元素，比如email类型的输入框(ID)，日期类型的输入框(出生日期)。并且使用了重复模型来引导用户填写保密问题，而在个性头像的上传中，通过限制文件类型，方便用户选择图片进行合乎规范的内容上传。而用户选择国籍的下拉选择输入框中，采用的是外联数据源的形式，外联数据源使用coutries.xml，内容如下：
1. <select xmlns="http://www.w3.org/1999/xhtml">
2. <option>China</option>
3. <option>Japan</option>
4. <option>Korea</option>
5. </select>
并且form的enctype是application/x-www-form+xml，也就是HTML5的XML提交。所以一旦form校验通过，form的内容将会以XML的形式提交。你还会发现，在ID输入框如果没有值，或者输入了非email类型的字符串时，一旦试图提交表单，就会有提示错误的信息出现，而这都是浏览器内置的。
