form表单中的id 与name的区别
以前经常写form表单时,不写id和name,总觉得没有什么用。后来一看后台套完的页面发现,他们都补上name,不知道所以然,就查了一下资料,吓我一跳,要是照我那样写根本不会有数据传到服务器。原来表单提交用户输入的数据,是根据表单元素的name值来控制表单控件的。那么表单控件里面的id是干嘛的?就是为了区别不同的表单控件,还有一个作用,就是点击表单控件提示信息时也能让表单控件获得焦点的效果,用label提高用户体验,这时的label属性中的for是跟表单控件的id一致的,我以前老是搞混,以为是跟控件的name值一样,因为看例子中总是name值跟id值一样。
这也引出另一个问题就是label的用法:就是用for表示跟哪个表单元素绑定。所以它有两种关联方式,一个显示关联用for,一种是不用for的隐示关联。
所谓的显示关联就是label跟表单元素是并列关系
<label for='sex'>性别:</label>
<input type='text' id='sex' name='gender'>
这里看到id和name值不是必须一样
隐示关联就是label跟表单元素是包含关系,这时候label里面不需要for,表单元素也不需要id
<label>性别:<input type='text' name='gender'></label>
这里看到没有id可以,但是name是必须要的,以后一定要记住啊!
那我们再回到主题form表单中的id 与name的区别,前面说到的是一些html结构方面的区别,下面说一下他们的其他区别。
如果写样式,只能用id获取他标示的表单元素
如果用js给表单元素添加交互效果,name和id都可以选中标示表单元素,只是形式有不同,document.getElementById("sex").value,要是用name获取document.forms[0].gender.value
参看资料:
http://blog.csdn.net/chang_xing/article/details/7605993
form表单中的id 与name的区别的更多相关文章
- jsp中的form表单中的 id和name有什么区别了
<form action="./system/WebServer_webServerLogin" method="post" id="login ...
- Form表单中的get和post的区别
method="get/post",两种方式的区别 Form中的get和post方法,在数据传输过程中分别对应了GET和POST方法.二者主要区别如下: 1.Get将表单中数据的按 ...
- form表单中method的get和post区别
一.问题的提出 <form action="getPostServlet/getPost.do?param4=param4" method="get" ...
- Form表单中Post与Get方法的区别
Form提供了两种数据传输的方式:get和post.虽然它们都是数据的提交方式,但是在实际传输时确有很大的不同,并且可能会对数据产生严重的影响. Form中的get和post方法,在数据传输过程中分别 ...
- form表单中id与name的区别
以前经常写form表单时,不写id和name,总觉得没有什么用.后来一看后台套完的页面发现,他们都补上name,不知道所以然,就查了一下资料,吓我一跳,要是照我那样写根本不会有数据传到服务器.原来表单 ...
- jQuery中设置form表单中action值与js有什么不同。。。。
jQuery中设置form表单中action值与js有什么不同.... HTML代码如下: <form action="" method="post" i ...
- dwz的form表单中url的变量替换
form表单中action的地址格式 “__URL__/edit/{xxx}”,大括号内的 “xxx” 就是变量名,主要功能是结合table组件一起使用. 下图中的删除.编辑.修改密码都是用了url变 ...
- javascript将form表单中的元素值封装成json格式
把form表单中的元素值封装成json function toJSON(form)//form是要进行封装的form表单对象,dom对象,可以通过document.mainForm获得,mainFor ...
- jQuery中设置form表单中action值的方法
jQuery中设置form表单中action值的方法 (2011-03-17 10:18:19) 转载▼ 标签: 杂谈 html代码: <form id="myFormId&quo ...
随机推荐
- BZOJ 4653 [Noi2016]区间(Two pointers+线段树)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=4653 [题目大意] 在数轴上有n个闭区间 [l1,r1],[l2,r2],...,[l ...
- [TCO2009]NumberGraph
题意:给你一些带权的节点和一个正整数集合$S$,$S$中每一个数的二进制后缀$0$个数相同,节点$x$的权值为$v_x$,如果对于$x,y$存在$t\in S$使得$|v_x-v_y|=t$,那么连边 ...
- [POJ3728]The merchant
题目大意: 给你一棵n个结点的带权树,有q组询问,问你从u到v的路径上最大值与最小值的差(最大值在最小值后面). 思路: 首先考虑路径上合并两个子路径u->t和t->v时的情况. 假设我们 ...
- fastjson生成json时Null属性不显示的解决方法
举个例子 Map < String , Object > jsonMap = new HashMap< String , Object>(); jsonMap.put(&quo ...
- SQL Server--CheckPoint
http://www.cnblogs.com/TeyGao/category/526201.html
- 怎么查看和修改 MySQL 的最大连接数
通常,mysql的最大连接数默认是100, 最大可以达到16384.1.查看最大连接数:show variables like '%max_connections%';2.修改最大连接数方法一:修改配 ...
- attribute用法
attribute 用法 摘要: 在学习linux内核代码及一些开源软件的源码(如:DirectFB),经常可以看到有关__attribute__的相关使用.本文结合自己的学习经历,较为详细的介绍了_ ...
- QT5.11下载与安装教程
一.QT软件下载 Qt 5.9 之后的安装包与之前相比,不再区分 VS 版本和 MinGW 版本,而是全都整合到了一个安装包中.因此,与之前的安装包相比,体积也是大了不少,以前是 1G 多,现在是 2 ...
- 向PE文件植入后门代码技术讨论
写在前面的话 这篇文章将介绍使用codecaves对PE文件植入后门代码.有几个很好的工具可以帮到你了.比如BackdoorFactory和Shelter将完成相同的工作,甚至绕过一些静态分析几个防病 ...
- python查看字节码
查看字节码可以帮助我们更好的理解python的执行流程 查看字节码列表 import opcode for op in range(len(opcode.opname)): print('0x%.2X ...