HTML元素的ID和Name属性的区别



一直认为ID和NAME是一样的,两个又可以一起出现,甚是疑惑。



今天BAIDU了一下,才发现里面大有文章。发出来研究研究:



最classical的答案:ID就像是一个人的身份证号码,而Name就像是他的名字,ID显然是唯一的,而Name是可以重复的。

     显然这个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的却别并不是身份证号码和姓名这样的区别,它们更本就是不同作用的东西。

<input   name= "xx ">     会提交数据

<input   id= "xx ">     不会提交数据





<input   id= "xx "   name= "yy ">

<label   for= "xx "> Label </label>     这里的for属性必须是指向一个id,否则没效果





<input   name= "xx "   type= "radio "   value= "1 ">

<input   name= "xx "   type= "radio "   value= "2 ">

<input   name= "xx "   type= "radio "   value= "3 ">

这里必须name相同才能成为一组单选按钮,而id则没有这个功能。





<input   name= "xx ">     对应脚本document.getElementsByName( "xx ")[0]

<input   id= "xx ">         对应脚本document.getElementByIdx_x( "xx ")



区别还很多,不一一说了。反正这是两个完全不同的属性。不要混为一谈。

form标签中id和name属性的区别的更多相关文章

  1. input中id和name属性的区别。

    input中id和name属性的区别. 做网站很久了,但到现在还没有搞明白input中name和id的区别,最近学习jquery,又遇到这个问题,就在网上搜集资料.看到这篇,就整理出来,以备后用. 可 ...

  2. script标签中defer和async属性的区别

    这篇文章来源于JS高级程序设计第三版中关于script标签的介绍,结合查阅的资料写下的学习笔记. 向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一 ...

  3. HTML中id、name、class 区别

    参考:http://www.cnblogs.com/polk6/archive////.html http://blog.csdn.net/ithomer/article/details/ HTML ...

  4. 润乾报表JSF FORM 标签中使用填报表解决方案

     需求 润乾报表的标签需要在jsf页面中和其他填报控件一起使用,润乾报表负责展现录入部分数据,并且这部分数据和页面的其它控件的数据存在前台和后台的交互. 问题 润乾报表在前台会生成自己的form, ...

  5. Dev中控件的js事件代码放在form标签中存在问题

    Dev中控件的js事件代码放在form标签中会获取不到(head标签中有其他js代码,未验证是否是这个问题)

  6. Html A标签中 href 和 onclick用法、区别、优先级别

    原文:Html A标签中 href 和 onclick用法.区别.优先级别 如果不设置 href属性在IE6下面会不响应hover.双击后会选中标签的父容器而非这个一a标签(IE下都存在这一问题). ...

  7. HTML元素的ID和Name属性的区别

    HTML元素的ID和Name属性的区别今天突然兴致来了,想深究下这两属性的具体区别最classical的答案:ID就像是一个人的身份证号码,而Name就像是他的名字,ID显然是唯一的,而Name是可以 ...

  8. C#中的字段与属性的区别及属性的作用

    C#中的字段与属性的区别及属性的作用 先上代码 public class Employee { //字段 private string name; //属性 public string Name { ...

  9. PHP 导出网页表格如何对标签中的内容设置属性

    当在使用php导出excel表格的时候,有时需要将某一列专门设置成文本属性 方法: 在需要设置属性的的<td>标签中 添加  style='vnd.ms-excel.numberforma ...

随机推荐

  1. 实现验证的vsftpd虚拟用户

    实现基于文件验证的vsftpd虚拟用户--(一台) 一.创建用户数据库文件 vim /etc/vsftpd/vuser cd /etc/vsftpd/ db_load -T -t hash -f vu ...

  2. perl学习之:use & require

    相同: 都可以用来引用module(.PM). 不同: 1) 区别在于USE是在当前默认的@INC里面去寻找,一旦模块不在@INC中的话,用USE是不可以引入的,但是require可以指定路径: 2) ...

  3. windows下安装rabbitmq以及php扩展amqp

    先安装RabbitMQ 安装Erlang  下载地址http://www.erlang.org/downloads 我选的是64位 这个根据自己情况下载,双击安装之 安装RabbitMQ 下载地址ht ...

  4. VS2013环境下Boost库配置

    序言 最近了解各大互联网公司的校招要求,发现了解Boost程序库也是不可或缺的一部分~ 于是,决定潜心研究下,这个准标准库~ 首先,在官网下载boost的最新版本Boost 1.59.0,这是当前的最 ...

  5. playbacktask

    / ** 播放应用程序的头文件. 此文件是头文件,用于定义Playback应用程序的API和数据类型. @file PlaybackTsk.h @ingroup mIAPPPlay @note什么都没 ...

  6. UVALive - 6267 Beer Pressure

    题意: 给定n个酒吧, 然后有k个学生投票今晚去哪个酒吧, 然后会有a个(a<=k)学生先投票了, 先投的票会影响后面的人投票的概率, 求每个酒吧今晚去的概率. 分析: 我们可以从最初的状态开始 ...

  7. PAT 1027. 打印沙漏

    打印沙漏 本题要求你写个程序把给定的符号打印成沙漏的形状.例如给定17个"*",要求按下列格式打印 ***** *** * *** ***** 所谓"沙漏形状" ...

  8. UI进阶 即时通讯之XMPP环境搭建

    内容中包含 base64string 图片造成字符过多,拒绝显示

  9. 【02】SASS与SCSS

    SASS语法 SASS语法也称之为SASS的缩进语法,其目的是担供一个更简洁的语法.对于一些人来说,更多的是基于于CSS的美学吸引力,用SASS来代替SCSS语法. SASS语法和CSS语法不一样,他 ...

  10. 关于 HTTP meta 的 IE=edge 说明

    http://www.oschina.net/question/54100_17414 陌生标记标记一: < meta http-equiv = "X-UA-Compatible&qu ...