HTML中的id和name详解

id和name是HTML中经常用到的两个属性,对于这两个属性的使用,会有一些疑惑的地方,比如:

  • id有什么用途?
  • name有什么用途
  • 什么情况下必须用id
  • 什么情况下必须用name
  • id和name有什么区别?
    以下便是基于以上问题的解释。

1. id 的用途

  • id就是Client端HTML元素的Identity(标记),主要是在客户端脚本(JavaScript)里用
  • label与form控件的关联,如:
<label for="MyInput">My Input</label>
   <input id="MyInput" type="text">

<label>标签的作用是为<input>元素定义注释
<label>标签中的for 属性值必须与相关元素的 id 属性值相同。

  • 脚本中获得对象:IE支持在脚本中直接以id(而不是name)引用该id标识的对象。
    例如上面的input,要在脚本中获得输入的内容,可以直接以 MyInput.value来获得。如果用DOM的话,则用document.getElementById("MyInput").value;
  • 在CSS中用于给HTML中的元素定义一个元素的独特的样式
#idName
{
属性1:属性值1;
属性2:属性值2
}

2. name 的用途

  • 作为可与服务器交互数据的HTML元素的服务器端的标示,比如inputselecttextarea、和button等。我们可以在服务器端根据其Name通过Request.Params取得元素提交的值。
  • HTML元素Input type='radio'分组,我们知道radio button控件在同一个分组类,check操作是mutex的,同一时间只能选中一个radio,这个分组就是根据相同的Name属性来实现的。
  • 建立页面中的锚点,我们知道<a href="URL">link</a>是获得一个页面超级链接,如果不用href属性,而改用Name,如:<a name="PageBottom"></a>,我们就获得了一个页面锚点。
  • 作为对象的Identity,如Applet、Object、Embed等元素。比如在Applet对象实例中,我们将使用其Name来引用该对象。
  • 在IMG元素和MAP元素之间关联的时候,如果要定义IMG的热点区域,需要使用其属性usemap,使usemap="#name"(被关联的MAP元素的Name)。
  • 某些特定元素的属性,如attribute,meta和param。例如为Object定义参数<PARAM NAME = "appletParameter" VALUE = "value">或Meta中<META NAME = "Author" CONTENT = "Dave Raggett">

3. 下列情况必须用到id

  • <label> 与 form 控件的关联
  • CSS的元素选择机制,以#MyId的方式指定应用样式的元素,不能用name替代
  • 脚本中获得对象: IE支持在脚本中直接以id(而不是name)引用该id标识的对象

4. 下列情况下必须用到name

  • 表单(form)的控件名,提交的数据都用控件的name而不是id来控制。因为有许多name会同时对应多个控件,比如checkbox和radio,而id必须是全文档中唯一的。此外浏览器会根据name来设定发送到服务器的request。因此如果用id,服务器是无法得到数据的。
  • frame和window的名字,用于在其他frame或window指定target

5. id 和 name 的区别

id-name.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,999评论 19 139
  • HTML 中 id与name 区别 一个name可以同时对应多个控件,比如checkbox和radio。而id必须...
    Yinag阅读 709评论 0 1
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,331评论 1 41
  • 這個感慨來源於早上發生的一件很平常的事故! 難得沒到晚上12點我就困的不行,睡這麼早想來是要早起的,如...
    宋小朝阅读 83评论 0 0
  • 作者:夏春秋无双 http://www.shanpow.com/review/5329ab88af5ccc13b3...
    安迪斯晨风阅读 799评论 0 1