假如咱們需要把網站制作頁面中不同的表單元素提交，而這些表單元素又分布在HTML中的各個位置，那么Form就只能包含所有的Form標簽了。
老方法：
<form id="form1" action=" http://www.webjx.com/ ">
        <input id="userName" name="userName" type="text"/>
        <input id="userPwd" name="userPwd" type="password"/>
        <input id="userAge" name="userAge" type="text"/>
        <input type="submit" value="提交"/>
</form>
但是在此Form中又包含一些不需要在此From中提交的元素（比如userAge）怎么辦呢？貌似只能提交了，讓后臺程序員不接受此參數或者使用js把所有需要再此表單中提交的內容放入到hidden隱藏區域中，然后提交，你可能會修改成如下



改良后：
<form id="form1" action=" http://www.webjx.com/ ">
        <input id="hd_userName" name="userName" type="hidden"/>
        <input id="hd_userPwd" name="userPwd" type="hidden"/>
</form>
<input id="userName" name="userName" type="text"/>
<input id="userPwd" name="userPwd" type="password"/>
<input id="userAge" name="userAge" type="text"/>
<input type="submit" value="提交"/>
嗯，這樣整理了一下是不錯，可以滿足我們的要求，但是js就太多了，浪費網絡資源和HTTP請求數據包，增加項目大小，維護起來相對比較麻煩。
HTML5的方法：
<form id="form1" action=" http://www.webjx.com/ ">
        <input type="submit" value="提交"/>
</form>
<input id="userName" name="userName" for="form1" type="text"/>
<input id="userPwd" name="userPwd" for="form1" type="password"/>
<input id="userAge" name="userAge" type="text"/>
這里的for屬性=表單的ID，這樣一來，這些元素到底歸那個表單就一目了然了，這個for屬性，你可以理解為label中的for屬性，只不過在HTML5中的這種情況下，他就屬于fome1的元素了。現在再看代碼，干凈利索多了，項目文件也不大，易于維護。