文档: forms 属性

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

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

值

一个 HTMLCollection 对象，列出了文档中的所有表单。集合中的每个项目都是一个 HTMLFormElement 对象，它代表单个 <form> 元素。

如果文档中没有表单，则返回的集合为空，长度为零。

示例

获取表单信息

html
<!doctype html>
<html lang="en">
  <head>
    <title>document.forms example</title>
  </head>

  <body>
    <form id="robby">
      <input
        type="button"
        onclick="alert(document.forms[0].id);"
        value="robby's form" />
    </form>

    <form id="dave">
      <input
        type="button"
        onclick="alert(document.forms[1].id);"
        value="dave's form" />
    </form>

    <form id="paul">
      <input
        type="button"
        onclick="alert(document.forms[2].id);"
        value="paul's form" />
    </form>
  </body>
</html>

从表单中获取元素

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

命名表单访问

html
<!doctype html>
<html lang="en">
  <head>
    <title>document.forms example</title>
  </head>

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

    <script>
      const loginForm = document.forms.login; // Or document.forms['login']
      loginForm.elements.email.placeholder = "[email protected]";
      loginForm.elements.password.placeholder = "password";
    </script>
  </body>
</html>

规范

规范
HTML 标准
# dom-document-forms-dev

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅