Form表单的嵌套问题

最新推荐文章于 2024-02-21 11:54:30 发布

cosmos_lee

最新推荐文章于 2024-02-21 11:54:30 发布

阅读量2w

点赞数 11

分类专栏： Java并发

本文链接：https://blog.csdn.net/u012156116/article/details/87630380

版权

Java并发专栏收录该内容

11 篇文章 0 订阅

订阅专栏

最近在项目中碰到了form中还需要另设form表单的问题，查了下，简单记录在这里。

参考：https://www.cnblogs.com/jpfss/p/9468293.html

1. 先看一个正确的写法：

<!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>

以上是使用<input> 标签的form属性来实现表单提交的功能的。

2.下面来看一个错误的嵌套表单示例：

<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后的数据都不能提交。

3.下面来看用标签的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属性就可以不用改变表单的结构，就可以提交表单中的某一部分。

cosmos_lee

关注

11
点赞
踩
31

收藏

觉得还不错? 一键收藏
1
评论
Form表单的嵌套问题

最近在项目中碰到了form中还需要另设form表单的问题，查了下，简单记录在这里。参考：https://www.cnblogs.com/jpfss/p/9468293.html1. 先看一个正确的写法：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;...
复制链接

扫一扫

专栏目录