JavaScript Document forms Property

What You’ll Learn

Document.forms is a read-only instance property that returns a live HTMLCollection of every <form> in the document. Learn index and named access, form.elements, why document["name"] is unsafe, and five examples with try-it labs.

Introduction

Almost every website has at least one form—login, search, checkout, contact. When a script needs every form on the page (or one form by name), document.forms is the built-in collection to use.

MDN: the forms read-only property returns an HTMLCollection listing all the <form> elements in the document. Each item is an HTMLFormElement.

Related Document tutorials: fonts, embeds, Document constructor.

Understanding Document.forms

A read-only instance property on Document. Its value is a live HTMLCollection of every <form> element (MDN).

• Value — HTMLCollection of HTMLFormElement items.
• Empty safe — no forms → length 0 (MDN).
• Live — updates when forms are added or removed.
• Indexed — document.forms[0], document.forms.item(0).
• Named — document.forms.login or document.forms["login"].
• Controls — use form.elements for inputs inside a form (MDN).

📝 Syntax

document.forms

Value

An HTMLCollection of all document forms. Each item is an HTMLFormElement (MDN).

Common patterns

const count = document.forms.length;
const first = document.forms[0];
const login = document.forms.login; // or document.forms["login"]

for (const form of document.forms) {
  console.log(form.id || form.name);
}

⚖️ How to reach a form (safe vs unsafe)

📄 HTMLFormElement.elements

MDN: you can access a form’s component user input elements with HTMLFormElement.elements—another HTMLCollection / HTMLFormControlsCollection of controls belonging to that form.

const loginForm = document.forms.login;
loginForm.elements.email.placeholder = "test@example.com";
loginForm.elements.password.placeholder = "password";

Examples Gallery

Examples follow MDN Document: forms. Use View Output or Try It Yourself for each case.

const count = document.forms.length;
console.log("form count:", count);

if (count === 0) {
  console.log("No <form> elements on this page");
}

form count: 3

document.querySelectorAll("input[type=button]").forEach((button, i) => {
  button.addEventListener("click", () => {
    console.log(document.forms[i].id);
  });
});

robby
dave
paul

const loginForm = document.forms.login; // Or document.forms["login"]
loginForm.elements.email.placeholder = "test@example.com";
loginForm.elements.password.placeholder = "password";
console.log("form name:", loginForm.name);

form name: login
(placeholders updated on email and password)

const selectForm = document.forms[0];
const firstControl = selectForm.elements[0];
console.log(firstControl.tagName, firstControl.name || firstControl.type);

// Named controls are often clearer:
console.log(selectForm.elements.email.value);

INPUT email
user@example.com

const before = document.forms.length;

const form = document.createElement("form");
form.name = "extra";
document.body.appendChild(form);

const after = document.forms.length;
console.log("before:", before, "after:", after);
console.log("named:", document.forms.extra.name);

before: 1 after: 2
named: extra

🚀 Common Use Cases

• Inventory forms — count or list every form for debugging.
• Login / checkout scripts — grab document.forms.login by name.
• Fill helpers — set placeholders or values via form.elements.
• Multi-step wizards — switch among several forms by index.
• Avoid name clashes — never rely on document[formName] (MDN).
• Validation loops — iterate document.forms and check each checkValidity().

📝 Notes

• MDN: Baseline Widely available (since June 2018) — no Deprecated / Experimental / Non-standard banner.
• Value is an HTMLCollection of HTMLFormElement items.
• Always prefer document.forms over document["form-name"] (MDN warning).
• Use HTMLFormElement.elements for controls inside a form (MDN).
• Related: fonts, embeds, Document constructor.

💡 Best Practices