document.forms is a read-only property that returns a live HTMLCollection of every <form> in the document. Each item is an HTMLFormElement (MDN).
Read the notes below before you get or set this property. Prefer feature detection when support is limited.
Use document.forms. Start with this line.
document.forms| Call | What it does |
|---|---|
document.forms | Primary signature. |
Built into the browser. Read or assign document.forms — no import required.
document.forms| Parameter | Description |
|---|---|
| Writable? | Optional. Read-only |
| Return Value | Description |
|---|---|
| * | Live HTMLCollection |
forms.lengthCount every <form> on the page.
const count = document.forms.length;
console.log("form count:", count);
if (count === 0) {
console.log("No <form> elements on this page");
}document.forms. Live HTMLCollection of forms (MDN)..length. Number of <form> tags only.0 when there are no forms.forms[0].elementsMDN: access document.forms.login, then set control placeholders.
const loginForm = document.forms.login;
loginForm.elements.email.placeholder = "[email protected]";
loginForm.elements.password.placeholder = "password";
console.log(loginForm.name);
console.log(loginForm.elements.email.placeholder);document.forms.login matches name="login".elements. Collection of the form’s controls (MDN).elements.email is the input with that name.document.forms. Do not use document["login"].Appending a form increases document.forms.length automatically.
const before = document.forms.length;
const form = document.createElement("form");
form.name = "extra";
document.body.appendChild(form);
console.log(before, "→", document.forms.length);
console.log(document.forms.extra.name);length before the change.form. DOM update is enough.length again. Live collection increases by one.name.Document.forms is marked Baseline Widely available on MDN (since June 2018). Logos use the shared browser-image-sprite.png sprite from this project.
Read-only live HTMLCollection of every form element in the document.
Bottom line: Use document.forms to list and look up forms. Prefer document.forms.name over document["name"]. See the MDN Document.forms reference.
Learn the Document fragmentDirective property for text fragments.
11 people found this page helpful