HTMLFormElement:elements 属性
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
HTMLFormElement
的 elements
属性返回一个 HTMLFormControlsCollection
,其中列出了 <form>
元素中包含的所有表单控件。
你还可以独立使用 length
属性只获取表单控件的数量。
你可以使用索引或元素的 name
或 id
属性访问返回集合中的特定表单控件。
在 HTML 5 之前,返回的对象是一个基于 HTMLFormControlsCollection
的 HTMLCollection
。
备注:
同样,你也可以使用文档中的 forms
属性获取给定文档中包含的所有表单的列表。
值
一个 HTMLFormControlsCollection
,其中包含表单中所有非图像控件。这是一个实时集合;如果向表单添加或删除表单控件,此集合将更新并更改。
返回集合中的表单控件遵循树的前序深度优先遍历顺序出现在表单中。这称为树顺序。
只返回以下元素:
<button>
<fieldset>
<input>
(由于历史原因,type
类型为"image"
的元素都将被省略)。<object>
<output>
<select>
<textarea>
- 与表单相关的自定义元素
示例
快速语法示例
在此示例中,我们将了解如何获取表单控件列表,以及如何通过索引和名称或 ID 访问其成员。
html
<form id="my-form">
<label>用户名:<input type="text" name="username" /></label>
<label>全名:<input type="text" name="full-name" /></label>
<label>密码:<input type="password" name="password" /></label>
</form>
js
const inputs = document.getElementById("my-form").elements;
const inputByIndex = inputs[0];
const inputByName = inputs["username"];
访问表单控件
禁用表单控件
js
const inputs = document.getElementById("my-form").elements;
// 遍历表单控件
for (let i = 0; i < inputs.length; i++) {
// 禁用所有表单控件
inputs[i].setAttribute("disabled", "");
}
规范
Specification |
---|
HTML Standard # dom-form-elements-dev |
浏览器兼容性
BCD tables only load in the browser