คอลเล็กชันฟอร์ม HTML DOM ใช้สำหรับส่งคืนองค์ประกอบฟอร์มทั้งหมดที่มีอยู่ในเอกสาร HTML เป็นคอลเล็กชัน องค์ประกอบที่มีอยู่ในคอลเลกชันจะถูกจัดเรียงและนำเสนอในลำดับเดียวกันกับที่ปรากฏในเอกสาร HTML
คุณสมบัติ
ต่อไปนี้เป็นคุณสมบัติของการรวบรวมแบบฟอร์ม -
| คุณสมบัติ | คำอธิบาย |
|---|---|
| ความยาว | เป็นคุณสมบัติอ่านอย่างเดียวที่ส่งคืนจำนวน |
วิธีการ
ต่อไปนี้เป็นวิธีการรวบรวมแบบฟอร์ม -
| วิธีการ | คำอธิบาย |
|---|---|
| [ดัชนี] | การคืนค่า |
| รายการ(ดัชนี) | การคืนค่า |
| namedItem(id) | เพื่อส่งคืนองค์ประกอบ |
ไวยากรณ์
ต่อไปนี้เป็นรูปแบบไวยากรณ์สำหรับคอลเลกชันรูปแบบ HTML DOM -
document.forms
ตัวอย่าง
ให้เราดูตัวอย่างของคอลเลกชันแบบฟอร์ม HTML DOM -
<!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> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกปุ่ม GET IDS -
ในตัวอย่างข้างต้น −
ขั้นแรกเราได้สร้างสามรูปแบบด้วยรหัส “FORM1”,”FORM2” และ “FORM3” ตามลำดับ สองรูปแบบแรกมีองค์ประกอบอินพุตที่มีข้อความพิมพ์และรูปแบบที่สามมีองค์ประกอบอินพุตที่มีรหัสผ่านประเภท -
<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 ซึ่งในกรณีของเราคือ 3 และใช้ในนิพจน์การทดสอบภายใน for ลูป การใช้หมายเลขดัชนีในการรวบรวมแบบฟอร์ม เราจะได้ 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;
}
} 