MDN Web Docs

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

Help improve MDN

Yes No

Learn how to contribute

This page was last modified on by MDN contributors.

Read the original on developer.mozilla.org ↗