HTMLFormElement: elements property
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.
The HTMLFormElement
property
elements
returns an
HTMLFormControlsCollection
listing all the form controls contained in
the <form>
element.
Independently, you can obtain just the
number of form controls using the length
property.
You can access a particular form control in the returned collection by using either an
index or the element's name
or id
attributes.
Prior to HTML 5, the returned object was an HTMLCollection
, on which
HTMLFormControlsCollection
is based.
Note: Similarly, you can get a list of all of the forms contained within a given document using the document's forms
property.
Value
An 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.
Only the following elements are returned:
<button>
<fieldset>
<input>
(with the exception that any whosetype
is"image"
are omitted for historical reasons)<object>
<output>
<select>
<textarea>
- form-associated custom elements
Examples
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">
<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>
const inputs = document.getElementById("my-form").elements;
const inputByIndex = inputs[0];
const 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.
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();
}
}
Disabling form controls
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", "");
}
Specifications
Specification |
---|
HTML Standard # dom-form-elements-dev |
Browser compatibility
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.