Document: thuộc tính forms

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since June 2018.

Thuộc tính chỉ đọc forms của giao diện Document trả về một HTMLCollection liệt kê tất cả các phần tử <form> chứa trong tài liệu.

Note: Tương tự, bạn có thể truy cập danh sách các phần tử nhập liệu thành phần của biểu mẫu bằng thuộc tính HTMLFormElement.elements.

Bạn cũng có thể truy cập các phần tử <form> đã đặt tên dưới dạng thuộc tính của đối tượng document. Ví dụ: document["login-form"] và document.forms["login-form"] đều có thể được sử dụng để truy cập biểu mẫu có tên login-form.

Warning: Dựa vào mẫu document["form-name"] là nguy hiểm và không được khuyến khích vì có thể dẫn đến xung đột không mong muốn với các API hiện có hoặc tương lai trong trình duyệt. Ví dụ: nếu trình duyệt giới thiệu thuộc tính document["login-form"] tích hợp sẵn trong tương lai, mã của bạn có thể không còn truy cập được phần tử biểu mẫu. Để tránh xung đột như vậy, luôn sử dụng document.forms để truy cập các biểu mẫu đã đặt tên.

<form id="robby">
  <input type="button" value="Biểu mẫu của robby" />
</form>

<form id="dave">
  <input type="button" value="Biểu mẫu của dave" />
</form>

<form id="paul">
  <input type="button" value="Biểu mẫu của paul" />
</form>

document.querySelectorAll("input[type=button]").forEach((button, i) => {
  button.addEventListener("click", (event) => {
    console.log(document.forms[i].id);
  });
});

Lấy một phần tử từ bên trong biểu mẫu

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

Truy cập biểu mẫu đã đặt tên

html

<form name="login">
  <input name="email" type="email" />
  <input name="password" type="password" />
  <button type="submit">Đăng nhập</button>
</form>

const loginForm = document.forms.login; // Hoặc document.forms['login']
loginForm.elements.email.placeholder = "test@example.com";
loginForm.elements.password.placeholder = "password";