• 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属性就可以不用改变表单的结构,就可以提交表单中的某一部分。

  • 相关阅读:
    poj 3074(DLX)
    zoj 3209(DLX)
    hdu 4531(模拟+BFS+DFS)
    hdu 2065(递推+矩阵优化)
    poj 3714 (最近点对)
    zoj 3690(递推+矩阵优化)
    poj 3076(DLX)
    hdu 4533(一种很巧妙的方法|线段树+扫描线)
    hdu 4513(模拟)
    sql server 2008 评估已过期。
  • 原文地址:https://www.cnblogs.com/jpfss/p/9468293.html
Copyright © 2020-2023  润新知