form表单中id与name的区别
2024-09-07 18:06:16
以前经常写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
最新文章
- PHP两种基础的算法:冒泡、快速排序法》》》望能够帮助到大家
- (转发)centos,redhat 系统为php安装memcached扩展
- 转-CSS3 圆角(border-radius)
- ios基础篇(九)——自定义UITabBar
- eclipse中建立tomcat容器
- 路由器to路由器
- ubuntu环境配置eclipse+opencv
- iOS 进阶—— iOS 内存管理
- CF666E Forensic Examination
- SQL 快速生成不重复的卡号
- UESTC 1034 AC Milan VS Juventus 分情况讨论
- C#7.2——编写安全高效的C#代码 c# 中模拟一个模式匹配及匹配值抽取 走进 LINQ 的世界 移除Excel工作表密码保护小工具含C#源代码 腾讯QQ会员中心g_tk32算法【C#版】
- Python全栈之路----函数----返回值
- selenium+Page Objects(第一话)
- java.security.InvalidKeyException: Illegal key size 解决办法
- PyCharm使用Github管理代码
- Sql Server 统计当天数据
- 【Tomcat】tomcat热部署和热加载(转载)
- 一、DAO设计模式 	二、DAO设计模式的优化 	三、JDBC中的事务,连接池的使用
- 设计模式-观察者模式(上)<;转>;
热门文章
- Kafka之--自动启动zookeeper &; kafka 脚本
- Python 机器学习实战 —— 无监督学习(上)
- Java大整形BigInteger的用法
- ifix历史数据(H04/H08/H24)转换为CSV文件导出
- JBoss 4.x JBossMQ JMS 反序列化漏洞(CVE-2017-7504)
- 2020厦门大学综述翻译:3D点云深度学习(Remote Sensiong期刊)
- 大数据学习(05)——MapReduce/Yarn架构
- 关于在iar+j-link上的坑坑洼洼
- 看完就会的Spring Cloud Gateway
- 【SpringCloud技术专题】「原生态Fegin」打开Fegin之RPC技术的开端,你会使用原生态的Fegin吗?(上)