首页 文章

HTML中id和name属性的区别

提问于
浏览
604

idname 属性有什么区别?它们似乎都与提供标识符的目的相同 .

我想知道(特别是关于HTML表单)是否有必要或鼓励使用两者都是出于任何原因 .

17 回答

  • 294

    在表单提交中发送数据时使用 name 属性 . 不同控制的反应不同 . 例如,您可能有几个具有不同 id 属性的单选按钮,但相同的 name . 提交时,响应中只有一个值 - 您选择的单选按钮 .

    当然,除此之外还有更多,但它肯定会让你思考正确的方向 .

  • 24

    对表单控件(例如 <input><select> )使用 name 属性,因为这是在表单提交时发生的 POSTGET 调用中使用的标识符 .

    每当需要使用CSS,JavaScript或a fragment identifier来处理特定HTML元素时,请使用 id 属性 . 它's possible to look up elements by name, too, but it' s simpler and more reliable按ID查找它们 .

  • 29

    这是一个简短的总结:

    • id 用于 identify the HTML element through the Document Object Model (通过JavaScript或使用CSS设置样式) . id 预计在页面内是唯一的 .

    • name 对应于表单元素 identifies what is posted back to the server .

  • 14

    http://mindprod.com/jgloss/htmlforms.html#IDVSNAME

    有什么区别?简短的回答是,使用两者并且不用担心它 . 但是如果你想要理解这种愚蠢,这里是skinny:id =用作这样的目标:<some-element id =“XXX”> </ some-element>用于这样的链接:<a href =“ #XXX” . name =还用于标记在表单中按提交时使用HTTP(超文本传输协议)GET或POST发送到服务器的消息中的字段 . id =标记JavaScript和Java DOM(文档对象模型)使用的字段 . 名称中的名称=在表单中必须是唯一的 . id =中的名称在整个文档中必须是唯一的 . 有时,name =和id = names会有所不同,因为服务器期望同一文档中的各种表单中的相同名称或与上例中相同形式的各种单选按钮 . id =必须是唯一的;名字=一定不能 . JavaScript需要唯一的名称,但是这里有太多的文档没有唯一的name = names,因此W3人发明了必须是唯一的id标记 . 不幸的是旧浏览器不理解它 . 因此,您需要在表单中使用两种命名方案 .

    注意:HTML5中不支持某些标签(如 <a> )的属性"name" .

  • 521

    我想到它并使用它的方式很简单:

    id 用于CSS和JavaScript / jQuery(必须在页面中是唯一的)

    当通过HTML提交表单时, name 用于PHP中的表单处理(在表单中必须是唯一的 - 在某种程度上,请参阅下面的Paul评论)

  • 6

    ID标记 - 由CSS使用,定义div,span或其他元素的 unique 实例 . 出现在Javascript DOM模型中,允许您通过各种函数调用访问它们 .

    字段的名称标签 - 这对于 form 是唯一的 - 除非您正在执行要传递给PHP /服务器端处理的数组 . 您可以通过Javascript按名称访问它,但我认为它不会显示为DOM中的节点或某些限制可能适用(例如,如果我没记错的话,您不能使用.innerHTML) .

  • 2
    <form action="demo_form.asp">
    <label for="male">Male</label>
    <input type="radio" name="sex" id="male" value="male"><br>
    <label for="female">Female</label>
    <input type="radio" name="sex" id="female" value="female"><br>
    <input type="submit" value="Submit">
    </form>
    
  • 9

    此链接具有相同基本问题的答案,但基本上,id用于脚本标识,名称用于服务器端 .

    http://www.velocityreviews.com/forums/t115115-id-vs-name-attribute-for-html-controls.html

  • 6

    name 已弃用于链接目标,在HTML5中无效 . 它至少在最新的Firefox(v13)中不再适用 . 将 <a name="hello"> 更改为 <a id="hello">

    目标不需要是 <a> 标记,它可以是 <p id="hello" >或 <h2 id="hello"> 等,这通常是更清晰的代码 .

    正如其他帖子清楚地说的那样, name 仍然在表格中使用(需要) . 它仍然用于META标签 .

  • 0

    name Vs id

    name

    • 元素的名称 . 例如,服务器用于标识表单提交中的字段 .

    • 支持元素是 <button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param>

    • 名称不必是唯一的 .

    id

    • 经常与CSS一起使用来设置特定元素的样式 . 该属性的值必须是唯一的 .

    • Id是Global attributes,它们可用于所有元素,但属性可能对某些元素没有影响 .

    • 在整个文档中必须是唯一的 .

    • 此属性的值不得包含空格,与class属性不同,后者允许以空格分隔的值 .

    • 使用ASCII字母和数字以外的字符,'_','-'和'.'可能会导致兼容性问题,因为HTML 4中不允许使用这些字符 . 虽然HTML 5中已取消此限制,但ID应以字母开头以便兼容 .

  • 0

    通常,假设 name is always superseded by id . 对某些人来说,这是事实实际上,范围,但不是 form fields and frame names . 例如,对于表单元素, name 属性用于确定 name-value pairs to be sent to a server-side program ,不应删除 . Browsers do not use id in that manner . 为了安全起见,您可以在表单元素上使用name和id属性 . 所以,我们写下以下内容:

    <form id="myForm" name="myForm">
         <input type="text" id="userName" name="userName" />
    </form>
    

    为了确保兼容性,在定义两者时具有匹配的名称和id属性值是个好主意 . 但是,要小心 - 一些标签, particularly radio buttons, must have nonunique name values, but require unique id values. 再一次,这应该引用id不仅仅是名称的替代品;他们的目的不同 . 此外,不要忽视旧式方法,深入了解现代图书馆有时会出现用于表现和轻松目的的语法风格 . 您的目标应始终是支持兼容性 .

    现在在大多数元素中,不推荐使用name属性来支持更普遍的id属性 . 但是,在某些情况下,特别是表单字段( <button><input><select><textarea> ),name属性仍然存在,因为仍然需要为表单提交设置名称 - 值对 . 此外,我们发现某些元素(尤其是框架和链接)可能会继续使用name属性,因为它通常可用于按名称检索这些元素 .

    id和name之间有明显的区别 . 通常,当名称继续时,我们可以设置相同的值 . 但是,id必须是唯一的,并且在某些情况下名称不应该 - 认为单选按钮 . 遗憾的是,id值的唯一性虽然被标记验证所捕获,但并不像它应该的那样一致 . 浏览器中的CSS实现将设置共享id值的对象的样式;因此,在运行时之前,我们可能无法捕获可能影响JavaScript的标记或样式错误 .

    这取自JavaScript- The Complete Reference by Thomas-Powell 一书

  • 8

    表单输入元素的ID与元素中包含的数据无关 . ID用于使用JavaScript和CSS挂钩元素 . 但是,name属性在浏览器发送到服务器的HTTP请求中用作与value属性中包含的数据关联的变量名 .

    例如:

    <form>
        <input type="text" name="user" value="bob">
        <input type="password" name="password" value="abcd1234">
    </form>
    

    提交表单时,表单数据将包含在HTTP标头中,如下所示:

    If you add an ID attribute, it will not change anything in the HTTP header. It will just make it easier to hook it with CSS and JavaScript.

  • 0

    如果您没有使用表单自己的提交方法向服务器发送信息(而是使用javascript进行操作),您可以使用name属性将额外信息附加到输入 - 而不是将其与隐藏的输入值配对,但看起来更整洁,因为它已纳入输入 .

    这个位目前仍然可以在Firefox中使用,虽然我想将来它可能无法通过 .

    只要您不打算以旧式方式提交,就可以有多个具有相同名称值的输入字段 .

  • 4

    下面是id属性的一个有趣用法 . 它在标记内使用,用于标识边界之外的元素的表单,以便它们将包含在表单中的其他字段中 .

    <form action="action_page.php" id="form1">
     First name: <input type="text" name="fname"><br>
     <input type="submit" value="Submit">
     </form>
    
     <p>The "Last name" field below is outside the form element, but still part of the form.</p>
     Last name: <input type="text" name="lname" form="form1">
    
  • 84

    Id:1)它用于通过文档对象模型识别HTML元素(通过Javascript或使用CSS设置样式) . 2)预计Id在页面内是唯一的 .

    Name对应于表单元素,并标识发回服务器的内容 . 示例:

    <form action="action_page.php" id="Myform">
     First name: <input type="text" name="FirstName"><br>
     <input type="submit" value="Submit">
     </form>
    
     <p>The "Last name" field below is outside the form element, but still part of the form.</p>
     Last name: <input type="text" name="LastName" form="Myform">
    
  • 0

    ID我用于唯一标识元素 .

    名称用于表单 . 甚至你提交表格的时候 . 如果你不提供任何名字,将不会提交任何内容 . 而只有name属性的那些会出去 .

  • 8

    根据个人经验并根据W3学校的属性描述:

    ID是全局属性,几乎适用于HTML中的所有元素 . 它用于唯一标识Web页面上的元素,其值主要从前端访问(通常通过JavaScript或jQuery) .

    name是一个对HTML中的特定元素(如表单元素等)有用的属性 . 它的值主要发送到后端进行处理 .

    https://www.w3schools.com/tags/ref_attributes.asp

相关问题