input框中的name和id的区别


Posted in Javascript onNovember 16, 2016

1.

可以说几乎每个做过Web开发的人都问过,到底元素的ID和Name有什么区别阿?为什么有了ID还要有Name呢?! 而同样我们也可以得到最classical的答案:ID就像是一个人的身份证号码,而Name就像是他的名字,ID显然是唯一的,而Name是可以重复的。

上周我也遇到了ID和Name的问题,在页面里输入了一个input type="hidden",只写了一个ID='SliceInfo',赋值后submit,在后台用Request.Params["SliceInfo"]却怎么也去不到值。后来恍然大悟因该用Name来标示,于是在input里加了个Name='SliceInfo',就一切ok了。

第一段里对于ID和Name的解答说的太笼统了,当然那个解释对于ID来说是完全对的,它就是Client端HTML元素的Identity。而Name其实要复杂的多,因为Name有很多种的用途,所以它并不能完全由ID来代替,从而将其取消掉。具体用途有:

用途1: 作为可与服务器交互数据的HTML元素的服务器端的标示,比如input、select、textarea、和button等。我们可以在服务器端根据其Name通过Request.Params取得元素提交的值。

用途2: HTML元素Input type='radio'分组,我们知道radio button控件在同一个分组类,check操作是mutex的,同一时间只能选中一个radio,这个分组就是根据相同的Name属性来实现的。

用途3: 建立页面中的锚点,我们知道<a href="URL">link</a>是获得一个页面超级链接,如果不用href属性,而改用Name,如:<a name="PageBottom"></a>,我们就获得了一个页面锚点。

用途4: 作为对象的Identity,如Applet、Object、Embed等元素。比如在Applet对象实例中,我们将使用其Name来引用该对象。

用途5: 在IMG元素和MAP元素之间关联的时候,如果要定义IMG的热点区域,需要使用其属性usemap,使usemap="#name"(被关联的MAP元素的Name)。

用途6: 某些特定元素的属性,如attribute,meta和param。例如为Object定义参数<PARAM NAME = "appletParameter" VALUE = "value">或Meta中<META NAME = "Author" CONTENT = "Dave Raggett">。

显然这些用途都不是能简单的使用ID来代替掉的,所以HTML元素的ID和Name的却别并不是身份证号码和姓名这样的区别,它们更本就是不同作用的东西。

表单元素(form input textarea select)与框架元素(iframe frame)用 name

这些元素都与表单(框架元素作用于form的target)提交有关, 在表单的接收页面只接收有name的元素, 赋ID的元素通过表单是接收不到值的, 你自己可以验证一下.

有一个例外: A 可以赋 name 作为锚点, 也可以赋ID。

2.

id要符合标识的要求,比如大小写敏感,最好不要包含下划线(因为不兼容CSS)。而name基本上没有什么要求,甚至可以用数字。ID就像是一个人的身份证号码,而Name就像是他的名字,ID显然是唯一的,而Name是可以重复的。

<input> 标签规定用户可输入数据的输入字段。

根据不同的 type 属性,输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等。
id:作为标签的唯一标识。

name:作为可与服务器交互数据的HTML元素的服务器端的标示。

3.

ID 是 以 #定义的CSS样式

也可以用JS获取来控制 getElementById(这里是ID) 来获取

name 很多了,就是给当前标签或元素指定名称,也可以用JS来控制值,form提交后获取的时候就需要获取name名称。

4.

id 一般用于css和js中引用,name用于表单提交,只有加了name属性的标签元素才会提交到服务器。

以上所述是小编给大家介绍的input框中的name和id的区别,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
Feb 27 Javascript
用Javascript实现Windows任务管理器的代码
Mar 27 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
May 09 Javascript
vue无限轮播插件代码实例
May 10 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
May 14 Javascript
javascript定时器的简单应用示例【控制方块移动】
Jun 17 Javascript
基于vue-cli3和element实现登陆页面
Nov 13 Javascript
JavaScript cookie原理及使用实例
May 08 Javascript
微信小程序 页面传参实例详解
Nov 16 #Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 #Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 #Javascript
jQuery实现的购物车物品数量加减功能代码
Nov 16 #Javascript
使用JavaScript获取URL中的参数(两种方法)
Nov 16 #Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 #Javascript
微信小程序 获取相册照片实例详解
Nov 16 #Javascript
You might like
咖啡的植物学知识
2021/03/03 咖啡文化
打造计数器DIY三步曲(中)
2006/10/09 PHP
php公用函数列表[正则]
2007/02/22 PHP
PHPThumb图片处理实例
2014/05/03 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
ASP中Sub和Function的区别说明
2020/08/30 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
JS获取各种宽度、高度的简单介绍
2014/12/19 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
2016/01/25 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
如何阻止移动端浏览器点击图片浏览
2020/08/29 Javascript
[01:52]深扒TI7聊天轮盘语音出处7
2017/05/11 DOTA
python调用pyaudio使用麦克风录制wav声音文件的教程
2019/06/26 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
python线性插值解析
2020/07/05 Python
Python使用tkinter实现小时钟效果
2021/02/22 Python
函授毕业自我鉴定
2013/12/19 职场文书
数控专业个人求职信范文
2014/02/05 职场文书
教师师德反思材料
2014/02/15 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
公司授权委托书格式范文
2014/10/02 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
地震慰问信
2015/02/14 职场文书
2015年组织委员工作总结
2015/04/23 职场文书
清明节主题班会
2015/08/14 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
Java Spring Lifecycle的使用
2022/05/06 Java/Android