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 相关文章推荐
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
JQUERY 设置SELECT选中项代码
Feb 07 Javascript
Node.js实现JS文件合并小工具
Feb 02 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
BootstrapTable加载按钮功能实例代码详解
Sep 22 Javascript
微信小程序实现手势图案锁屏功能
Jan 30 Javascript
ios中视频的最后一桢问题解决
May 14 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 Javascript
vue实现修改图片后实时更新
Nov 14 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 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
用Socket发送电子邮件
2006/10/09 PHP
桌面中心(一)创建数据库
2006/10/09 PHP
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
玩转方法:call和apply
2014/05/08 Javascript
原生Js实现简易烟花爆炸效果的方法
2015/03/20 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
浅谈React中的元素、组件、实例和节点
2018/02/27 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
pycharm执行python时,填写参数的方法
2018/10/29 Python
pyqt5 键盘监听按下enter 就登陆的实例
2019/06/25 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
sklearn和keras的数据切分与交叉验证的实例详解
2020/06/19 Python
python安装后的目录在哪里
2020/06/21 Python
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
CLR与IL分别是什么含义
2016/08/23 面试题
Linux Interview Questions For software testers
2013/05/17 面试题
乡镇干部十八大感言
2014/02/17 职场文书
护理助产毕业生的求职信
2014/03/02 职场文书
元旦趣味活动方案
2014/08/22 职场文书
相亲活动方案
2014/08/26 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
毕业典礼邀请函
2015/01/31 职场文书
个人廉政承诺书
2015/04/28 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
七年级作文之游记
2019/12/11 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL