文档：forms 属性

Baseline 已广泛支持

此功能已成熟，可在多种设备和浏览器版本上运行。自 ⁨2018 年 6 月⁩ 起在所有浏览器中可用。

Document 接口的只读属性 **forms** 返回一个 HTMLCollection，其中列出了文档中包含的所有 <form> 元素。

注意： 同样，您可以使用 HTMLFormElement.elements 属性访问表单组件用户输入元素的列表。

您还可以将命名的 <form> 元素作为 document 对象的属性来访问。例如，document["login-form"] 和 document.forms["login-form"] 都可以用来访问名为 login-form 的表单。

警告： 依赖 document["form-name"] 模式是危险且不推荐的，因为它可能导致与浏览器中现有或未来 API 发生意外冲突。例如，如果浏览器将来引入内置的 document["login-form"] 属性，您的代码可能无法再访问该表单元素。为避免此类冲突，请始终使用 document.forms 来访问命名的表单。

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

命名表单访问

html

<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 = "test@example.com";
loginForm.elements.password.placeholder = "password";