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 相关文章推荐
Javascript中的数学函数集合
May 08 Javascript
jQuery获取浏览器中的分辨率实现代码
Apr 23 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
Jan 07 Javascript
jQuery写fadeTo示例代码
Feb 21 Javascript
jQuery ajax分页插件实例代码
Jan 27 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
Mar 09 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
Nov 19 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
iview form清除校验状态的实现
Sep 19 Javascript
微信小程序基于高德地图查找位置并显示文字
Oct 30 Javascript
原生js实现照片墙效果
Oct 13 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中preg_match的isU代表什么意思
2015/10/01 PHP
php利用ffmpeg提取视频中音频与视频画面的方法详解
2017/06/07 PHP
PDO::rollBack讲解
2019/01/29 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
Prototype Function对象 学习
2009/07/12 Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
JavaScript打字小游戏代码
2011/12/26 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
JavaScript入门系列之知识点总结
2016/03/24 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
详谈表单格式化插件jquery.serializeJSON
2017/06/23 jQuery
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
JS实现公告上线滚动效果
2021/01/10 Javascript
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
Python操作Excel之xlsx文件
2017/03/24 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
英国著名药妆店:Superdrug
2021/02/13 全球购物
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
学校司机岗位职责
2013/11/14 职场文书
档案接收函
2014/01/13 职场文书
幼儿教师考核制度
2014/01/25 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
golang定时器
2022/04/14 Golang