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

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

Thuộc tính autocomplete của Form trong HTML DOM liên quan đến thuộc tính autocomplete của phần tử form. Sử dụng thuộc tính này để thiết lập hoặc trả về giá trị autocomplete của form. Thuộc tính này chỉ định xem trường input có nên tự động hoàn thành văn bản dựa trên văn bản đã nhập trước đó hay không.

Thuộc tính autocomplete có thể tắt cho các trường input cụ thể nếu autocomplete bật cho form, và ngược lại cũng đúng.

Cú pháp

Cú pháp để thiết lập thuộc tính autocomplete:

formObject.autocomplete = on|off

Trong đó, "on" là mặc định và trình duyệt cố gắng tự động hoàn thành giá trị người dùng dựa trên văn bản trước. Thiết lập "off" nghĩa là trình duyệt sẽ không tự động hoàn thành, người dùng phải tự gõ.

Ví dụ

Ví dụ minh họa cho thuộc tính autocomplete của Form:

<!DOCTYPE html> <html> <head> 
<style> 
    form{ border:2px solid blue; margin:2px; padding:4px; } 
</style> 
<script> 
    function changeAuto() { 
        document.getElementById("FORM1").autocomplete = "on"; 
        document.getElementById("Sample").innerHTML = "Văn bản input sẽ được tự động hoàn thành"; 
    } 
</script> </head> <body> 
<h1>Ví dụ thuộc tính autocomplete của Form</h1> 
<form id="FORM1" autocomplete="off"> 
    <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> 
</form> 
<br> 
<button onclick="changeAuto()">THAY ĐỔI</button> 
<p id="Sample"></p> 
</body> </html>

Kết quả

Khi nhấn nút "THAY ĐỔI" và gõ văn bản trong trường Tên người dùng, văn bản sẽ tự động hoàn thành dựa trên nhập trước.

Giải thích ví dụ

Tạo form với id="FORM1" và autocomplete="off". Người dùng phải tự gõ giá trị không có sự giúp đỡ của trình duyệt. Form chứa trường text và password.

Tạo nút "THAY ĐỔI" thực thi hàm changeAuto():

<button onclick="changeAuto()">THAY ĐỔI</button>

Hàm changeAuto() lấy form bằng getElementById() và thiết lập autocomplete thành "on" từ "off". Hiển thị thông báo thay đổi:

function changeAuto() { 
    document.getElementById("FORM1").autocomplete = "on"; 
    document.getElementById("Sample").innerHTML = "Văn bản input sẽ được tự động hoàn thành"; 
}