美文网首页
HTML中的id和name详解

HTML中的id和name详解

作者: 杨慧莉 | 来源:发表于2017-02-06 19:03 被阅读0次

    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

    相关文章

      网友评论

          本文标题:HTML中的id和name详解

          本文链接:https://www.haomeiwen.com/subject/qkzyittx.html