首页 > Web开发 > 详细

HTML5中Form表单使用方法

时间:2015-12-21 10:29:49      阅读:244      评论:0      收藏:0      [点我收藏+]

假如咱们需要把网站制作

页面中不同的表单元素提交,而这些表单元素又分布在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的元素了。现在再看代码,干净利索多了,项目文件也不大,易于维护。

HTML5中Form表单使用方法

原文:http://www.cnblogs.com/yy-5616/p/5062572.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!