HTML DOM 폼 자동 완성(autocomplete) 속성이란?
HTML DOM의 autocomplete 속성은 form 요소의 autocomplete 어트리뷰트와 연결된 속성입니다. 이 속성을 활용하면 자바스크립트를 통해 특정 폼의 autocomplete 값을 읽어오거나 새로 설정할 수 있습니다.
autocomplete 속성은 사용자가 입력 필드에 텍스트를 작성할 때, 이전에 입력했던 내용을 기반으로 브라우저가 자동으로 완성해 줄지 여부를 결정합니다.
또한 폼 전체에 autocomplete가 켜져 있더라도 개별 입력 필드 단위로 자동 완성을 끌 수 있으며, 그 반대의 경우도 가능합니다. 즉, 폼 수준과 필드 수준 모두에서 유연하게 제어할 수 있습니다.
문법(Syntax)
autocomplete 속성을 설정하는 문법은 다음과 같습니다.
formObject.autocomplete = on|off
기본값은 "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 = "입력 텍스트가 이제 자동 완성됩니다.";
}
</script>
</head>
<body>
<h1>Form autocomplete 속성 예제</h1>
<form id="FORM1" autocomplete="off">
<label>사용자 이름 <input type="text" name="usrN"></label> <br><br>
<label>비밀번호 <input type="password" name="pass"></label>
</form>
<br>
<button onclick="changeAuto()">변경</button>
<p id="Sample"></p>
</body>
</html>실행 결과
위 코드를 실행하면 파란색 테두리가 있는 폼과 '변경' 버튼이 화면에 나타납니다.
'변경' 버튼을 클릭한 후 사용자 이름 필드에 텍스트를 입력하면, 브라우저가 이전 입력 내역을 참조하여 자동 완성 기능을 제공하기 시작합니다.
코드 상세 설명
위 예제의 동작 원리를 단계별로 살펴보겠습니다.
1. 자동 완성이 꺼진 폼 생성
먼저 id가 "FORM1"이고 autocomplete가 "off"로 설정된 폼을 만들었습니다. 따라서 초기 상태에서는 브라우저의 도움 없이 사용자가 직접 값을 입력해야 합니다. 이 폼에는 텍스트 필드와 비밀번호 필드가 포함되어 있습니다.
<form id="FORM1" autocomplete="off"> <label>사용자 이름 <input type="text" name="usrN"></label> <br><br> <label>비밀번호 <input type="password" name="pass"></label> </form>
2. 변경 버튼 추가
다음으로 클릭 시 changeAuto() 함수를 실행하는 '변경' 버튼을 만들었습니다.
<button onclick="changeAuto()">변경</button>
3. changeAuto() 함수 동작
changeAuto() 함수는 getElementById() 메서드로 폼 요소를 가져온 뒤, autocomplete 속성값을 "off"에서 "on"으로 변경합니다. 그리고 id가 "Sample"인 문단의 innerHTML 속성을 이용해 변경 사항을 사용자에게 텍스트로 표시합니다.
function changeAuto() {
document.getElementById("FORM1").autocomplete = "on";
document.getElementById("Sample").innerHTML = "입력 텍스트가 이제 자동 완성됩니다.";
}마무리
HTML DOM의 autocomplete 속성을 사용하면 자바스크립트만으로 폼의 자동 완성 동작을 동적으로 제어할 수 있습니다. 로그인 폼이나 검색 폼처럼 사용자 편의성이 중요한 곳에서는 "on", 보안이나 개인정보 입력이 필요한 필드에서는 "off"를 적절히 활용하면 더 나은 사용자 경험을 제공할 수 있습니다.