`.forms`

Returns a live collection of all forms present on the page.

Time to read: less than 5 min

Briefly

forms is a property of the document object. It holds a collection of all <form> elements that are present on the current page.

The collection is read-only.

How it is written

It is accessed by referring to the property of the document object. This way you can get the collection of all forms:

        
          
          const collection = document.forms
          const collection = document.forms

How to use

As an example, let's create three forms on one page: a form for applying a promo code, a form with a field for subscribing to a newsletter, and a login form using a phone number.

        
          
          <form>  <label for="promocode">Promo Code</label>  <input    id="promocode"    type="text" name="promocode"    placeholder="WIN-1234"    required  >  <button type="submit">Apply</button></form>...<form id="subscriptionFormId">  <label for="email">Email</label>  <input    id="email"    type="email"    name="email"    placeholder="email@example.com"    required  >  <button type="submit">Subscribe</button></form>...<form id="loginFormId" name="loginFormName">  <label for="phone">Your Number</label>  <input    id="phone"    type="tel"    name="phone"    placeholder="776-2323"    required  >  <button type="submit">    Send Confirmation Code  </button></form>
          <form>
  <label for="promocode">Promo Code</label>
  <input
    id="promocode"
    type="text" name="promocode"
    placeholder="WIN-1234"
    required
  >
  <button type="submit">Apply</button>
</form>
...
<form id="subscriptionFormId">
  <label for="email">Email</label>
  <input
    id="email"
    type="email"
    name="email"
    placeholder="email@example.com"
    required
  >
  <button type="submit">Subscribe</button>
</form>
...
<form id="loginFormId" name="loginFormName">
  <label for="phone">Your Number</label>
  <input
    id="phone"
    type="tel"
    name="phone"
    placeholder="776-2323"
    required
  >
  <button type="submit">
    Send Confirmation Code
  </button>
</form>

When accessing the forms property, we get a live collection HTMLCollection, which is very similar to an array, but also allows accessing elements by their name or ID.

Forms with specified id or name attributes can be retrieved using the values of those attributes. In other cases, a form can be retrieved by its index corresponding to the order of the forms described on the page.

Accessing Forms

The first form in the example above does not have attributes. The only way to access it is through its index in the collection:

        
          
          document.forms[0]
          document.forms[0]

The second form has an id attribute, so it can be accessed by both the attribute value and index:

        
          
          document.forms['subscriptionFormId']document.forms.subscriptionFormIddocument.forms[1]
          document.forms['subscriptionFormId']
document.forms.subscriptionFormId
document.forms[1]

The third form contains both an id and a name attribute. We can retrieve the form by the name specified in the name attribute as well:

        
          
          // By namedocument.forms['loginFormName']document.forms.loginFormName// By iddocument.forms['loginFormId']document.forms.loginFormId// By indexdocument.forms[2]
          // By name
document.forms['loginFormName']
document.forms.loginFormName

// By id
document.forms['loginFormId']
document.forms.loginFormId

// By index
document.forms[2]

The name and ID attributes do not conflict, allowing accessing the form both ways.

If there are no <form> elements on the page, the collection will be available but empty. Its length will be zero.

Interacting with Fields

The elements of the document.forms collection are of type HTMLFormElement and are essentially references to the corresponding form elements on the page.

For example, to get the phone number from the login form, we write:

        
          
          const phone = document.forms.loginFormName.phone.value
          const phone = document.forms.loginFormName.phone.value

Let’s disable the submit button for the promo code:

        
          
          document.forms[0].querySelector('[type="submit"]').disabled = true
          document.forms[0].querySelector('[type="submit"]').disabled = true

Or even trigger interactive validation for the subscription form:

        
          
          document.forms.subscriptionFormId.reportValidity()
          document.forms.subscriptionFormId.reportValidity()

In other words, working with a form and its fields in this case is no different from interacting with a DOM element of the form requested by selector.

Read more about this in the article “Working with Forms”.

How to understand

All <form> elements on the page are tracked by the browser in real time and are available in a special property of the document object. At any moment, from any of our scripts, regardless of the context.

This gives us one more way to interact with forms bypassing the use of any selectors.

Since the forms property returns a collection, it can be iterated over all forms in a loop. This can be useful for global operations on the page, for example, for collecting analytics or disabling form submissions due to loss of connection with the server.

One more plus for using the <form> tag 🙂

In practice

Advice 1

🛠 You can iterate over the collection using methods provided for arrays, but first, you need to wrap it in the Array.from() method or use the for...of loop:

        
          
          Array.from(document.forms).forEach((form) => {  console.log(form)})for (const form of document.forms) {  console.log(form)}
          Array.from(document.forms).forEach((form) => {
  console.log(form)
})

for (const form of document.forms) {
  console.log(form)
}

🛠 Forms that have the name attribute are also included in the document object itself. You can access them directly, bypassing the document.forms collection:

        
          
          document.myFormName
          document.myFormName