zoukankan      html  css  js  c++  java
  • form表单嵌套,用标签的form属性来解决表单嵌套的问题

    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>标签的form属性</title> 
    </head>
    <body>
    

    <form action="demo-form.php" id="form1">
    First name: <input type="text" name="fname"><br>
    <input type="submit" value="提交">
    </form>

    <p> "Last name" 字段没有在 form 表单之内,但它也是 form 表单的一部分。</p>

    Last name: <input type="text" name="lname" form="form1">

    <p><b>注意:</b> IE 不支持 form 属性</p>

    </body>
    </html>

    上面是对标签form属性的一个理解,下面来看一个问题

    <form action="form.jsp" id="form1">  
        <input type="text" name="value1" />  
        <form action="12.jsp" id="form2">  
            <input type="text" name="value2" />  
        </form>  
        <input type="text" name="value3" />  
        <input type="submit" value="提交" onclick="submitForm();"/>  
    </form>  
    
    <script type="text/javascript">  
        function submitForm(){  
            document.getElementById("form1").submit();  
        }  
    </script>  

    如上代码,只能获取到value1和value2的值,value3的值将丢失。 因为form标签不能嵌套,嵌套后会导致第一个form后的数据都不能提交
    下面来看用标签的form属性来解决这个问题,还是以问题代码为列。

    <form action="form.jsp" id="form1">  
        <input form="form1" type="text" name="value1" />
        <input form="form2" type="text" name="value2" />
        <input form="form1" type="text" name="value3" />  
        <input type="submit" value="提交1" onclick="submitForm1();"/>  
    </form>  
    <form action="12.jsp" id="form2">
         <input type="submit" value="提交2" onclick="submitForm1();"/>
    </form>
    
    <script type="text/javascript">  
        function submitForm1(){  
            document.getElementById("form1").submit();  
        }  
        function submitForm(){  
            document.getElementById2("form2").submit();  
        }
    </script>  

    这样利用标签的form属性就可以不用改变表单的结构,就可以提交表单中的某一部分。

  • 相关阅读:
    《构建之法》第四章学习笔记
    《深入理解计算机系统》第四章学习笔记
    《构建之法》第三章学习笔记
    《深入理解计算机系统》第三章学习笔记
    《文献管理与信息分析》第二讲学习笔记
    《深入理解计算机系统》第二章学习笔记
    20179223《Linux内核原理与分析》第十二周学习笔记
    《从问题到程序》第三章学习笔记
    51nod1256乘法逆元
    51nod1212无向图最小生成树
  • 原文地址:https://www.cnblogs.com/jpfss/p/9468293.html
Copyright © 2011-2022 走看看