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 相关文章推荐
IE6,IE7下js动态加载图片不显示错误
Jul 17 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
JS读取cookies信息(记录用户名)
Jan 10 Javascript
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
js实现的简练高效拖拽功能示例
Dec 21 Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
Oct 21 Javascript
vee-validate vue 2.0自定义表单验证的实例
Aug 28 Javascript
js实现黑白div块画空心的图形
Dec 13 Javascript
小程序使用wxs解决wxml保留2位小数问题
Dec 13 Javascript
Vue组件为什么data必须是一个函数
Jun 11 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
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
vue仿element实现分页器效果
2018/09/13 Javascript
微信小程序 调用微信授权窗口相关问题解决
2019/07/25 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
python中threading超线程用法实例分析
2015/05/16 Python
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
Tensorflow实现AlexNet卷积神经网络及运算时间评测
2018/05/24 Python
Python字符串的常见操作实例小结
2019/04/08 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
Python类继承和多态原理解析
2020/02/05 Python
Python 防止死锁的方法
2020/07/29 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
波兰办公用品和学校用品在线商店:Dlabiura24.pl
2020/11/18 全球购物
巴西购物网站:Onofre Agora
2020/06/08 全球购物
电大物流学生的自我评价
2013/10/25 职场文书
2014政务公开实施方案
2014/02/19 职场文书
经典洗发水广告词
2014/03/13 职场文书
计生专干事迹
2014/05/28 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
关于车尾的标语大全
2015/08/11 职场文书
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js
pytorch 实现变分自动编码器的操作
2021/05/24 Python