【问题标题】：Difference between id and name attributes in HTMLHTML中id和name属性的区别
【发布时间】：2010-11-26 17:22:07
【问题描述】：

id 和 name 属性有什么区别？它们似乎都具有提供标识符的相同目的。

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

【问题讨论】：

stackoverflow.com/questions/7470268/html-input-name-vs-id有关于这个主题的非常好的帖子
这个最全面的答案是Farhan Shirgill Ansari's answer（没有说明它的正确性）。

标签： html attributes

【解决方案1】：

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

当然，不仅如此，但它肯定会让你朝着正确的方向思考。

【讨论】：

除了单选按钮还有其他用途吗？？我认为除此之外应该有很大的不同？？？
@Prageeth：不同之处在于“名称”从浏览器传输到服务器，并且可以不同于“id”。人们想要这种差异的原因有很多。例如，您的服务器端语言/框架可能需要提交的值具有特定名称，但您的 javascript 最适合使用 id 中完全不同的东西。
通俗地说，id 是你的前端（CSS、JS）使用的，而name 是你的服务器接收并可以处理的。这基本上就是 Greeso 的回答所说的。
最好说：发送数据时name属性是必需的...而不是：name属性是在发送数据时使用... 因为任何缺少 name 属性的表单数据都不会被传输（或者实际上根本不会根据 HTML 进行处理）规格）
@IsmaelHarun 虽然您使用的代码似乎将 name 和 id 视为相同（特别是如果您使用 AJAX 编写 SPA 并且没有提交表单），但 name 和 id 仍然非常不同。如果要在表单提交时将字段值发送回服务器，则需要名称。 ID 用于正常的 JavaScript DOM 操作。

【解决方案2】：

为表单控件使用name 属性（例如<input> 和<select>），因为这是在表单提交时发生的POST 或GET 调用中使用的标识符。

当您需要使用 CSS、JavaScript 或 a fragment identifier 处理特定 HTML 元素时，请使用 id 属性。也可以按名称查找元素，但通过 ID 查找元素是 simpler and more reliable。

【讨论】：

这非常清楚。那么，我是否可以推断，“名称”几乎是发送到服务器的参数“标识符”的表示？这个问题部分地由接受的答案回答，但没有放在那些条款中。
@Thomas：name 和 id 之间根本没有必然联系。该标识符唯一地标识页面上的特定 HTML 元素。相比之下，HTML 表单元素的name 属性不必是唯一的，而且通常不是唯一的，例如单选按钮或具有多个<form> 元素的页面。对name 和id 使用相同的字符串是传统的做法，它们都用于单个 HTML 元素，但没有什么能让你这样做。
@WarrenYoung 表单标签的 name 属性怎么样。据我所知，它的值也必须是唯一的，所以我很困惑为什么这个标签有一个 name 属性与 id 属性做同样的事情。在我看来，表单标签的 name 属性已经过时，不应该使用。相反，应该使用 id 属性。我没有测试过，但我认为如果你有多个同名的表单，最后一个表单会覆盖之前的表单。除了实际上不允许这样做之外，还有多少 HTML 代码不符合规则。

【解决方案3】：

这里是一个简短的总结：

id用于通过Document标识HTML元素对象模型（通过 JavaScript 或 CSS 样式）。 id 预计在页面中是唯一的。
name对应form元素，标识发布的内容返回服务器。

【讨论】：

【解决方案4】：

我的想法和使用方式很简单：

id 用于 CSS 和 JavaScript/jQuery（它必须在页面上是唯一的）。

当通过 HTML 提交表单时，

name 用于服务器上的表单处理（它在表单中必须是唯一的 - 在某种程度上，请参阅下面的 Paul 的评论）。

【讨论】：

不完全正确 - Name 属性在表单中不必是唯一的，因为它可以将单选按钮链接在一起。
另外，您可能会感到惊讶，但 PHP 并不是世界上唯一的服务器语言。
@seesharper - 这很有趣。我什至投票给你！嗯，是的，这并不让我感到惊讶:)

【解决方案5】：

见id= vs name=：

有什么区别？简短的回答是，两者都用，不用担心。但如果你想了解这种愚蠢，这里是瘦的：

id= 用作这样的目标：<some-element id="XXX"></some-element> 用于这样的链接：<a href="#XXX"。

name= 还用于标记消息中的字段，当您在表单中点击提交时，使用 HTTP（超文本传输协议）GET 或 POST 发送到服务器。

id= 标记供 JavaScript 和 Java DOM（文档对象模型）使用的字段。 name= 中的名称在表单中必须是唯一的。 id= 中的名称在整个文档中必须是唯一的。

有时 name= 和 id= 名称会有所不同，因为服务器期望同一文档中的各种形式或与上面示例中的形式相同的各种单选按钮具有相同的名称。 id= 必须是唯一的； name= 不能是。

JavaScript 需要唯一的名称，但是这里已经有太多的文档没有唯一的 name= 名称，所以 W3 人发明了要求唯一的 id 标签。不幸的是，旧的浏览器不理解它。因此，您的表单中需要两种命名方案。

注意：<a> 等标签的属性“名称”在HTML5 中不受支持。

【讨论】：

有点混乱......我认为在某些方面是错误的。是不是这样：name 对于<form> 提交中的<input> 标记很重要，因为HTTP 中使用了参数，而id 只是一个唯一标识符
另外，这个（未注册的）用户正在链接到他自己的页面（他的个人资料上的链接是mindprod.com/jgloss）。我不知道这对 SO 是否有问题，但考虑到相当混乱的 sn-p 感觉不合适。

【解决方案6】：

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

字段的 Name 标记 - 每个 form 都是唯一的 - 除非您正在执行要传递给 PHP/服务器端处理的数组。您可以通过 JavaScript 按名称访问它，但我认为它不会作为节点出现在 DOM 中，或者可能存在一些限制（例如，如果我没记错的话，您不能使用 .innerHTML）。

【讨论】：

单选按钮必须共享相同的名称才能正常运行 - 每个表单都不是唯一的。
我的错误。尽管为了澄清，对于文本输入、文本区域等，使用名称标签来识别它们。不必唯一。
标签？不是属性吗？

【解决方案7】：

通常，假设 name 总是被 id 取代。这在某种程度上是正确的，但实际上对于表单字段和框架名称 而言并非如此。例如，对于表单元素，name 属性用于确定要发送到服务器端程序的 名称-值对，不应将其删除。 浏览器不会以这种方式使用 id。为了安全起见，您可以在表单元素上使用 name 和 id 属性。因此，我们将编写以下内容：

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

为确保兼容性，在定义了 name 和 id 属性值时匹配两者是个好主意。但是，请注意 - 某些标签，尤其是单选按钮，必须具有非唯一的 name 值，但需要唯一的 id 值。

再次强调，id 不仅仅是 name 的替代品；它们的目的不同。此外，不要忽视旧式方法，深入了解现代库会发现这种语法风格有时用于性能和易用性目的。您的目标应该始终支持兼容性。

现在在大多数元素中，name 属性已被弃用，取而代之的是更普遍的 id 属性。但是，在某些情况下，尤其是表单字段（<button>、<input>、<select> 和 <textarea>），name 属性仍然存在，因为它仍然需要设置表单提交的名称-值对。此外，我们发现某些元素，尤其是框架和链接，可能会继续使用 name 属性，因为它通常对于按名称检索这些元素很有用。

id 和 name 之间有明显的区别。很多时候，当 name 继续时，我们可以将值设置为相同。然而，id 必须是唯一的，而 name 在某些情况下不应该——想想单选按钮。可悲的是，id 值的唯一性，虽然被标记验证所捕获，但并不像应有的那样一致。浏览器中的 CSS 实现将为共享 id 值的对象设置样式；因此，在运行时之前，我们可能无法捕获可能影响 JavaScript 的标记或样式错误。

这摘自 Thomas-Powell 的 JavaScript - The Complete Reference 一书。

【讨论】：

另一个不习惯只让 id 匹配名称的原因：您可能在一个页面上有两个表单需要提交相同的数据（例如两个搜索字段）。在这种情况下，name 应该相同（服务器端代码不关心提交的是哪个），但id 必须不同（因为它必须在整个页面中是唯一的）。

【解决方案8】：

<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>

【讨论】：

解释一下。例如，想法/要点是什么？问题是“id 和name 属性有什么区别？”。你能详细说明吗？请通过editing (changing) your answer 回复，而不是在 cmets 中（without "Edit:"、"Update:" 或类似的 - 答案应该看起来像是今天写的)。

【解决方案9】：

下面的论坛帖子有相同基本问题的答案，但基本上，id 用于脚本识别，name 用于服务器端。

id vs. name attribute for HTML controls

【讨论】：

【解决方案10】：

name 不推荐用于链接目标，并且在 HTML5 中无效。它至少在最新的 Firefox (v13) 中不再有效。将<a name="hello"> 更改为 <a id="hello">。

目标不必是<a> 标记。它可以是<p id="hello"> 或<h2 id="hello"> 等，通常是更简洁的代码。

正如其他帖子所说的那样，name 仍然在表单中使用（需要）。 META标签中仍然使用它。

【讨论】：

您的意思是“链接标签不推荐使用名称”而不是“链接目标不推荐使用名称”？事实上，链接目标可以是 iframe。如果您没有为该 iframe 指定名称属性，则目标属性不适用于链接。对于所有浏览器，这种行为仍然存在，并且符合 HTML5。
我在这里试图弄清楚如何制作一个链接 anchor，就像当你有一个 URL 时你去哪里 to 的标记以“#something”结尾。我能说的最好的，在 4 之前的 html 中，它必须是。在 html 4 中，它是（匹配），而在 html 5 中，，尽管 id 可以是任何东西的“全局属性”。我无法弄清楚除了 id 之外的名称是否在 html 5 中的中是 tolerated 的。好吧，无论我碰巧有什么设置，都可以进行实验......
虽然a标签name属性已被弃用，但包括Firefox在内的浏览器仍然支持它，所以答案不正确。是的，对于锚点（目标位置），您现在应该在元素上使用 id (<h2 id="hello">)，但这并不是 OP 真正要求的。

【解决方案11】：

name 与 id

名字

元素的名称。例如，服务器用来识别表单中的字段提交。
支持元素为<button>、<form>、<fieldset>、<iframe>、 <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta> 和 <param>
名称不必是唯一的。

id

通常与 CSS 一起使用以设置特定元素的样式。这个的价值属性必须是唯一的。
Id 是global attribute。全局属性可用于所有元素，但属性可能对某些元素没有影响。
在整个文档中必须是唯一的。
此属性的值不能包含空格，与类属性，允许使用空格分隔的值。
使用除 ASCII 字母和数字、“_”、“-”和“.”以外的字符可能会导致兼容性问题，因为它们在 HTML 4 中是不允许的。尽管在 HTML 5 中取消了此限制，但应以 ID 开头带有兼容性的字母。

【讨论】：

我见过name 属性用于样式元素。我认为这是无效的？

【解决方案12】：

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

例如：

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

当提交表单时，表单数据会包含在 HTTP 头中，如下所示：

如果添加 ID 属性，它不会更改 HTTP 标头中的任何内容。它只会让它更容易与 CSS 和 JavaScript 挂钩。

【讨论】：

【解决方案13】：

<body>
<form action="">
    <label for="username">Username</label>
    <input type="text" id="username" name="username">
    <button>Submit!</button>
</form>
</body>

正如我们在这里看到的，“id”和“for”元素是相互关联的。如果您单击标签（用户名），则输入字段将突出显示（这对移动用户很有用，被认为是一种很好的做法）。

另一方面，“名称”元素在提交表单时很有用。无论您在输入字段中输入什么，它都会显示在 URL 上。请看附图。

【讨论】：

【解决方案14】：

如果您不使用表单自己的提交方法向服务器发送信息（而是使用 JavaScript），您可以使用 name 属性将额外信息附加到输入 -就像将它与隐藏的输入值配对，但它看起来更整洁，因为它被合并到输入中。

这个位目前在 Firefox 中仍然有效，尽管我想将来它可能不会被允许通过。

只要您不打算提交老式的方式，您可以有多个具有相同名称值的输入字段。

【讨论】：

【解决方案15】：

身份证：

用于通过Document Object Model (DOM) 识别 HTML 元素（通过 JavaScript 或使用 CSS 设置样式）。
Id 在页面中应该是唯一的。

名称对应于表单元素并标识回发到服务器的内容。

例子：

<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">

【讨论】：

【解决方案16】：

ID 用于唯一标识一个元素。

Name 用于表单。尽管您提交了表单，但如果您不提供任何名称，则不会提交任何内容。因此，表单元素需要一个名称才能被“get 或 push”等表单方法识别。

并且只有具有 name 属性的才会消失。

【讨论】：

【解决方案17】：

在这个问题一直存在的所有时间里，我很懊恼（也许有点难过）没有人想到提到accessibility，尽管它总是很重要，但一直在不断获得管理和软件工程师的支持（仅来自我个人的观察；没有确凿的数据支持）。

我可以提供的一个统计数据是 (source)：

因此，对可访问性缺陷的认识呈现出稳步增长的趋势。同一参考文献提到，从这些数字中可以看出，每小时至少会提起一场诉讼！

那么可访问性对name 和id 有何影响？

根据World Wide Web Consortium (W3C)：

标签的for 属性必须与标签的id 完全匹配表单控件。

【讨论】：

【解决方案18】：

根据个人经验，根据W3Schools属性描述：

ID 是一个全局属性，几乎适用于 HTML 中的所有元素。它用于唯一标识网页上的元素，其值主要是从前端访问（通常通过 JavaScript 或 jQuery）。

name 是对 HTML 中的特定元素（如表单元素等）有用的属性。它的值主要是发送到后端进行处理。

HTML Attribute Reference

【讨论】：

【解决方案19】：

下面是 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">

【讨论】：

【解决方案20】：

id 和 name 之间没有字面上的区别。

name 是一个标识符，在浏览器发送的 HTTP 请求中用作一个变量名，与元素的 value 属性中包含的数据相关联。

另一方面，id 是浏览器、客户端和 JavaScript 的唯一标识符。因此表单需要一个id，而它的元素需要一个name。

id 更具体地用于向唯一元素添加属性。在 DOM 方法中，Id 在 JavaScript 中用于引用您希望执行操作的特定元素。

例如：

<html>

<body>
    <h1 id="demo"></h1>

    <script>
        document.getElementById("demo").innerHTML = "Hello World!";
    </script>
</body>

</html>

同样可以通过name属性来实现，但是最好在表单中使用id，而name用于像输入标签或选择标签这样的小表单元素。

【讨论】：

【解决方案21】：

id 会给元素一个 id，所以一旦你写了真正的代码（比如 JavaScript），你就可以使用 id 来读取元素。 name 只是一个名称，所以用户可以看到元素的名称，我猜。

示例：

<h1 id="heading">text</h1>
<script>
  document.getElementById("heading"); // Reads the element that has the id "heading".
</script>

// You can also use something like this:
document.getElementById("heading").value; // Reads the value of the selected element.

【讨论】：

当然，您也可以通过名称属性访问元素：document.querySelector('[name="heading"]')（继续举例）。