คอลเลกชัน HTML DOM forms

คอลเลกชัน forms ของ HTML DOM ใช้สำหรับคืนค่าองค์ประกอบ <form> ทั้งหมดที่อยู่ในเอกสาร HTML เป็นคอลเลกชัน องค์ประกอบในคอลเลกชันจะเรียงลำดับและนำเสนอในลำดับเดียวกับที่ปรากฏในเอกสาร HTML

คุณสมบัติ (Properties)

เมธอด (Methods)

ไวยากรณ์ (Syntax)

document.forms

ตัวอย่าง (Example)

<!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>

ผลลัพธ์ (Output)

ผลลัพธ์ที่ได้:

เมื่อคลิกปุ่ม GET IDS:

คำอธิบายโค้ด

สร้างฟอร์ม 3 ตัว id "FORM1", "FORM2", "FORM3" ฟอร์มแรกสองมี input type text ฟอร์มที่สาม type password:

<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>

ปุ่ม GET IDS ทำงาน formCollect() เมื่อคลิก:

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

formCollect() ใช้ document.forms.length (คือ 3) ในเงื่อนไข for loop ใช้ดัชนีเข้าถึงคอลเลกชัน forms รับ id มาเพิ่มในพารากราฟ id "Sample":

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