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
.
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.
Syntax
nodeList = HTMLFormElement.elements
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.
The elements included by HTMLFormElement.elements
and HTMLFormElement.length
are the following:
<button>
<fieldset>
<input>
(with the exception that any whosetype
is"image"
are omitted for historical reasons)<object>
<output>
<select>
<textarea>
No other elements are included in the list returned by elements
, which makes it an excellent way to get at the elements most important when processing forms.
Example
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", "");
}
Specifications
Specification | Status | Comment |
HTML Living StandardThe definition of 'HTMLFormElement.elements' in that specification. | Living Standard | |
Document Object Model (DOM) Level 2 HTML SpecificationThe definition of 'HTMLFormElement.elements' in that specification. | Obsolete | Initial definition |
Browser compatibility
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.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
elements
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 1 |
IE
Full support 9 |
Opera
Full support 8 |
Safari
Full support 3 |
WebView Android
Full support 1 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
HTMLFormElement.elements by Mozilla Contributors is licensed under CC-BY-SA 2.5.