만약 사이트를 방문하여 로그인이나 어떤 정보를 입력하려고 하는데 이미 자동으로 글이 저장되었다면? 그리고 그 내용이 보안이나 개인적인 정보라면 이 기능을 원하지 않을텐데도... 아래는 자동 완성 기능 사용하지 않는 방법입니다.

[ 1 ] 자동 완성 기능은 언제 그리고 왜 사용되나...


; 브라우저는 우리가 입력하는 입력폼, input이나 textarea에 입력할 글을 자동으로 저장하게 해주는 자동 완성 기능을 기본으로 가지고 있습니다. 그렇기 때문에 기존에 입력된 글을 앞에 몇글자만 입력해도 모두 입력할 수 있도록 도와줍니다. 매우 편리한 기능이지요. 하지만 이 기능이 항상 필요한 것은 아닙니다. 보안이나, 개인적인 정보일 경우 자동완성 기능은 꼭 꺼두어야 할 필요가 있습니다.


[ 2 ] 자동 완성 기능 사용하지 않도록 설정


; 사용할 태그에서 autocomplete 속성을 사용합니다. input 또는 textarea 태그안에 자동 완성 기능을 막는 이 속성을 넣어만 주면됩니다. 아래의 예제를 확인하세요.

! autocomplete에 사용 가능한 옵션


1. on // 자동완성 기능 사용 (Default 값)
2. off // 자동완성 기능 사용 중지

<input autocomplete="off" maxlength="30" name="id_test" type="text" class="emailinput" placeholder="E-MAIL" id="emailinput" />
// 아이디를 입력하는 input의 앞에 autocomplete 속성값을 off로 하여 자동완성을 막음

<input autocomplete="off" name="userPs_test" type="password" class="psinput" placeholder="PASSWORD" id="psinput" />
// 패스워드 역시 input의 앞에 autocomplete 속성값을 off로 하여 자동완성을 막음

<textarea autocomplete="off" class="texts" id="textid" name="contents"></textarea>
// 텍스트를 입력하는 textarea 태그에도 autocomplete 속성값을 off로 하여 자동완성을 막음

위 예제는 개별 입력폼에 대하여 자동완성을 막는 부분입니다. 만약에 개별항목이 아닌 입력폼 전체에 자동완성을 금지하려면 어떻게 할까요? 상위 요소인 form 태그에 autocomplete 속성을 사용하여 가능합니다.

<form autocomplete="off">
   <input ... />
   <input ... />
   <textarea ... />
</form>


이처럼 autocomplete 속성이 보이시죠? 그렇게 함으로써 브라우저의 특징 중 하나인 자동완성 기능을 해제시킬 수가 있습니다. :) 참고로 위에 사용된 다른 속성에 대한 설명은 아래를 보세요.

i. maxlength : 입력 최대값을 설정할 수 있음
ii. type : 입력되는 텍스트를 결정함. password 값을 넣는 경우 실제 입력값을 화면에 보여줄 때만 별표(*)로 변환시킴
iii. placeholder : 아무 입력 값이 없을 경우 기본으로 이 입력 폼이 어떤데에 쓰이는지 알려줌
iv. name : Form 태그를 통해 다른 페이지로 값을 전송할 경우 name 속성을 이용해 받을 수 있음


# 크롬에서 정상 동작하지 않는 경우
크롬에서 autocomplete이 정상동작하지 않습니다. 그 이유는 구글은 autocomplete 속성을 조작하는 행위가 모든 사용자에게 제공되는 것은 좋지 않다고 판단하기 때문입니다. 이를 해결하기 위한 방법이 존재하지만 현재로서는 스크립트를 이용해야만 가능한 것 같습니다. 크롬 브라우저는 제외하는 것이 좋겠습니다.