Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> HTML

Thuộc tính length của Form trong HTML DOM

Thuộc tính length của Form trong HTML DOM được sử dụng để trả về số lượng phần tử bên trong form. Đây là thuộc tính chỉ đọc (read-only).

Cú pháp

Cú pháp của thuộc tính length:

formObject.length

Ví dụ

Ví dụ minh họa cho thuộc tính length của 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 = "Số phần tử bên trong form là: " + len; 
    } 
</script> </head> <body> 
<h1>Ví dụ thuộc tính length của Form</h1> 
<form id="FORM1"> 
    <label>Tên người dùng <input type="text" name="usrN"></label> <br><br> 
    <label>Mật khẩu <input type="password" name="pass"></label> <br><br> 
    <select name="Fruit"> 
        <option value="Mango">Xoài</option> 
        <option value="Litchi">Vải</option> 
        <option value="Guava">Ổi</option> 
    </select> 
</form> 
<br> 
<p>Lấy số phần tử trong form trên bằng cách nhấn nút dưới đây</p> 
<button onclick="getLength()">Lấy độ dài</button> 
<p id="Sample"></p> 
</body> </html>

Kết quả

Khi nhấn nút "Lấy độ dài", kết quả hiển thị: "Số phần tử bên trong form là: 3".

Giải thích ví dụ

Tạo form với id="FORM1" chứa: một input type text, một input type password, và một phần tử <select> tạo danh sách thả xuống. Tổng cộng 3 phần tử bên trong form.

Tạo nút "Lấy độ dài" thực thi hàm getLength():

function getLength() { 
    var len = document.getElementById("FORM1").length; 
    document.getElementById("Sample").innerHTML = "Số phần tử bên trong form là: " + len; 
}

Hàm lấy phần tử <form> bằng getElementById() và gán giá trị length cho biến len. Vì có 3 phần tử nên trả về 3.