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

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

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

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

using.elements["foo"]而不是 just.foo更可取，因为后者可能返回名为“foo”的表单属性而不是 HTML 元素！

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

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

[2] document.myForm.foo;

我和谢尔盖 ILinsky 在一起：

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

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

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

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

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

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

我碰巧观看了道格拉斯·克罗克福德 (Douglas Crockford)的视频，他就这个问题发表了意见。兴趣点位于-12:00。总结一下：

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

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

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

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

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

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

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

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

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

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

我更喜欢第 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，尽管它确实需要知道权重限制字段的名称。