HTML에서 form·input 요소의 자동 완성(autocomplete) 활성화 여부 지정하기

autocomplete 속성이란?

HTML 폼에서 자동 완성 기능을 활성화하려면 autocomplete 속성을 사용하면 됩니다. 이 속성은 <form> 요소에 적용해 폼 전체의 자동 완성 기능을 켜거나 끌 수 있으며, 개별 입력 필드인 <input> 요소에도 지정할 수 있습니다.

on으로 설정하면 브라우저가 사용자가 이전에 해당 필드에 입력했던 값을 기반으로 자동으로 제안을 표시합니다. 반대로 off로 설정하면 브라우저가 이전 입력값을 자동으로 보여주지 않으므로, 사용자가 매번 직접 값을 입력해야 합니다.

autocomplete 속성 값

번호	속성 값	설명
1	on	기본값입니다. 브라우저가 사용자가 이전에 입력한 값을 기준으로 자동 완성합니다.
2	off	브라우저가 이전 입력값을 자동으로 채워주지 않습니다. 사용자가 직접 값을 입력해야 합니다.

사용 예제

아래 코드를 실행하면 autocomplete 속성의 동작을 직접 확인할 수 있습니다. 텍스트 입력 필드에 값을 입력한 후 Submit 버튼을 클릭하고, 페이지를 다시 불러와 같은 필드에 값을 입력해 보세요. 이전에 입력했던 값이 자동 완성 목록으로 나타나는 것을 볼 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML autocomplete 속성</title>
   </head>
   <body>
      <form action = "/cgi-bin/hello_get.cgi" method = "get" autocomplete="on">
         이름
         <br>
         <input type = "text" name = "fname">
         <br>
         <input type = "submit" value = "submit" />
      </form>
   </body>
</html>

위 예제에서는 <form> 태그에 autocomplete="on"이 지정되어 있어 폼 내 모든 입력 필드에 자동 완성이 적용됩니다. 만약 특정 필드만 자동 완성을 비활성화하고 싶다면, 해당 <input> 요소에 autocomplete="off"를 개별적으로 지정하면 됩니다.