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 1123 [POI2008]BLO(Tarjan算法)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1123 [题目大意] Byteotia城市有n个towns,m条双向roads. 每条r ...
- 【最大流Dinic模板】HDU1532&POJ1273-Drainage Ditches(16/3/6更正)
#include<iostream> #include<cstdio> #include<cstdlib> #include<cstring> #inc ...
- redis源码解析之事件驱动
Redis 内部有个小型的事件驱动,它主要处理两项任务: 文件事件:使用I/O多路复用技术处理多个客户端请求,并返回执行结果. 时间事件:维护服务器的资源管理,状态检查. 主要的数据结构包括文件事件结 ...
- JAVA EE 项目常用知识 之AJAX技术实现select下拉列表联动的两种用法(让你真正理解ajax)
ajax 下拉列表联动的用法. ajax的定义: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的 ...
- HMACSHA1算法的JAVA实现
import javax.crypto.Mac; import javax.crypto.SecretKey; import javax.crypto.spec.SecretKeySpec; publ ...
- HDU 4655 Cut Pieces(2013多校6 1001题 简单数学题)
Cut Pieces Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others)Total ...
- 在Visual Studio中开发Matlab mex文件,生成mexw64/mexw32
csunking贡献,2015-9-22 1712 1. 概述 通过使用C/C++与Matlab混合编程,既可以享受到C代码快速执行的速度,又可以方便的使用Matlab众多的库函数和强大的绘图功能 ...
- google的开源项目总结
转自http://www.feng5166.com/blog/424.html google的开源项目值得我们一用的,这些项目很有意义,甚至可以直接用在我们自己的工作上!学习编程的的一个比较好的方式就 ...
- activiti源码笔记对标的博客
http://blog.csdn.net/bluejoe2000/article/category/2812511/2 白乔专栏 http://blog.csdn.net/bluejoe2000/ar ...
- jquery load 方法回显数据
使用jQuery对象.load()方法 load() 方法的作用是可以通过 AJAX 请求从服务器加载数据,并把返回的数据直接放置到指定的元素中. 该方法使用起来非常简单,大大简化了ajax开发 语法 ...