Bộ sưu tập các biểu mẫu DOM HTML

Tập hợp các biểu mẫu DOM HTML được sử dụng để trả về tất cả các phần tử biểu mẫu có bên trong tài liệu HTML dưới dạng một tập hợp. Các phần tử có trong bộ sưu tập được sắp xếp và được trình bày theo thứ tự giống như chúng xuất hiện trong tài liệu HTML.

Thuộc tính

Sau đây là các thuộc tính cho bộ sưu tập biểu mẫu -

Thuộc tính	Mô tả
chiều dài	Đây là thuộc tính chỉ đọc trả về số lượng phần tử trong bộ sưu tập.

Phương thức

Sau đây là các phương pháp thu thập biểu mẫu -

Phương pháp	Mô tả
[index]	Để trả về phần tử từ bộ sưu tập tại chỉ mục đã cho. Lập chỉ mục bắt đầu từ 0 và null được trả về nếu chỉ mục bị ràng buộc.
mục (chỉ mục)	Để trả về phần tử từ bộ sưu tập tại chỉ mục đã cho. Lập chỉ mục bắt đầu từ 0 và null được trả về nếu chỉ mục nằm ngoài phạm vi.
namesItem (id)	Để trả về phần tử từ bộ sưu tập với id đã cho. Null được trả về nếu id không tồn tại.

Cú pháp

Sau đây là cú pháp cho bộ sưu tập biểu mẫu DOM HTML -

document.forms

Ví dụ

Hãy để chúng tôi xem xét một ví dụ về bộ sưu tập các biểu mẫu DOM HTML -

<!DOCTYPE html>
<html>
<head>
<script>
   function formCollect() {
      for(var i=0;i<document.forms.length;i++){
         var no=document.forms[i].id+"<br>";
         document.getElementById("Sample").innerHTML +=no;
      }
   }
</script>
</head>
<body>
<h1>Forms collection example</h1>
<form id="FORM1">
Fruit <input type="text" name="fname" value="Mango">
</form>
<form id="FORM2">
Age <input type="text" name="Age" value="22">
</form>
<form id="FORM3">
Password: <input type="password" name="pass" value="test">
</form>
<br>
<button onclick="formCollect()">GET IDS</button>
<p id="Sample">Following are the form ids <br></p>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Bộ sưu tập các biểu mẫu DOM HTML

Khi nhấp vào nút NHẬN IDS -

Bộ sưu tập các biểu mẫu DOM HTML

Trong ví dụ trên -

Đầu tiên, chúng tôi đã tạo ba biểu mẫu có id lần lượt là “FORM1”, “FORM2” và “FORM3”. Hai biểu mẫu đầu tiên có phần tử đầu vào với kiểu văn bản và biểu mẫu thứ ba có phần tử đầu vào với mật khẩu kiểu -

<form id="FORM1">
Fruit <input type="text" name="fname" value="Mango" >
</form>
<form id="FORM2">
Age <input type="text" name="Age" value="22" >
</form>
<form id="FORM3">
Password: <input type="password" name="pass" value="test">
</form>

Nút GET IDS thực thi phương thức formCollect () khi người dùng nhấp vào -

<button onclick="formCollect()">GET IDS</button>

Phương thức formCollect () nhận các giá trị thuộc tính độ dài document.forms mà trong trường hợp của chúng ta là 3 và sử dụng nó trong biểu thức kiểm tra bên trong vòng lặp for. Sử dụng số chỉ mục trên tập hợp biểu mẫu, chúng tôi lấy id của chúng và nối nó vào đoạn văn có id "Mẫu" để hiển thị -

function formCollect() {
   for(var i=0;i<document.forms.length;i++){
      var no=document.forms[i].id+"<br>";
      document.getElementById("Sample").innerHTML +=no;
   }
}