日期:2013-12-20  浏览次数:20574 次

网页制造aiyiweb文章简介:HTML5每日一练之Form新属性的使用。

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


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

老方法:

<form id="form1" action="http://www.Aiyiweb.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.Aiyiweb.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.Aiyiweb.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的元素了。如今再看代码,干净利索多了,项目文件也不大,易于维护。

如果你有不懂的,可以也可以直接给我留言,我会尽快回复大家的。
如果看懂这个当前,大家可以本人练习一下,把练习发上来,协助大家一同进步!