参见id=vs name=：

有什么不同？简单的答案是，两者都用，不用担心。但如果你想了解这种愚蠢，这里有一个小问题：id=用作如下目标：<some element id=“XXX”></some element>用于以下链接：<a href=“#XXX”。

name=还用于在表单中点击提交时，使用HTTP（超文本传输协议）GET或POST标记发送到服务器的消息中的字段。id=标记JavaScript和Java DOM（文档对象模型）使用的字段。name=中的名称在表单中必须唯一。id=中的名称必须在整个文档中唯一。有时，名称=和id=名称会有所不同，因为服务器希望同一文档中的不同表单或同一表单中的不同单选按钮具有相同的名称。id=必须唯一；名称=不能为。JavaScript需要唯一的名称，但是这里已经有太多的文档没有唯一的name＝name，所以W3的人发明了需要唯一的id标签。不幸的是，较旧的浏览器不理解它。因此，您需要在表单中使用这两种命名方案。

注意：HTML5中不支持某些标签（如＜a＞）的属性“name”。

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

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

为了确保兼容性，在定义名称和id属性值时，最好使用匹配的值。但是，请注意一些标记，特别是单选按钮，必须具有非唯一的名称值，但需要唯一的id值。

同样，这应该说明id不仅仅是名称的替代品；它们的目的不同。此外，不要轻视旧风格的方法，深入研究现代库可以发现，这种语法风格有时用于提高性能和方便性。你的目标应该总是有利于兼容性。

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

id和name之间有明显的区别。通常，当name继续时，我们可以将值设置为相同。然而，id必须是唯一的，并且在某些情况下名称不应与单选按钮相关联。遗憾的是，id值的唯一性虽然受到标记验证的限制，但并没有达到应有的一致性。浏览器中的CSS实现将为共享id值的对象设置样式；因此，在运行时之前，我们可能无法捕捉到可能影响JavaScript的标记或样式错误。

本文摘自托马斯·鲍威尔的《JavaScript-完整参考》一书。

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

HTML控件的id与name属性

以下是一个简短的总结：

id用于标识文档中的HTML元素对象模型（通过JavaScript或CSS样式）。需要id在页面中是唯一的。name对应于表单元素并标识发布的内容返回到服务器。

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

字段的Name标记（每个表单都是唯一的），除非您正在执行要传递给PHP/服务器端处理的数组。您可以通过JavaScript按名称访问它，但我认为它不会在DOM中显示为节点，或者可能会受到一些限制（例如，如果我回忆正确，您不能使用.innerHTML）。

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

例子：

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