HTML에서 입력 필드(input field)의 자동 완성 기능을 비활성화하려면 autocomplete 속성을 사용하면 됩니다. 이 속성은 <form> 태그 또는 개별 <input> 태그에 적용할 수 있으며, 값을 "off"로 설정하면 브라우저가 사용자가 이전에 입력한 내용을 기반으로 제안을 표시하지 않습니다.
autocomplete 속성의 주요 값
- on – 브라우저가 입력 필드에 대한 자동 완성 제안을 활성화합니다.
- off – 브라우저가 해당 필드에 대한 자동 완성 제안을 비활성화합니다.
개별 입력 필드마다 다른 값을 지정할 수 있으므로, 폼 전체가 아닌 특정 필드만 선택적으로 제어하는 것도 가능합니다.
예제 코드
다음 예제는 이름(first name) 필드에는 자동 완성을 비활성화하고, 성(last name) 필드에는 활성화한 모습입니다.
<!DOCTYPE html>
<html>
<head>
<style>
input {
font-size: 18px;
padding: 10px;
margin: 10px;
border: 1px solid grey;
}
</style>
</head>
<body>
<h1>자동 완성 On/Off 예제</h1>
<form>
이름: <input type="text" name="firstName" autocomplete="off"><br>
성: <input type="text" name="lastName" autocomplete="on"><br>
<input type="submit">
</form>
<h2>위 필드에 값을 입력한 후 페이지를 새로고침하면 자동 완성 동작 여부를 확인할 수 있습니다.</h2>
</body>
</html>실행 결과
위 코드를 실행하면 두 개의 텍스트 입력 필드와 제출 버튼이 있는 폼이 화면에 나타납니다.
폼을 한 번 제출한 후 다시 같은 필드에 입력을 시작하면, autocomplete="on"이 설정된 성(last name) 필드에는 이전에 입력했던 값이 자동으로 제안되지만, autocomplete="off"가 설정된 이름(first name) 필드에는 어떠한 제안도 표시되지 않습니다.
참고 사항
일부 최신 브라우저는 로그인 폼이나 주소 입력란처럼 사용자 편의를 위해 중요하다고 판단되는 경우, autocomplete="off" 설정을 무시하고 자동 완성을 계속 제공하기도 합니다. 이런 경우 필드에 의미 없는 고유한 name 값을 부여하거나, autocomplete에 비표준 값을 사용하는 우회 방법이 활용되기도 합니다.