Chinaunix首页 | 论坛 | 博客
  • 博客访问: 264852
  • 博文数量: 76
  • 博客积分: 66
  • 博客等级: 民兵
  • 技术积分: 980
  • 用 户 组: 普通用户
  • 注册时间: 2012-10-28 16:48
个人简介

做游戏 写程序 Erlang分布式

文章分类

全部博文(76)

文章存档

2017年(3)

2016年(2)

2015年(1)

2014年(5)

2013年(20)

2012年(45)

我的朋友

分类:

2012-10-28 16:56:31

原文地址:HTML5之Form新属性的使用 作者:qxy_l

在HTML5中增加了许多新的标签和功能属性,今天我们来看一个Form表单在HTML5中新的使用方法。那么在HTML5中新加入的这个功能与之前咱们使用的功能区别在哪里呢?在下面咱们有几个场景来看,你就明白啦~


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




老方法:

点击(此处)折叠或打开

  1. <form id="form1" action="">
  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>

Powered by

但是在此Form中又包含一些不需要在此From中提交的元素(比如userAge)怎么办呢?貌似只能提交了,让后台程序员不接受此参数或者使用js把所有需要再此表单中提交的内容放入到hidden隐藏区域中,然后提交,你可能会修改成如下



改良后:


点击(此处)折叠或打开

  1. <form id="form1" action="">
  2.             <input id="hd_userName" name="userName" type="hidden"/>
  3.             <input id="hd_userPwd" name="userPwd" type="hidden"/>
  4.     </form>
  5.     <input id="userName" name="userName" type="text"/>
  6.     <input id="userPwd" name="userPwd" type="password"/>
  7.     <input id="userAge" name="userAge" type="text"/>
  8.     <input type="submit" value="提交"/>

Powered by

嗯,这样整理了一下是不错,可以满足我们的要求,但是js就太多了,浪费网络资源和HTTP请求数据包,增加项目大小,维护起来相对比较麻烦。



HTML5的方法:


点击(此处)折叠或打开

  1. <form id="form1" action="">
  2.             <input type="submit" value="提交"/>
  3.     </form>
  4.     <input id="userName" name="userName" for="form1" type="text"/>
  5.     <input id="userPwd" name="userPwd" for="form1" type="password"/>
  6.     <input id="userAge" name="userAge" type="text"/>

Powered by

这里的for属性=表单的ID,这样一来,这些元素到底归那个表单就一目了然了,这个for属性,你可以理解为label中的for属性,只不过在HTML5中的这种情况下,他就属于fome1的元素了。现在再看代码,干净利索多了,项目文件也不大,易于维护。


阅读(456) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~