首页 > 其他 > 详细

form表单嵌套,用标签的form属性来解决表单嵌套的问题

时间:2018-08-13 15:20:33      阅读:216      评论:0      收藏:0      [点我收藏+]
<!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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

上面是对标签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>  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

如上代码,只能获取到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>  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

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

form表单嵌套,用标签的form属性来解决表单嵌套的问题

原文:https://www.cnblogs.com/jpfss/p/9468293.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!