Document: forms property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since June 2018.

The forms read-only property of the Document interface returns an HTMLCollection listing all the <form> elements contained in the document.

Note: Similarly, you can access a list of a form's component user input elements using the HTMLFormElement.elements property.

Named <form> elements are also exposed as properties of the document object itself. For example, document["login-form"] and document.forms["login-form"] can both access the form named login-form. Relying on this behavior is dangerous and discouraged. It can lead to unexpected conflicts with some existing or future APIs in the browser. For example, if browsers introduce a new document property with the same name as your form, then the same code will no longer be able to access the form element. Always use document.forms instead.

Value

An HTMLCollection object listing all of the document's forms. Each item in the collection is a HTMLFormElement representing a single <form> element.

If the document has no forms, the returned collection is empty, with a length of zero.

Examples

Getting form information

html
<form id="robby">
  <input type="button" value="robby's form" />
</form>

<form id="dave">
  <input type="button" value="dave's form" />
</form>

<form id="paul">
  <input type="button" value="paul's form" />
</form>
js
document.querySelectorAll("input[type=button]").forEach((button, i) => {
  button.addEventListener("click", (event) => {
    console.log(document.forms[i].id);
  });
});

Getting an element from within a form

js
const selectForm = document.forms[index];
const selectFormElement = document.forms[index].elements[index];

Named form access

html
<form name="login">
  <input name="email" type="email" />
  <input name="password" type="password" />
  <button type="submit">Log in</button>
</form>
js
const loginForm = document.forms.login; // Or document.forms['login']
loginForm.elements.email.placeholder = "test@example.com";
loginForm.elements.password.placeholder = "password";

Specifications

Specification
HTML
# dom-document-forms-dev

Browser compatibility

See also