HTML表单中的`name`属性有什么作用？

Question

name 属性在 HTML 表单中有何用途？据我所知，你无法在提交表单时读取表单名称，也无法使用它进行其他操作。它的作用是什么？

- Yarin

---

我花了一些时间才意识到你只是在关注<form>标签上的name属性，而不是<form>标签内的<input>标签上的name属性。 - Don Cheadle

Answer 1

简而言之，可能有些过于简单化：它用于那些不理解document.getElementById的浏览器，代替id。

现在它已经没有真正的作用了。这是浏览器战争早期遗留下来的产物，在确定如何提交表单时使用name描述控件值，使用id标识页面内元素之前。

- Quentin

---

好的，感谢您的选择。是的，真正的答案。谢谢。我不知道浏览器不能理解document.getElementById，我猜我们可以跳过那些浏览器，对吗？ - Wesley Murch

@charles，只是为了澄清，任何时候当你想要将表单数据发送到服务器时，name属性是必须的。然而，问题是关于 <form> 元素本身的 name 属性。请注意不改变原意，尽可能使翻译更通俗易懂。 - gxc

问题是关于<form>元素而不是<input>元素。不同的元素对于name属性有不同的定义。 - Quentin

请注意，有关表单的name属性在HTML5中并没有被弃用。 - Knight Yoshi

Answer 2

根据规范：

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

- Matt Ball

---

有趣的是，我以前从未需要在集合中区分表单-也许这才是真正的用例？ - Yarin

@Yarin — 你可以使用 id 来实现。 - Quentin

@Quentin- 好的，所以这显然是另一个多余的用例 - Yarin

让我们在聊天中继续这个讨论。 - user719662

@Yarin，你可以使用“name”来区分表单的语义，而使用“id”在CSS中选择它们。我想这就是WHATWG在这里的想法。 - user719662

Answer 3

当你给一个元素分配了一个名称后，你可以通过 document.name_of_element 在你的代码中引用该元素。这不能用于区分同名的多个字段，但它允许使用类似如下的快捷方式:

<form name="myform" ...>

document.myform.submit();

代替

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

- Marc B

---

你可以通过ID来实现这个，所以如果这是唯一的用例，那么它并不重要。 - Yarin

@vaxquis window.id，或者只使用id，因为window是全局的，似乎可以工作。 - user982671

Answer 4

这是MDN的说明:

name
表单名。在HTML 4中，它已被弃用（应使用id代替）。在HTML 5中，它必须在文档中的所有表单中唯一且不为空字符串。

（来自<form>, Attributes, name）

我觉得有点混淆，因为在HTML 4中被弃用，但在HTML 5中却要求它必须唯一且不为空字符串（如果根本没有指定name属性，则不适用此要求）。但我认为可以肯定的是，任何它曾经服务过的目的都已经被 id 属性取代了。

- Sean the Bean

---

我认为这是一个很好的答案。在阅读了 MDN 文档之后，这也是我能得出的唯一结论。 - Noldorin

在HTML4中被弃用的一些元素和属性在HTML5中以稍微不同的含义回归。我认为small就是其中之一，原始含义仅为大小，但现在它已经具有了语义含义，例如“小字体”。我还没有找到更多关于此事的信息，但name属性在HTML5中可能也已被重新定义。 - Manngo

当您访问上述链接的MDN页面时，将不再找到“表单的名称。在HTML 4中，其使用已被弃用...”这个陈述。 - thdoan

当你访问上面链接的MDN页面时，再也找不到“表单的名称。在HTML 4中，它的使用已经不推荐了…”这个陈述了。 - undefined

Answer 5

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" 是成员元素的名称的风险（因为 length 是 HTMLCollection 的保留属性），则可以使用更简洁的符号表示法：

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

DOM Living Standard 2019 March 29

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

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

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

返回集合中第一个元素，其满足以下至少一项条件： 具有ID为key； 在HTML命名空间中且具有名称属性值为key。

- codechimp

Answer 6

您可以将name属性用作“额外信息”属性 - 与隐藏输入类似 - 但这会使额外信息与表单绑定在一起，这样就更容易阅读/访问。

- Jon Bray

---

不要那样做。隐藏输入包含将提交到服务器的数据，表单元素的“名称”属性不会被提交。如果您想提供额外的数据仅供客户端代码访问，则“data-*”属性专门用于此目的。 - Quentin