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 ...
随机推荐
- 【推导】【凸包】MIPT-2016 Pre-Finals Workshop, Taiwan NTU Contest, Sunday, March 27, 2016 Problem D. Drawing Hell
平面上n个点,两个人交替决策,用线段连接两个点,但不能跨越其他点或者已经存在的线段.不能做的人算输,问你谁赢. 实际上,跟两个人的决策无关,n个点将平面三角剖分,只需要算出有几条边即可. 凸包上如果有 ...
- bzoj 4401: 块的计数
4401: 块的计数 Description 小Y最近从同学那里听说了一个十分牛B的高级数据结构——块状树.听说这种数据结构能在sqrt(N)的时间内维护树上的各种信息,十分的高效.当然,无聊的小Y对 ...
- Java高级架构师(一)第39节:Nginx的Rewrite模块
- jni 写一个简单的photoshop
第一步创建 ui <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:and ...
- winform 中设置窗体的默认焦点
转载:http://www.cnblogs.com/weekzero/p/3504513.html winform的窗体中,有时候需要设置默认焦点,有时候需要取消默认焦点. 设置默认焦点,最简单的方法 ...
- 异常:System.BadImageFormatException,未能加载正确的程序集XXX或其某一依赖项
常:System.BadImageFormatException,未能加载正确的程序集XXX或其某一依赖项 看到这个异常,我估计谁都会头大一阵子,不过还好,由于前面知道要设置为x86,加上以前观察过I ...
- 项目中简单使用ztree,简单数据。
由于公司架构较旧,使用的jdk版本为1.4,页面上也没有el表达式. 加入 js 文件 <% String context = request.getContextPath(); %> & ...
- 各种软核处理器二进制文件FPGA初始化文件生成程序
不管是MIPS, Nios II, MicroBlaze, MSP430, 8051, OpenRISC, OpenSPARC, LEON2/LEON3等等软核处理器,在FPGA上实现的时候我们通常需 ...
- rsa实现js前台加密java后台解密
前段时间写了一个rsa前台加密到后台用java解密,下面共享下实现思路: 准备工作:第三方包是必须的 bcprov-jdk15on-148.jar commons-codec-1.7.jar comm ...
- FreeMarker最简单的例子(2)
二.通过String来创建模版对象,并执行插值处理 代码: package com.abc; import freemarker.template.Template; import java.io.O ...