คุณสมบัติ length ของ HTML DOM Form

คุณสมบัติ length ของ HTML DOM Form ใช้สำหรับส่งคืนจำนวนองค์ประกอบที่อยู่ภายในฟอร์ม เป็นคุณสมบัติแบบอ่านอย่างเดียว (read-only)

ไวยากรณ์

ไวยากรณ์ของคุณสมบัติ length ของ Form:

ormObject.length

ตัวอย่าง

มาดูตัวอย่างของคุณสมบัติ length ของ Form:

<!DOCTYPE html> <html> <head> <style>    form{       border:2px solid blue;       margin:2px;       padding:4px;    } </style> <script>    function getLength() {       var len=document.getElementById("FORM1").length ;       document.getElementById("Sample").innerHTML = "Number of elements present inside the form are :"+len; } </script> </head> <body> <h1>Form length property example</h1> <form id="FORM1"> <label>User Name <input type="text" name="usrN"></label> <br>lt;br> <label>Password <input type="password" name="pass"></label> <br><br> <select name="Fruit"> <option value="Mango">Mango<option> <option value="Litchi">Litchi</option> <option value="Guava">Guava</option> </select> </form> <br> <p>ดึงจำนวนองค์ประกอบในฟอร์มด้านบนโดยคลิกปุ่มด้านล่าง</p> <button onclick="getLength()">get Length</button> <p id="Sample"></p> </body> </html>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้:

เมื่อคลิกปุ่ม “get Length”:

ในตัวอย่างข้างต้น:

เราสร้างฟอร์มที่มี id=“FORM1” มีช่อง input type text, อีกช่อง type password และองค์ประกอบ <select> สำหรับรายการแบบเลื่อนลง หมายความว่ามีองค์ประกอบทั้งหมด 3 ชิ้นในฟอร์ม:

<form id="FORM1"> <label>User Name <input type="text" name="usrN"></label> <br><br> <label>Password <input type="password" name="pass"></label> <br><br> <select name="Fruit"> <option value="Mango">Mango<option> <option value="Litchi">Litchi</option> <option value="Guava">Guava</option> </select> </form>

เราสร้างปุ่ม “get Length” ที่จะเรียกใช้เมธอด getLength() เมื่อผู้ใช้คลิก:

function getLength() {    var len=document.getElementById("FORM1").length ;    document.getElementById("Sample").innerHTML = "Number of elements present inside the form are :"+len; }

ฟังก์ชัน getLength() ดึงองค์ประกอบ <form> โดยใช้ getElementById() ของ document และกำหนดค่า length ให้ตัวแปร len เนื่องจากมี 3 องค์ประกอบในฟอร์ม จึงคืนค่า 3 ค่านี้แสดงในย่อหน้าที่มี id “Sample” โดยใช้ innerHTML:

function getLength() {    var len=document.getElementById("FORM1").length ;    document.getElementById("Sample").innerHTML = "Number of elements present inside the form are :"+len; }