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. pwnable.kr lotto之write up

    源代码 : #include <stdio.h> #include <stdlib.h> #include <string.h> #include <fcnt ...

  2. WCF部署到IIS的一个浅水滩

    俗话说,浅水淹死牛.昨天下午到今天上午,我就被淹死了一次. 最近在做毕业设计,和一个朋友做,做的是一个APP,我做的是服务器端,因为涉及后台数据更新,所以要有一个后台管理系统,然后还要搭建一个服务给A ...

  3. HDU 2462 The Luckiest number

    The Luckiest number Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on HDU. Ori ...

  4. Python 和 Flask实现RESTful services

    使用Flask建立web services超级简单. 当然,也有很多Flask extensions可以帮助建立RESTful services,但是这个例实在太简单了,不需要使用任何扩展. 这个we ...

  5. CentOS 中 YUM 安装桌面环境

    CentOS 作为服务器的操作系统是很常见的,但是因为需要稳定而没有很时髦的更新,所以很少做为桌面环境.在服务器上通常不需要安装桌面环境,最小化地安装 CentOS(也就是 minimal CentO ...

  6. [转]使用fdisk磁盘分区和 Linux 文件系统

    概述 在本文中,学习磁盘分区和 Linux 文件系统相关内容.学习: 创建分区 使用 mkfs 命令来设置 ext2.ext3.ext4.xfs.Reiser v3 和 vfat 文件系统 创建和管理 ...

  7. 【BZOJ3626】LCA(树上差分,树链剖分)

    题意:给出一个n个节点的有根树(编号为0到n-1,根节点为0).一个点的深度定义为这个节点到根的距离+1.设dep[i]表示点i的深度,LCA(i,j)表示i与j的最近公共祖先.有q次询问,每次询问给 ...

  8. C#.net中当地址有中文时,图片无法显示解决方法

    原文发布时间为:2008-11-05 -- 来源于本人的百度文章 [由搬家工具导入] 搞了半天都无法正常显示图片, string path = Server.MapPath("." ...

  9. jQuery操作元素的class属性

    今天在做一个菜单折叠插件的时候需要根据页面的url改变其class属性.jQuery操作元素的属性是非常方便的,在此记录一下: 1.给元素添加class属性: addClass(class) (1)添 ...

  10. Multiply Strings(字符串乘法模拟,包含了加法模拟)

    Given two numbers represented as strings, return multiplication of the numbers as a string. Note: Th ...