We're looking for a person or people to help audit MDN to find places we could speed up. Is this you or someone you know? Check out the RFP: https://mzl.la/2IHcMiE

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 elements using the length property.

You can access a particular element 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.


nodeList = HTMLFormElement.elements


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

The elements 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 which are included by HTMLFormElement.elements and HTMLFormElement.length are:

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.


Quick syntax example

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

<form id="myForm">  
<input name="username" type="text">
<input name="full_name" type="text">
<input name="password" type="password">
var inputs = document.getElementById("myForm").elements;
var inputByIndex = inputs[0];
var inputByName = inputs["username"];

Acccessing the element list's contents

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

var inputs = document.getElementById("myForm").elements;

for (i = 0; i < inputs.length; i++) 
    // update text input 

Disable form element

var inputs = document.getElementById("myForm").elements;

// iterates over the element
for (i = 0; i < inputs.length; i++) 
  inputs[i].setAttribute("disabled", "disabled"); // disables all form element


Specification Status Comment
HTML Living Standard
The definition of 'HTMLFormElement.elements' in that specification.
Living Standard  
Document Object Model (DOM) Level 2 HTML Specification
The definition of 'HTMLFormElement.elements' in that specification.
Obsolete Initial definition

Document Tags and Contributors

 Last updated by: ukor,