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. 20. Valid Parentheses (python版)

    Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the inpu ...

  2. htmlpurifier的使用

    什么是htmlpurifier?? HTML Purifier是一个可以用来移除所有恶意代码(XSS),而且还能确保你的页面遵循W3C的标准规范的PHP类库. 在php里解决XSS最简单的方法是使用h ...

  3. tensorflow with gpu 环境配置

    1.准备工作 1.1 确保GPU驱动已经安装 lspci | grep -i nvidia 通过此命令可以查看GPU信息,测试机已经安装GPU驱动

  4. pyquery 基本使用笔记

    安装 pip install pyquery 导入 from pyquery import PyQuery as pq 初始化: from pyquery import PyQuery as pq h ...

  5. pwnable.kr cmd2之write up

    来看一下源代码: #include <stdio.h> #include <string.h> int filter(char* cmd){ ; r += strstr(cmd ...

  6. SPOJ FAVDICE 数学期望

    题目大意: 一个有n面的色子抛掷多少次能使所有面都能被抛到过,求期望值 总面数为n,当已经抛到过 i 个不同面时,我们抛出下一个不同面的概率为 (n-i)/n,那么抛的次数为 n/(n-i) 将所有抛 ...

  7. SPOJ GNYR09F 数字上的找规律DP

    Problem C      SPOJ GNYR09F dp题,dp可能刚刚开始对大家来说比较难,但是静下心来分析还是比较简单的: dp(i ,j ,k)表示前i个数中,当前累积和为j,末尾数字为k的 ...

  8. [luoguP3092] [USACO13NOV]没有找零No Change(状压DP + 二分)

    传送门 先通过二分预处理出来,每个硬币在每个商品处最多能往后买多少个商品 直接状压DP即可 f[i]就为,所有比状态i少一个硬币j的状态所能达到的最远距离,在加上硬币j在当前位置所能达到的距离,所有的 ...

  9. POJ 1017 Packet

    http://poj.org/problem?id=1017 有1*1 2*2...6*6的物品 要装在 6*6的parcel中 问最少用多少个parcel 一直没有找到贪心的策略 问题应该出现在 总 ...

  10. noj 2033 一页书的书 [ dp + 组合数 ]

    传送门 一页书的书 时间限制(普通/Java) : 1000 MS/ 3000 MS          运行内存限制 : 65536 KByte总提交 : 53            测试通过 : 1 ...