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. c++_方格分割

    标题:方格分割 6x6的方格,沿着格子的边线剪开成两部分.要求这两部分的形状完全相同. 如图:p1.png, p2.png, p3.png 就是可行的分割法. 试计算:包括这3种分法在内,一共有多少种 ...

  2. 【HIHOCODER 1509 】 异或排序

    描述 给定一个长度为 n 的非负整数序列 a[1..n] 你需要求有多少个非负整数 S 满足以下两个条件: (1).0 ≤ S < 260 (2).对于所有 1 ≤ i < n ,有 (a ...

  3. Codeforces 879C/878A - Short Program

    传送门:http://codeforces.com/contest/879/problem/C 本题是一个位运算问题——位运算的等价变换. 假设位运算符“&”“|”“^”是左结合的,且优先级相 ...

  4. python基础——4(数字、字符串、列表类型的内置方法介绍)

    目录 一.可变与不可变类型 二.数字类型 三.字符串类型 四.列表类型 一.可变与不可变类型 可变类型:值改变,但是id不变,证明就是在改变原值,是可变类型 不可变类型:值改变,id也跟着改变,证明产 ...

  5. lr函数之lr_eval_string()函数的使用学习

    lr_eval_string() 函数的主要作用:返回脚本中的一个参数当前的值(从参数中取得对应的值,并且转换为一个字符串). 格式:lr_eval_string("{参数名}") ...

  6. hdu 1043 A*

    http://www.cnblogs.com/183zyz/archive/2011/08/12/2135827.html #include<stdio.h> #define N 3630 ...

  7. java面向对象day01

    前言: 1.首先我们要明白:万物皆对象.现实中存在的事物都是对象.而面向对象技术就是对客观事物进行抽象.2.而java语言是纯面向对象的的语言,它具有描述对象及其相互之间关系的语言成分.3.定义类和建 ...

  8. apache移植

    我下载的是httpd-2.2.9.tar.gz 1. 解压httpd-2.2.9.tar.gz到/mnt/apps目录下.tar -zxvf httpd-2.2.9.tar.gz 2. 建立与http ...

  9. eclipse发布项目到tomcat部署目录

    1.在eclipse下建立Dynamic Web Project工程zhgy,在使用eclipse中new一个tomcat,通过启动该tomcat来发布Dynamic Web Project的时候,其 ...

  10. maven的超级pom

    对于 Maven3,超级 POM 在文件 %MAVEN_HOME%/lib/maven-model-builder-x.x.x.jar 中的 org/apache/maven/model/pom-4. ...