HTML 表单的“名称”属性有什么意义？答案

【问题标题】：What's the point of HTML forms `name` attribute?HTML 表单的“名称”属性有什么意义？
【发布时间】：2012-02-15 07:24:00
【问题描述】：

HTML 表单上的name 属性有什么意义？据我所知，您无法在提交时阅读表单名称或对其进行任何其他操作。它是否有目的？

【问题讨论】：

我花了一段时间才意识到您只是想知道<form> 标记上的name 属性，而不是<form> 内<input> 标记上的name 属性

标签： html forms

【解决方案1】：

简而言之，可能有点过于简单化了：它被用于不理解 document.getElementById 的浏览器而不是 id。

如今，它没有任何实际用途。这是浏览器战争早期的遗留问题，在使用name 描述如何在提交表单时发送控制值和使用id 识别页面内的元素之前已经解决了。

【讨论】：

是的，一个真实的答案。谢谢你。不知道浏览器不理解document.getElementById.. 我想我们可以跳过那些，对吧？
@charles，澄清一下，只要您想将表单数据发送到服务器，name 属性是必需的。但是，问题在于 <form> 元素本身的 name 属性。
@charles — 问题是关于 <form> 元素而不是 <input> 元素。不同元素的 name 属性定义不同。
@Luchostein 需要注意的是，有关表单的 name 属性在 HTML5 中不被弃用。

【解决方案2】：

来自the specification：

name 属性表示form 在forms 集合中的名称。

【讨论】：

有趣——我以前从未区分集合中的表单——也许这是真正的用例？
@Yarin — 你可以使用id。
@Quentin- ok，所以这显然是另一个多余的用例
让我们continue this discussion in chat.
@Yarin 您可以使用name 来区分表单的语义，并使用id 在CSS 中选择它们。我认为这就是 WHATWG 的想法。

【解决方案3】：

为元素指定名称后，您可以在整个代码中通过document.name_of_element 引用该元素。当您有多个同名字段时无法判断，但它确实允许使用以下快捷方式：

<form name="myform" ...>

document.myform.submit();

而不是

document.getElementsByName('myform')[0].submit();

【讨论】：

你可以通过 ID 来做这件事，所以如果这是唯一的用例，它并不重要
@vaxquis window.id，或者只是 id，因为 window 是全球性的，似乎可以工作

【解决方案4】：

以下是MDN 对此的评价：

name
表单的名称。在 HTML 4 中，不推荐使用它（应该使用id 代替）。它在文档中的表单中必须是唯一的，而不仅仅是 HTML 5 中的空字符串。

（来自<form>, Attributes, name）

当它在 HTML 4 中被弃用时，我发现它在 HTML 5 中必须是唯一的、非空的字符串，我觉得这有点令人困惑。（我猜这个要求只适用于完全指定了 name 属性的情况？）。但我认为可以肯定地说，它曾经服务的任何目的都已被id 属性所取代。

【讨论】：

我认为答案很好。在阅读 MDN 文档后，这也是我能得出的唯一结论。
一些在 HTML4 中被弃用的元素和属性在 HTML5 中以稍微不同的含义卷土重来。我认为small 就是其中之一，最初的含义只是为了大小，但现在它具有了诸如“小字号”之类的语义含义。我还没有找到更多关于此的信息，但name 属性也可能已在 HTML5 中重新定义。

【解决方案5】：

您可以将 name 属性用作“额外信息”属性 - 类似于使用隐藏输入 - 但这会将额外信息绑定到表单中，从而使其阅读/访问更简单。

【讨论】：

不要那样做。隐藏的输入包含将提交给服务器的数据。表单元素的 name 属性不会。如果您只想提供额外的数据供客户端代码访问，那么data-* 属性就是为此目的而明确提供的。

【解决方案6】：

name 属性与id 相比并不完全冗余。如前所述，它可以与<forms> 一起使用，但鲜为人知的是它也可以与任何HTMLCollection 一起使用，例如任何DOM 元素的children 属性。

HTMLCollection，除了是一个类似数组的对象外，还将具有与任何命名成员相称的命名属性（或在非唯一名称的情况下第一次出现）。检索特定的命名节点很有用。

例如，在以下 HTML 示例中：

<div id='person1'>
   <span name='firstname'>John</span>
   <span name='lastname'>Doe</span>
   <span name='middlename'></span>
</div>

<div id='person2'>
   <span name='firstname'>Jane</span>
   <span name='lastname'>Doe</span>
   <span name='middlename'></span>
</div>

通过命名每个子元素，可以快速有效地检索命名元素，例如lastname，如下所示：

document.getElementById('person1').children.namedItem('lastname')

...如果不存在“长度”是成员元素名称的风险（因为length 是HTMLCollection 的保留属性），则可以使用更简洁的符号：

document.getElementById('person1').children.lastname

DOM Living Standard 2019 March 29

HTMLCollection 对象是元素的集合...

namedItem(key) 方法在调用时必须运行以下步骤：

如果key为空字符串，则返回null。

返回集合中至少满足以下一项的第一个元素：它有一个关键的 ID；它在 HTML 命名空间中，并且有一个 name 属性，其值为 key；

【讨论】：