文件：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";