HTMLFormElement.elements

在此页

句法
范例
规范
浏览器兼容性
相关话题

HTMLFormElement property 元素 返回 HTMLFormControlsCollection listing all the form controls contained in the <form> 元素。 Independently, you can obtain just the number of form controls using the length 特性。

You can access a particular form control in the returned collection by using either an index or the element's 名称 or id .

Prior to HTML 5, the returned object was an HTMLCollection , on which HTMLFormControlsCollection is based.

注意： Similarly, you can get a list of all of the forms contained within a given document using the document's forms 特性。

句法

nodeList = HTMLFormElement.elements

值

HTMLFormControlsCollection containing all non-image controls in the form. This is a live collection; if form controls are added to or removed from the form, this collection will update to reflect the change.

The form controls in the returned collection are in the same order in which they appear in the form by following a preorder, depth-first traversal of the tree. This is called tree order .

The elements included by HTMLFormElement.elements and HTMLFormElement.length are the following:

<button>
<fieldset>
<input> (with the exception that any whose type is "image" are omitted for historical reasons)
<object>
<output>
<select>
<textarea>

No other elements are included in the list returned by 元素 , which makes it an excellent way to get at the elements most important when processing forms.

范例

Quick syntax example

In this example, we see how to obtain the list of form controls as well as how to access its members by index and by name or ID.

<form id="my-form">
  <input type="text" name="username">
  <input type="text" name="full-name">
  <input type="password" name="password">
</form>

var inputs = document.getElementById("my-form").elements;
var inputByIndex = inputs[0];
var inputByName = inputs["username"];

Accessing form controls

This example gets the form's element list, then iterates over the list, looking for <input> elements of type "text" so that some form of processing can be performed on them.

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

Disabling form controls

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

规范

规范	状态	注释
HTML 实时标准 The definition of 'HTMLFormElement.elements' in that specification.	实时标准
DOM (文档对象模型) 2 级 HTML 规范 The definition of 'HTMLFormElement.elements' in that specification.	过时	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`元素`	Chrome 1	Edge 12	Firefox 1	IE 9	Opera 8	Safari 3	WebView Android 1	Chrome Android 18	Firefox Android 4	Opera Android 10.1	Safari iOS 1	Samsung Internet Android 1.0

图例

完整支持

元数据

最后修改： 2019 年 3 月 23 日

在此页

句法

值

范例

Quick syntax example

Accessing form controls

Disabling form controls

规范

浏览器兼容性

图例

相关话题