files/en-us/web/api/document/forms/index.md
{{APIRef("DOM")}}
The forms read-only property of the {{domxref("Document")}} interface returns an {{domxref("HTMLCollection")}} listing all the {{HTMLElement("form")}} elements contained in the document.
[!NOTE] Similarly, you can access a list of a form's component user input elements using the {{domxref("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-indocument["login-form"]property in the future, your code may no longer be able to access the form element. To avoid such conflicts, always usedocument.formsto access named forms.
An {{domxref("HTMLCollection")}} object listing all of the document's forms.
Each item in the collection is a {{domxref("HTMLFormElement")}} representing a single <form> element.
If the document has no forms, the returned collection is empty, with a length of zero.
<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);
});
});
const selectForm = document.forms[index];
const selectFormElement = document.forms[index].elements[index];
<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}}
{{Compat}}