HTML의 autocomplete 속성은 폼(form) 요소와 함께 사용되어 브라우저의 자동 완성 기능을 켜거나 끌 수 있습니다. 이 속성이 on으로 설정되면, 브라우저는 사용자가 해당 필드에 이전에 입력했던 값을 기반으로 자동으로 값을 제안합니다. 반대로 off로 설정하면, 브라우저는 이전에 입력한 값을 바탕으로 자동 완성을 수행하지 않으며, 사용자가 직접 값을 입력해야 합니다.
autocomplete 속성 값
autocomplete 속성에 사용할 수 있는 값은 다음과 같습니다.
| 번호 | 속성 값 | 설명 |
|---|---|---|
| 1 | on | 기본값입니다. 브라우저가 사용자가 이전에 입력했던 값을 기반으로 자동으로 값을 완성해 줍니다. |
| 2 | off | 브라우저가 이전에 입력한 값을 기반으로 자동 완성하지 않습니다. 사용자가 직접 값을 입력해야 합니다. |
HTML에서 자동 완성 끄기
폼 요소에 autocomplete="off" 속성을 추가하면 해당 폼 전체에 대해 자동 완성 기능이 비활성화됩니다. 개별 입력 필드에만 적용할 수도 있으므로, 필요에 따라 폼 단위 또는 필드 단위로 유연하게 설정할 수 있습니다.
예제 코드
다음 코드를 실행하여 autocomplete를 off로 설정하는 방법을 확인해 보세요. autocomplete 값이 off이면 웹 브라우저는 사용자가 이전에 입력했던 값을 기반으로 값을 자동으로 완성하지 않습니다.
<!DOCTYPE html> <html> <head> <title>HTML autocomplete 속성</title> </head> <body> <form action = "" method = "get" autocomplete="off"> 상세 정보:<br><br> 학생 이름<br><input type = "name" name = "sname"><br> 교육 주차<br><input type = "week" name = "week"><br> <input type = "submit" value = "제출"> </form> </body> </html>
참고 사항
일부 최신 브라우저는 로그인 폼이나 결제 정보 필드 등에서 보안 및 사용자 편의성을 이유로 autocomplete="off" 설정을 무시하는 경우가 있습니다. 이러한 경우 의도적으로 자동 완성을 막으려면 JavaScript를 활용하거나, 각 input 필드에 고유하고 예측하기 어려운 name 속성 값을 부여하는 방법을 함께 고려할 수 있습니다.