W3cubDocs

/Web APIs

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.

You can also access named <form> elements as properties of the document object. For example, document["login-form"] and document.forms["login-form"] can both be used to access the form named login-form.

Warning: Relying on the document["form-name"] pattern is dangerous and discouraged because it can lead to unexpected conflicts with existing or future APIs in the browser. For example, if a browser introduces a built-in document["login-form"] property in the future, your code may no longer be able to access the form element. To avoid such conflicts, always use document.forms to access named forms.

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

<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>

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

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

Named form access

<form name="login">
  <input name="email" type="email" />
  <input name="password" type="password" />
  <button type="submit">Log in</button>
</form>

const loginForm = document.forms.login; // Or document.forms['login']
loginForm.elements.email.placeholder = "[email protected]";
loginForm.elements.password.placeholder = "password";

Specifications

Specification
HTML> # dom-document-forms-dev>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`forms`	1	12	61 1–61 Only supported for `HTMLDocument`, not all `Document` objects.	≤12.1	4 1–4 Only supported for `HTMLDocument`, not all `Document` objects.	18	61 4–61 Only supported for `HTMLDocument`, not all `Document` objects.	≤12.1	3.2 1–3.2 Only supported for `HTMLDocument`, not all `Document` objects.	1.0	4.4	3.2 1–3.2 Only supported for `HTMLDocument`, not all `Document` objects.