HTMLFormElement：elements 属性

基线 广泛可用

此功能已得到很好的建立，并且可以在许多设备和浏览器版本中使用。它已在浏览器中可用，自 2015 年 7 月.

HTMLFormElement 属性 elements 返回一个 HTMLFormControlsCollection，其中列出了包含在 <form> 元素中的所有表单控件。

独立地，您可以使用 length 属性获取表单控件的数量。

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

在 HTML 5 之前，返回的对象是 HTMLCollection，HTMLFormControlsCollection 基于此对象。

注意：类似地，您可以使用文档的 forms 属性获取给定文档中包含的所有表单的列表。

值

一个包含表单中所有非图像控件的 HTMLFormControlsCollection。这是一个实时集合；如果表单控件被添加到表单中或从表单中删除，则此集合将更新以反映更改。

返回集合中的表单控件的顺序与其在表单中出现的顺序相同，方法是按照树的先序深度优先遍历。这称为树序。

仅返回以下元素

示例

快速语法示例

在此示例中，我们展示了如何获取表单控件列表以及如何通过索引以及名称或 ID 访问其成员。

html
<form id="my-form">
  <label>
    Username:
    <input type="text" name="username" />
  </label>
  <label>
    Full name:
    <input type="text" name="full-name" />
  </label>
  <label>
    Password:
    <input type="password" name="password" />
  </label>
</form>
js
const inputs = document.getElementById("my-form").elements;
const inputByIndex = inputs[0];
const inputByName = inputs["username"];

访问表单控件

此示例获取表单的元素列表，然后遍历该列表，查找类型为 "text" 的 <input> 元素，以便可以对其执行某种形式的处理。

js
const inputs = document.getElementById("my-form").elements;

// Iterate over the form controls
for (let i = 0; i < inputs.length; i++) {
  if (inputs[i].nodeName === "INPUT" && inputs[i].type === "text") {
    // Update text input
    inputs[i].value.toLocaleUpperCase();
  }
}

禁用表单控件

js
const inputs = document.getElementById("my-form").elements;

// Iterate over the form controls
for (let i = 0; i < inputs.length; i++) {
  // Disable all form controls
  inputs[i].setAttribute("disabled", "");
}

规范

规范
HTML 标准
# dom-form-elements-dev

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。