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

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

时间: 2024-10-09 22:10:02

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

dede让channelartlist标签支持currentstyle属性 完美解决

打开include\taglib\channelartlist.lib.php找到 [php] view plaincopyprint? $pv->Fields['typeurl'] = GetOneTypeUrlA($typeids[$i]); 在此行代码下方增加以下代码: [php] view plaincopyprint? if($typeids[$i]['id'] == $refObj->TypeLink->TypeInfos['id'] || $typeids[$i]['id'

form表单标签的enctype属性的作用

Enctype是指定将数据回发到服务器时浏览器使用的编码类型,其编码类型有以下三种 一. application/x-www-form-urlencoded 这是通过表单发送数据时默认的编码类型.我们没有在from标签中设置enctype属性时默认就是application/x-www-form-urlencoded类型的.application/x-www-form-urlencoded编码类型会把表单中发送的数据编码为名称/值对.这是标准的编码格式.当表单的ACTION为POST的时候,浏览

禁止button标签提交form表单,变成普通按钮

button有个type属性,属性值可为button.submit.reset button=普通按钮,直接点击不会提交表单submit=提交按钮,点击后会提交表单reset=表单复位 当button的type属性值为button时,仅做为一个普通的按钮,并不会提交该表单,此时你可以通过js脚本来提交,而form中不需要加onsubmit事件.

Form表单标签的Enctype属性的作用及应用示例介绍

Enctype :指定将数据回发到服务器时浏览器使用的编码类型.用于表单里有图片上传. 编码类型有以下三种: application/x-www-form-urlencoded: 在发送前编码所有字符(默认).这是标准的编码格式. multipart/form-data: 不对字符编码,在使用包含文件上传控件的表单时,必须使用该值. text/plain: 窗体数据以纯文本形式进行编码,其中不含任何控件或格式字符. 例子: <form action="${pageContext.reque

HTML:form表单中的label标签

label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性.如果你在 label 标签内点击文本,就会触发此控件.就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上). 语法: <label for="控件id名称"> 注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同. 例子如下: <form> 你对什么运动感兴趣:<br />

form表单中的label标签

好多人用到label但是并不知道其中的意义是什么,今儿特此说明下 . label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性.如果你在label标签内点击文本,就会触发此控件.就是说,当用户单击选中该label标签时,浏览器会自动将焦点转到和标签相关的表单上(就自动选中和label标签相关连的表单控件上). 语法: <label  for="控件id"></label> 注意:标签的for属性中的值应当与相关控件的id属性值一定相同. 例子:

form表单里的按钮触发form表单的提交

出现问题主要原因是button标签的type属性,button的type属性值有三个分别为button.submit.reset.当我们在利用button标签写一个按钮且没有指定其type属性时,IE7以下版本会默认指定为button,其他会被默认指定为submit.当按钮的type属性被指定为submit的时候,点击它会提交表单.解决办法:当需在form标签中放置一个button的时候,如果这个按钮不是做提交表单的,切记一定要设置其type为button. 原文地址:https://www.c

sharepoint 2013基于AD的Form表单登录(二)——form登录页面自定义

配置好了sharepoint 2013基于AD的Form登录,只是成功了第一步,如何自定义登录页呢?特别是不要出现sharepoint2013自带登录页面,每次登录前还需要选择是否是form或者windows验证. 打开vs2012新建sharepoint 2013 project,在layouts目录下添加application page,页面命名为CustomLogin.aspx. 前台页面:为避免母版页中其他控件影响,注意继承的是simple.master         后台页面:继承F

InfoPath与SharePoint之(六)在表单库里引用InfoPath Form Content Type

在表单库里引用InfoPath Form Content Type 在上一篇,介绍了如何把InfoPath Form类型的Content Type发布到SiteCollection,发布完之后,就可以在已经存在的表单库里引用了. 打开一个已经存在的表单库,点击Ribbon上的Library Settings: 在Settings页面,点击Advanced Settings: 默认情况下,添加Content Type功能是关闭的,在这里开启: 再回到Library Settings页面,就可以添加