🧑‍💻개발/HTML·CSS

[HTML] input 자동완성 비활성화하기

무택 2024. 8. 8.

안녕하세요 무택입니다 :)

오늘은 아주 빠르게 '텍스트 필드에서 자동완성 비활성화하기'를 알아보겠습니다.

input 자동완성 예시

우리는 인터넷에서 오만가지를 다 검색해 봅니다.

'주식으로 부자 되기', '아무도 나를 모르고 돈 많은 부자 되기'..

(여러분도 원하잖아요..)

가끔 '내가 이런 것도 검색했나' 기억도 안나는 기록들이 나오는데..

개발자로서 이런 기록들을 보여주지 않게 만들 수 있는

자동완성 비활성화, 바로 시작합니다.

 

input 자동완성 비활성화하기

위 이미지처럼 자동완성은 `autocomplete`라는 옵션을 사용합니다.

대체적으로 모든 브라우저에 활성화되어 있는데 아래 코드를 통해 확인해 보시죠

See the Pen [HTML]Autocomplete 기능 by TytanLee (@TytanLee) on CodePen.

첫 번째 텍스트 필드를 클릭해 보면 자동완성이 활성화되어 있는 걸 알 수 있습니다.

두 번째 텍스트 필드는 자동완성이 뜨지 않습니다.

 

`autocomplete=off`를 하면 자동완성 텍스트가 뜨지 않습니다.