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属性就可以不用改变表单的结构，就可以提交表单中的某一部分。
form表单嵌套，用标签的form属性来解决表单嵌套的问题的更多相关文章
- 话说Form标签的target属性-----无刷新表单提交
国庆前(2013)无聊,就在铁道部的12306上“逛”了下下. PS:原来之所以叫12306,是因为其客服号码是12306,好吧,我很无知…… 首先是被“逛”的页面:票价查询. 之所以去逛,是因为一直 ...
- dede让channelartlist标签支持currentstyle属性 完美解决
打开include\taglib\channelartlist.lib.php 找到 $pv->Fields['typeurl'] = GetOneTypeUrlA($typeids[$i]); ...
- 给标签设置disabled属性后提交不了数据
项目中遇到给select标签添加disabled属性然后提交表单的时候不能提交该表单的数据到后台, readonly属性对提交数据没有限制,但是readonly属性对radio.select.chec ...
- 1、前端--HTML简介、head内常见标签、body内常见标签（特殊符号、div、span、a、img、列表、表格table、表单form）、标签两大属性
今日内容 HTML简介 HTML是构造网页的骨架>>>:几乎所有的网站都是由HTML构建而成 HTML:超文本标记语言 # 不是一门编程语言 没有任何的逻辑 只有固定的标记功能 &q ...
- 表单相关标签之form标签
表单能够包含 input 元素,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含 menus.textarea.fieldset.legend 和 label 元素以及其它块级元素 表单用 ...
- Form表单标签的Enctype属性的作用及应用示例介绍
Enctype :指定将数据回发到服务器时浏览器使用的编码类型.用于表单里有图片上传. 编码类型有以下三种: application/x-www-form-urlencoded: 在发送前编码所有字符 ...
- 禁止button标签提交form表单，变成普通按钮
button有个type属性,属性值可为button.submit.reset button=普通按钮,直接点击不会提交表单submit=提交按钮,点击后会提交表单reset=表单复位 当button ...
- form表单中的label标签
小伙伴们,你们在前面学习表单各种控件的时候,有没有发现一个标签--label,这一小节就来揭晓它的作用. label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性.如果你在 labe ...
- 在学习HTML——form表单中的label标签时的一点小体会
在我啃了一遍书本之后,开始了在慕课看视频的过程,从最开始的HTML+CSS的基础课程看起,在第5-9小节讲到了form表单的label标签, 首先看一下慕课的讲解: label 标签不会向用户呈现任 ...
随机推荐
- Android使用蓝牙连接adb调试App
使用WiFi连接Android设备调试APP的教程非常多,可是项目中须要使用蓝牙进行通信.所以牵扯使用蓝牙调用adb. 1. 将电脑蓝牙与手机进行配对(控制面板->设备和打印机->加入 ...
- Hadoop权威指南学习笔记三
HDFS简单介绍 声明:本文是本人基于Hadoop权威指南学习的一些个人理解和笔记,仅供学习參考.有什么不到之处还望指出,一起学习一起进步. 转载请注明:http://blog.csdn.net/my ...
- 安卓手机上安装 谷歌 play 商店
安卓手机上安装 谷歌 play 商店 安卓(Android)就是现在流行的智能手机系统,它是由Google公司和开放手机联盟领导及开发.由于安卓系统的底层代码(AOSP)是开源的,以GPL和Apach ...
- js36---函数嵌套
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- js---BOM 的理解方法
windows 方法 window.close(); //关闭窗口 window.alert("message"); //弹出一个具有OK按钮的系统消息框,显示指定的文本 ...
- golang 函数作为类型
golang 函数作为类型 package main import "fmt" type A func(int, int) func (f A)Serve() { fmt.Prin ...
- [转]Accept-Encoding
原文地址:https://blog.csdn.net/sqzhao/article/details/49499471 HTTP Header中Accept-Encoding 是浏览器发给服务器,声明浏 ...
- Vue的全选功能实现思路
全选功能的实现主要分两步: 1. 点击全选框选中所有选择框. 2. 当所有选择框都被选中时,勾选全选框. 详细思路: 1. 点击全选框选中所有选择框: 给全选框绑定一个值,然后添加change时间,当 ...
- 事件循环（Event Loop）
1.什么是事件循环? JavaScript为单线程执行的,所以是从上到下依次执行,js分为两个任务,宏任务和微任务 首先执行宏任务(第一次就是执行所有的同步代码),再执行所有的微任务,执行完毕之后再次 ...
- HDU——T 3579 Hello Kiki
http://acm.hdu.edu.cn/showproblem.php?pid=3579 Time Limit: 2000/1000 MS (Java/Others) Memory Limi ...