Hướng dẫn get element from form javascript - lấy phần tử từ javascript biểu mẫu

Giá trị

Một HTMLFormControlsCollection chứa tất cả các điều khiển không phải hình ảnh trong biểu mẫu. Đây là một bộ sưu tập trực tiếp; Nếu các điều khiển biểu mẫu được thêm vào hoặc xóa khỏi biểu mẫu, bộ sưu tập này sẽ cập nhật để phản ánh sự thay đổi.

Các điều khiển biểu mẫu trong bộ sưu tập được trả về theo cùng một thứ tự trong đó chúng xuất hiện trong biểu mẫu bằng cách tuân theo một lần đặt hàng trước, độ sâu đầu tiên của cây. Đây được gọi là thứ tự cây.tree order.

Chỉ các yếu tố sau được trả về:

• const inputs = document.getElementById("my-form").elements;
  const inputByIndex = inputs[0];
  const inputByName = inputs["username"];
  

  5

• const inputs = document.getElementById("my-form").elements;
  const inputByIndex = inputs[0];
  const inputByName = inputs["username"];
  

  6

• const inputs = document.getElementById("my-form").elements;
  const inputByIndex = inputs[0];
  const inputByName = inputs["username"];
  

  7 (ngoại trừ bất kỳ

  const inputs = document.getElementById("my-form").elements;
  const inputByIndex = inputs[0];
  const inputByName = inputs["username"];
  

  8 nào là

  const inputs = document.getElementById("my-form").elements;
  const inputByIndex = inputs[0];
  const inputByName = inputs["username"];
  

  9 bị bỏ qua vì lý do lịch sử)

• const inputs = document.getElementById("my-form").elements;
  
  // Iterate over the form controls
  for (let i = 0; i < inputs.length; i++) {
    if (inputs[i].nodeName === "INPUT" && inputs[i].type === "text") {
      // Update text input
      inputs[i].value.toLocaleUpperCase();
    }
  }
  

  0

• const inputs = document.getElementById("my-form").elements;
  
  // Iterate over the form controls
  for (let i = 0; i < inputs.length; i++) {
    if (inputs[i].nodeName === "INPUT" && inputs[i].type === "text") {
      // Update text input
      inputs[i].value.toLocaleUpperCase();
    }
  }
  

  1

• const inputs = document.getElementById("my-form").elements;
  
  // Iterate over the form controls
  for (let i = 0; i < inputs.length; i++) {
    if (inputs[i].nodeName === "INPUT" && inputs[i].type === "text") {
      // Update text input
      inputs[i].value.toLocaleUpperCase();
    }
  }
  

  2

• const inputs = document.getElementById("my-form").elements;
  
  // Iterate over the form controls
  for (let i = 0; i < inputs.length; i++) {
    if (inputs[i].nodeName === "INPUT" && inputs[i].type === "text") {
      // Update text input
      inputs[i].value.toLocaleUpperCase();
    }
  }
  

  3

Ví dụ

Ví dụ về cú pháp nhanh

Trong ví dụ này, chúng tôi thấy cách lấy danh sách các điều khiển biểu mẫu cũng như cách truy cập các thành viên của mình theo chỉ mục và theo tên hoặc ID.

<form id="my-form">
  <label>Username:
    <input type="text" name="username" />
  label>
  <label>Full name:
    <input type="text" name="full-name" />
  label>
  <label>Password:
    <input type="password" name="password" />
  label>
form>

const inputs = document.getElementById("my-form").elements;
const inputByIndex = inputs[0];
const inputByName = inputs["username"];

Truy cập kiểm soát biểu mẫu

Ví dụ này có được danh sách phần tử của biểu mẫu, sau đó lặp lại trong danh sách, tìm kiếm các phần tử

const inputs = document.getElementById("my-form").elements;
const inputByIndex = inputs[0];
const inputByName = inputs["username"];

const inputs = document.getElementById("my-form").elements;

// Iterate over the form controls
for (let i = 0; i < inputs.length; i++) {
  if (inputs[i].nodeName === "INPUT" && inputs[i].type === "text") {
    // Update text input
    inputs[i].value.toLocaleUpperCase();
  }
}

const inputs = document.getElementById("my-form").elements;

// Iterate over the form controls
for (let i = 0; i < inputs.length; i++) {
  if (inputs[i].nodeName === "INPUT" && inputs[i].type === "text") {
    // Update text input
    inputs[i].value.toLocaleUpperCase();
  }
}

Vô hiệu hóa điều khiển hình thức

const inputs = document.getElementById("my-form").elements;

// Iterate over the form controls
for (let i = 0; i < inputs.length; i++) {
  // Disable all form controls
  inputs[i].setAttribute("disabled", "");
}