HTML5中Form表单使用方法

假如咱们需要把网站制作

页面中不同的表单元素提交，而这些表单元素又分布在HTML中的各个位置，那么Form就只能包含所有的Form标签了。

老方法：

（form id="form1" action=" http://www.webjx.com/ "）

（input id="userName" name="userName" type="text"/） （nput 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的元素了。现在再看代码，干净利索多了，项目文件也不大，易于维护。