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. HTML5增加与改良的input元素

    h5中form表单中input新增的属性值 在HTML5中增加了许多新的标签和功能属性,今天我们来看一个Form表单在HTML5中新的使用方法.那么在HTML5中新加入的这个功能与之前咱们使用的功能区 ...

  2. 电源模块PCB设计

    电源模块的PCB设计 电源电路是一个电子产品的重要组成部分,电源电路设计的好坏,直接牵连产品性能的好坏.我们电子产品的电源电路主要有线性电源和高频开关电源.从理论上讲,线性电源是用户需要多少电流,输入 ...

  3. 杭电 4004 The Frog's Games 青蛙跳水 (二分法,贪心)

    Description The annual Games in frogs' kingdom started again. The most famous game is the Ironfrog T ...

  4. POJ 1161 Walls(Floyd , 建图)

    题意: 给定n个城市, 然后城市之间会有长城相连, 长城之间会围成M个区域, 有L个vip(每个vip会处于一个城市里)要找一个区域聚会, 问一共最少跨越多少个长城. 分析: 其实这题难就难在建图, ...

  5. Jedis 工具类

    package com.pig4cloud.pigx.admin.utils; import redis.clients.jedis.*; import java.util.ArrayList; im ...

  6. Mac 10.10 配置apache

    配置php 命令行工具:http://blog.csdn.net/evane1890/article/details/38759073 自从系统从OS X Mavericks 10.9升级到OS X  ...

  7. python和搜索

    # -*- coding: UTF-8 -*- import re # 搜索逻辑 def querylogic(list): query = {} if len(list) > 1 or len ...

  8. Hadoop JVM调整解决 MapReduce 作业超时问题

    摘要:由于业务需要,在mapreduce汇总时需要关联两个基础表,一个60M左右,不影响mr运行,另一个表,大小约为380M,行数为1700万行左右,在默认配置下,一旦加载这个数据就会在reduce阶 ...

  9. [HDU2896]病毒侵袭(AC自动机)

    传送门 题目中文描述,赞! 除了val记录id以外就是模板. 注意:每次数组都要清0.0 ——代码 #include <cstdio> #include <queue> #in ...

  10. 【数学】codeforces A. Success Rate

    http://codeforces.com/contest/773/problem/A [思路] 用 (x+a)/(y+b) = p/q 来表示其核心思想,其中a 为做对的题目,b为做的题目,则有x+ ...