新技术论坛
搜索
查看: 652|回复: 0
打印 上一主题 下一主题

[HTML5] HTML5之Form新属性的使用

[复制链接]
  • TA的每日心情
    开心
    2016-10-18 06:23
  • 签到天数: 72 天

    连续签到: 1 天

    [LV.6]常住居民II

    扫一扫,手机访问本帖
    楼主
    跳转到指定楼层
    发表于 2016-3-20 00:46:33 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
      在HTML5中增加了许多新的标签和功能属性,今天我们来看一个Form表单在HTML5中新的使用方法。那么在HTML5中新加入的这个功能与之前咱们使

        用的功能区别在哪里呢?在下面咱们有几个场景来看,你就明白啦~

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

        老方法:

    • <form id="form1" action="http://www.w3cfuns.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.w3cfuns.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.w3cfuns.com/">
    •         <input type="submit" value="提交"/>
    • </form>
    • <input id="userName" name="userName" form="form1" type="text"/>
    • <input id="userPwd" name="userPwd" form="form1" type="password"/>
    • <input id="userAge" name="userAge" type="text"/>


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


    高级模式
    B Color Image Link Quote Code Smilies

    本版积分规则

    手机版|Archiver|开发者俱乐部 ( ICP/ISP证:辽B-2-4-20110106号 IDC证:辽B-1-2-20070003号 )

    GMT+8, 2024-12-23 18:38 , Processed in 0.124867 second(s), 18 queries .

    X+ Open Developer Network (xodn.com)

    © 2009-2017 沈阳讯网网络科技有限公司

    快速回复 返回顶部 返回列表