HTML：名称和ID属性可以始终使用相同的标识符吗？

Question

基本上，“name”属性用于服务器端编程（通过请求发送名称/值对），而“id”属性用于客户端编程（即JavaScript和CSS）。

但是，两者本质上都具有相同的功能-提供元素的唯一标识。为了不使事情过于复杂，最好是一个物体只有一个标识符。

因此，问题是：对于需要“id”和“name”的标记：

是否有任何理由选择不同的标识符用于名称和ID属性？是否存在需要不同标识符的用例？是否存在语法差异？ （例如，您可以使用“myarray [123]”作为名称属性，而PHP将正确理解并创建数组，这是否也可以用于类似于JavaScript或CSS中的ID属性 - 如果不是，那么它是语法错误还是只是一个有效的带括号的标识符？）它们都区分大小写吗？

- Roland Seuhs

Answer 1

有没有选择不同标识符作为名称和id属性的原因？

有。ID必须是唯一的，名称则不必如此。对于单选按钮组中的成员，名称必须相同，因此它们不能都具有相同的ID。实际上可以，但通过ID访问元素将会有问题。如果您不通过ID访问它们，那么为什么要有它呢？

是否有需要不同标识符的用例？

是的，单选按钮。只有一个可以具有与其名称相同的ID。但除此之外，几乎没有限制，例如永远不要将表单控件的名称或ID赋予表单本身的方法或属性的名称，例如“submit”，因为它将掩盖表单的同名属性。

另外，名称“_charset_”和“isindex”是特殊的。

我将为您翻译以下内容，涉及编程语言相关知识：

是否存在语法差异？（例如，您可以使用“myarray [123]”作为名称属性，在PHP中，它会正确地理解并创建一个数组，那么在JavaScript或CSS中，id属性也可以以类似的方式使用吗？如果不能，那么这是语法错误还是只是一个带括号的有效标识符？）

是的。名称和id属性值的规则类似，但ID不能包含空格（一些名称的值是特殊的，请参见上文）。在HTML4中，对id属性有更多限制（例如，ids不能以数字开头），但实际上它们没有在浏览器中实现。

一些在名称和id中有效的字符必须用引号作为CSS选择器使用，例如：

<div id="d[]">

CSS选择器是：

#d\[\]

用于选择器 API 的使用：

#d\\[\\]

（例如document.querySelector('#d\\[\\]')。

两者区分大小写吗？

是的。

- RobG

Answer 2

name属性通常不需要是唯一的。一个HTML文档可能有多个表单，每个表单中的元素可能具有与其他表单中名称相同的名称。

如果您正在使用PHP，则可以这样说：

<form>
  <input type="text" name="foo[]" />
  <input type="text" name="foo[]" />
</form>

这会导致PHP将其视为数组并将所有条目包含在其中。名称可能被用作非表单元素的属性，但通常仅在表单内部使用。

另一方面，id属性需要能够在文档中唯一标识给定的DOM元素。您不必强制使用它。如果在两个不同的元素上使用相同的id，则浏览器不会崩溃。但是，如果有两个具有相同id的元素，则最后添加的一个将优先于前面的元素。所以，

document.getElementById( 'foo' )
// or 
$( '#foo' )

将只返回多个元素中的一个。

id可用于标识文档中的任何元素，不限于表单内。

- fallenland

Answer 3

回答标题中的问题：是的，每当一个元素的语法允许使用“name”属性时，其值可以与“id”属性值相同。这源于“name”属性的声明：其值为任何字符串，并且唯一强加的约束与“a”元素有关；对于它，要求是“name”属性值不能匹配另一个元素的“id”属性值（但如果存在，则必须匹配同一元素的“id”属性值）。

为了回答问题中的假设：在表单字段元素中，name属性确实主要用于服务器端处理；但是其他各种元素可能会有name属性，用于不同的目的。id属性在客户端编程中很有帮助，但它还具有创建目标锚点的效果，以便可以通过同一文档或另一个文档中的链接引用该元素。从技术上讲，“需要”同时使用id和name甚至其中之一的标签并不存在；它们是否被使用取决于实际目的。name属性不需要唯一，并且它并不意味着提供唯一标识。例如，您可以拥有任意数量的具有相同name属性的input元素。 id的语法在HTML规范中一直受到限制，但浏览器非常宽容，HTML5 PR只有以下限制：值不能为空（即必须至少包含一个字符），不能包含空格字符，并且在文档中必须是唯一的（即没有两个元素可以具有相同的id属性值）。 name的语法一直是自由的。除了a元素的特殊规则外，唯一的限制是该值不能为空。 id和name属性值都区分大小写。出于遗留原因，a元素的特殊规则对大小写敏感性有限制。

有许多可能原因导致您希望使元素的id和name不同。例如，当与需要非常长和复杂名称的现有服务器端脚本进行接口时，必须在name属性中使用它们，但可以选择您的id属性。

当写id和name属性值时所做的选择会产生后果，但这取决于使用值的上下文。例如，如果id属性值以数字开头，则由于CSS语法（但必须进行转义），它不能直接用于CSS选择器。同样，您可以使用JavaScript中的值取决于您使用的语法方式，但是您总是可以以某种方式引用它们。

- Jukka K. Korpela