最佳实践：通过 HTML id 或 name 属性访问表单元素？

Question

任何经验丰富的 JavaScript 开发人员都知道，有很多（太多）方法可以做同样的事情。例如，假设您有一个如下文本字段：

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

在 JavaScript 中有很多方法可以访问它：

[1]  document.forms[0].elements[0];
[2]  document.myForm.foo;
[3]  document.getElementById('foo');
[4]  document.getElementById('myForm').foo;
     ... and so on ...

方法 [1] 和 [3] 在 Mozilla Gecko 文档中有详细记录，但都不是理想的。 [1] 太笼统而无用，[3] 需要一个 id 和一个名称（假设您要将数据发布到服务器端语言）。理想情况下，最好只有一个 id 属性或一个 name 属性（两者都有有点冗余，特别是如果 id 对于任何 css 都不是必需的，并且增加了拼写错误的可能性等)。

[2] 似乎是最直观的并且似乎被广泛使用，但我没有在 Gecko 文档中看到它的引用，我担心前向兼容性和跨浏览器兼容性（当然我希望尽可能符合标准）。

那么这里的最佳做法是什么？任何人都可以指出 DOM 文档或 W3C 规范中可以解决此问题的内容吗？

注意我对非库解决方案（jQuery/Prototype）特别感兴趣。

Answer 1

只给你的表单一个id，你的输入一个name：

<form id="myform">
  <input type="text" name="foo">

那么，访问您的输入元素最符合标准且问题最少的方式是通过：

document.getElementById("myform").elements["foo"]

最好使用.elements["foo"] 而不是.foo，因为后者可能会返回名为“foo”而不是HTML 元素的属性！

Answer 2

[1] document.forms[0].elements[0];

“No-omg-never！”当我看到这种元素访问方法时，我就想到了。这样做的问题是它假设 DOM 是一个正常的数据结构（例如：一个数组），其中元素顺序无论如何都是静态的、一致的或可靠的。我们知道 99.9999% 的情况并非如此。在表单中重新排序或input 元素，在相关表单之前的页面中添加另一个form，或移动相关表单都是此代码中断的情况。短篇小说：这是非常脆弱的。只要您添加或移动某些东西，它就会损坏。

[2] 文档.myForm.foo;

我和Sergey ILinsky 在这件事上：

• 通过引用id 属性访问任意元素：document.getElementById("myform");
• 按名称访问命名的表单元素，相对于它们的父表单元素：document.getElementById("myform").foo;

我对这种方法的主要问题是name 属性在应用于表单时是无用的。该名称不会作为 POST/GET 的一部分传递给服务器，并且不适用于哈希样式书签。

[3] document.getElementById('foo');

在我看来，这是最可取的方法。直接访问是最简洁明了的方法。

[4] document.getElementById('myForm').foo;

在我看来，这是可以接受的，但过于冗长。方法#3更可取。

---

我碰巧在看video from Douglas Crockford，他就这个话题发表了看法。兴趣点位于 -12:00。总结一下：

• 文档集合（document.anchor、document.form 等）已过时且不相关（方法 1）。
• name 属性用于命名事物，而不是访问它们。它用于命名窗口、输入字段和锚标记等内容。
• “ID 是您应该用来唯一标识一个元素以便您可以访问它的东西。它们（名称和 ID）过去是可以互换的，但现在已经不是了。”

所以你有它。从语义上讲，这是最有意义的。

Answer 3

要访问放置在表单中的命名元素，最好使用form 对象本身。

要访问 DOM 树中有时可能在表单中找到的任意元素，请使用 getElementById 和元素的 id。

Answer 4

这并没有真正回答你的问题，而只是在这部分：

[3] 需要一个 id 和一个名字...同时拥有这两者有点多余

无论如何，您很可能需要在每个表单字段上都有一个id 属性，以便您可以将其<label> 元素与其关联，如下所示：

<label for="foo">Foo:</label>
<input type="text" name="foo" id="foo" />

这是可访问性所必需的（即，如果您不关联表单标签和控件，为什么您会如此讨厌盲人？）。

这有点多余，尽管当您有复选框/单选按钮时，它们中的几个可以共享name。最终，id 和 name 用于不同的目的，即使两者通常设置为相同的值。

Answer 5

我更喜欢第五种方法。那是
[5] 使用特殊的 JavaScript 标识符 this 将表单或字段对象从事件处理程序传递给函数。

具体来说，对于表单：

<form id="form1" name="form1" onsubmit="return validateForm(this)">

和

// The form validation function takes the form object as the input parameter
function validateForm(thisForm) {
  if (thisform.fullname.value !=...

使用这种技术，函数永远不必知道
- 在页面中定义表单的顺序，
- 表单 ID，也不是
- 表格名称

同样，对于字段：

<input type="text" name="maxWeight">
...
<input type="text" name="item1Weight" onchange="return checkWeight(this)">
<input type="text" name="item2Weight" onchange="return checkWeight(this)">

和

function checkWeight(theField) {
  if (theField.value > theField.form.maxWeight.value) {
    alert ("The weight value " + theField.value + " is larger than the limit");
    return false;
  }
return true;
}

在这种情况下，函数不必知道特定权重字段的名称或 id，尽管它确实需要知道权重限制字段的名称。

Answer 6

这有点旧，但我想添加一个我认为相关的内容。
（我的意思是评论上面的一两个线程，但似乎我需要声望 50，而我在写这篇文章时只有 21。:)）
只想说，有时通过名称而不是 id 访问表单的元素要好得多。我不是在谈论表格本身。表单，OK，你可以给它一个id，然后通过它访问它。但是，如果您在表单中有一个单选按钮，则将其用作单个对象（获取和设置其值）要容易得多，据我所知，您只能通过名称来执行此操作。

示例：

<form id="mainForm" name="mainForm">
    <input type="radio" name="R1" value="V1">choice 1<br/>
    <input type="radio" name="R1" value="V2">choice 2<br/>
    <input type="radio" name="R1" value="V3">choice 3
</form>

您可以通过使用
整体获取/设置单选按钮R1的选中值 document.mainForm.R1.value
或
document.getElementById("mainForm").R1.value
因此，如果您想要一个单一的样式，您可能希望始终使用此方法，而不管表单元素的类型如何。我，我非常喜欢按名称访问单选按钮和按 ID 访问文本框。

Answer 7

作为老式的，我一直使用“document.myform.myvar”语法，但最近我发现它在 Chrome 中失败了（在 Firefox 和 IE 中正常）。它是一个 Ajax 页面（即加载到 div 的 innerHTML 属性中）。也许 Chrome 没有将表单识别为主文档的元素。我改用 getElementById（不引用表单），它工作正常。

Answer 8

只是为了补充已经说过的所有内容，您可以使用 name 或 id 访问 inputs，最好使用 Object 表单的 elements 属性，因为没有它，您可能会获得以下属性名为“foo”的表单而不是 HTML 元素。根据@Paul D. Waite 的说法，同时拥有 name 和 id 是完全可以的。

var myForm = document.getElementById("myform")
console.log(myForm.foo.value) // hey
console.log(myForm.foo2.value) // hey
//preferable
console.log(myForm.elements.foo.value) // hey
console.log(myForm.elements.foo2.value) // hey

<form id="myform">
  <input type="text" name="foo" id="foo2" value="hey">
</form>

根据HTMLFormElement.elements页面上的MDN

HTMLFormElement 属性元素返回一个 HTMLFormControlsCollection 列出了包含在 元素。独立地，您可以仅获得 使用长度属性的表单控件。

您可以通过以下方式访问返回集合中的特定表单控件 使用索引或元素的 name 或 id。

Answer 9

name 属性效果很好。它提供了对elements 的引用。

parent.children - 将列出所有具有父名称字段的元素。 parent.elements - 将仅列出 form elements，例如 input-text、text-area 等。

var form = document.getElementById('form-1');
console.log(form.children.firstname)
console.log(form.elements.firstname)
console.log(form.elements.progressBar); // undefined
console.log(form.children.progressBar);
console.log(form.elements.submit); // undefined

<form id="form-1">
  <input type="text" name="firstname" />
  <input type="file" name="file" />
  <progress name="progressBar" value="20" min="0" max="100" />
  <textarea name="address"></textarea>
  <input type="submit" name="submit" />
</form>

注意：要使.elements 起作用，parent 必须是<form> 标记。而.children 将适用于任何 HTML 元素 - 例如 <div>、<span> 等。

Answer 10

为了补充其他答案，document.myForm.foo 是所谓的 DOM 级别 0，这是 Netscape 实现的方式，因此即使大多数浏览器都支持它，它也不是真正的开放标准。

Answer 11

表格2还可以，表格3也推荐。

name 和 id 之间的冗余是因为需要保持兼容性。在 HTML5 中，一些元素（例如 img、form、iframe 等）会失去它们的“name”属性，建议只使用他们的 id 从现在开始引用他们 :)

Answer 12

查看此页面：Document.getElementsByName()

document.getElementsByName('foo')[0]; // returns you element.

它必须是“元素”并且必须返回一个数组，因为多个元素可以具有相同的名称。

Answer 13

我的回答会在具体问题上有所不同。 如果我想专门访问某个元素，那么我将使用 document.getElementById()。 一个例子是计算一个人的全名，因为它建立在多个字段之上，但它是一个可重复的公式。

如果我想将元素作为功能结构（表单）的一部分来访问，那么我会使用：

var frm = document.getElementById('frm_name');
for(var i = 0; i < frm.elements.length;i++){
   ..frm.elements[i]..

从业务的角度来看，这也是它的运作方式。循环内的变化伴随着应用程序中的功能变化，因此是有意义的。我主要将其应用于用户友好的验证和防止网络调用检查错误数据。我重复验证服务器端（并添加更多），但如果我可以帮助用户客户端，那么这对所有人都有好处。

对于数据聚合（例如根据表单中的数据构建饼图），我使用配置文档和定制的 JavaScript 对象。那么字段的确切含义相对于其上下文很重要，我是否使用 document.getElementById()。

Answer 14

我更喜欢这个：

document.forms['idOfTheForm'].nameOfTheInputFiled.value;

Answer 15

因为 case [2] document.myForm.foo 是 Internet Explorer 的方言。

所以我更喜欢document.forms.myForm.elements.foo 或document.forms["myForm"].elements["foo"]，而不是它。

Answer 16

老问题，新见解（2021 年）

在阅读并学习了这个问题的一些优秀答案后，需要回到基础并尝试获取更多数据id和name是如何定义的在他们的起源。

结果简单而富有启发性。我总结如下：

---

• 最重要的事实是，到目前为止，id 和 name 如此不同，用途也如此不同，因此它们在不同的部分中定义 的 W3/WHATWG 规范。简而言之：
  • id:
    • 定义为 DOM（Web 文档标准）规范的一部分，而不是 HTML（标记语言）。 所以，id 是 DOM（文档），而不是 HTML（语言）。
    • 其目的直接与文档中节点的唯一标识相关。因此，非常适合访问节点。
    • 必须是唯一的
  • name:
    • 定义为 HTML 规范的一部分，而不是 DOM。 因此，name 是 HTML（语言），而不是 DOM（网络文档）。
    • 其用途直接与表单提交相关 - 表单的结构、其编码类型、发送到服务器的数据（例如通过 https）等等开。

---

• 根据以上数据和作为开发者积累的一些经验，我的主要结论是：
  1. 混淆关于使用id 或name 访问元素 是由一些主要因素造成的：
     • 虽然元素这个术语在 DOM 规范中有明确的定义，但在 HTML 规范中并没有非常明确的定义——它指的是 DOM、xhtml 命名空间等。
     • 我们，开发人员，不喜欢深入研究定义的技术细节（也许我不需要在这里详细说明这个假设），这可能会导致进一步的误解。
     • 因此，术语 元素 被广泛用于指代 HTML 标记（例如，form）和 DOM 节点（尽管 form 是DOM 中的节点，但反之亦然。）
     • JavaScript 提供了多种访问 DOM 中的 事物 的方法，包括基于它自己的东西的方法，例如 (getElementsByTagName、getElementsByName) 这需要一些幕后操作来从 DOM 中检索实际的节点。
     • 一方面，它使开发人员更容易访问这些元素；另一方面，它隐藏了在特定上下文中发挥重要作用的概念和结构。
     • 最终，上述因素会产生混淆，从而引发必要且巧妙的问题，例如引发整个线程的问题。
  2. 在阅读了答案和 cmets，收集了数据，通过分析数据并得出结论，烧毁了一些神经元后，我对问题的回答是：
     • 如果您想保持严格的技术性（并且可能在性能方面有所提升），那么请尽可能使用id 并且有意义 - 例如，在任何地方添加id 是没有意义的;在radio 输入类型中使用id 属性可能没有意义。
     • 如果您想使用 JavaScript 提供的灵活性，但又想兼顾两全其美，我建议您使用 solution provided by @Doin in this thread。
     • 我也很欣赏@paul-d-waite 带来的可访问性因素。 this 回答中也探讨了相同的因素。
     • 请记住，并非尽你所能。

---

参考资料：

1. HTML - name
2. HTML - element
3. DOM - id
4. DOM - element
5. HTML - Living Standard — Last Updated 5 November 2021
6. DOM - Living Standard — Last Updated 18 October 2021

The form element也值得一看

---

Stackoverflow 中的其他参考资料：

was the name attribute really needed in html?

Difference between id and name attributes in HTML

---

奖金：Short and cool distinction between id and name, for the impatient.