HTML의 autocomplete 속성은 폼(form) 요소와 함께 사용되며, 자동 완성 기능을 켜거나 끄는 역할을 합니다. 이 속성값이 on으로 설정되면 브라우저는 사용자가 해당 입력 필드에 이전에 입력했던 값을 기반으로 자동으로 후보 값을 표시해 줍니다.
반대로 off로 설정하면 브라우저는 이전 입력 기록을 활용하지 않으므로, 사용자가 매번 값을 직접 입력해야 합니다. 민감한 정보를 다루는 폼이라면 보안상의 이유로 off를 설정하는 것이 좋습니다.
autocomplete 속성의 값
autocomplete 속성에 사용할 수 있는 값은 다음과 같습니다.
| 번호 | 속성값 | 설명 |
|---|---|---|
| 1 | on | 기본값(default)입니다. 브라우저가 사용자가 이전에 입력했던 내용을 기반으로 값을 자동으로 채워 줍니다. |
| 2 | off | 브라우저가 이전 입력 기록을 기반으로 값을 자동 완성하지 않습니다. 사용자가 직접 값을 입력해야 합니다. |
예제 코드
아래 코드를 실행하면 autocomplete 속성의 동작을 직접 확인할 수 있습니다. 먼저 텍스트 입력 필드에 값을 입력하고 Submit 버튼을 클릭한 뒤, 다시 같은 페이지를 열어 필드에 값을 입력해 보세요. autocomplete가 on으로 설정된 경우, 입력을 시작하면 이전에 입력했던 값이 자동 완성 목록으로 나타나는 것을 확인할 수 있습니다.
만약 autocomplete 값을 off로 변경하면, 브라우저는 이전에 입력했던 값을 기반으로 자동 완성을 제공하지 않습니다.
<!DOCTYPE html> <html> <head> <title>HTML autocomplete attribute</title> </head> <body> <form action = "" method = "get" autocomplete="on"> Details:<br><br> Student Name<br><input type = "name" name = "sname"><br> Training week<br><input type = "week" name = "week"><br> <input type = "submit" value = "Submit"> </form> </body> </html>
정리
autocomplete 속성은 폼 태그뿐 아니라 input, textarea 등 개별 입력 요소에도 적용할 수 있습니다. 사용자 편의성을 높이려면 on, 개인정보·결제 정보처럼 노출을 피해야 하는 필드에는 off를 사용하는 것이 바람직합니다.