HTML DOM 양식 자동 완성 속성은 양식 요소의 자동 완성 속성과 연결됩니다. autocomplete 속성을 사용하여 주어진 양식의 autocomplete 속성 값을 설정하거나 반환할 수 있습니다. 이 속성은 입력 필드가 이전에 텍스트 필드에 작성된 텍스트를 기반으로 사용자가 작성 중인 텍스트를 자동 완성해야 하는지 여부를 지정합니다.
자동 완성이 양식에 대해 설정되어 있고 그 반대의 경우에도 마찬가지인 경우 특정 입력 필드에 대해 자동 완성 속성을 끌 수 있습니다.
구문
다음은 −
의 구문입니다.자동 완성 속성 설정 -
formObject.autocomplete = on|off
여기에서 "켜짐"은 기본적으로 설정되어 있으며 브라우저는 이전 텍스트를 기반으로 사용자 값을 자동 완성하려고 시도합니다. 꺼짐으로 설정하면 브라우저가 사용자 입력을 완료하지 않고 사용자가 직접 값을 입력해야 함을 의미합니다.
예시
autocomplete 속성의 예를 살펴보겠습니다 -
<!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 = "The input text will now be autocomplete
";
}
</script>
</head>
<body>
<h1>Form autocomplete property example</h1>
<form id="FORM1" autocomplete="off">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Password <input type="password" name="pass"></label>
</form>
<br>
<button onclick="changeAuto()">CHANGE</button>
<p id="Sample"></p>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
CHANGE 버튼을 클릭하고 사용자 이름 필드에 텍스트를 입력할 때 -
위의 예에서 -
id ="Form1"이고 자동 완성이 "off"로 설정된 양식을 만들었습니다. 이것은 사용자가 이 텍스트를 자동 완성하기 위해 웹 브라우저의 도움 없이 값을 직접 입력해야 함을 의미합니다. 이 양식에는 텍스트 필드와 비밀번호 필드도 포함되어 있습니다 -
<form id="FORM1" autocomplete="off"> <label>User Name <input type="text" name="usrN"></label> <br><br> <label>Password <input type="password" name="pass"></label> </form>
그런 다음 사용자가 클릭할 때 changeAuto() 메서드를 실행하는 CHANGE 버튼을 만들었습니다.
<button onclick="changeAuto()">CHANGE</button>
changeAuto() 메서드는 getElementById() 메서드를 사용하여 양식 요소를 가져오고 자동 완성 속성을 "off"에서 "on"으로 설정합니다. ID가 "Sample"인 단락의 innerHTML 속성을 사용하여 사용자에게 텍스트를 표시하여 이 변경 사항을 보여줍니다. -
function changeAuto() {
document.getElementById("FORM1").autocomplete = "on";
document.getElementById("Sample").innerHTML = "The input text will now be autocomplete ";
}