HTML의 <input> 요소에서 사용할 수 있는 autocomplete(자동 완성) 속성은 입력 필드의 자동 완성 기능을 켜거나 끌지 설정하는 속성입니다. 자동 완성이 활성화되어 있으면 웹 브라우저가 사용자가 이전에 입력했던 값을 기반으로 입력 필드를 자동으로 채워 줍니다. 단, 이 기능은 해당 필드에 사용자가 과거에 값을 입력한 이력이 있을 때만 동작합니다.
autocomplete 속성 문법
기본 문법은 다음과 같습니다.
<input autocomplete="on|off">
on 값은 자동 완성 기능을 활성화하여 브라우저가 이전에 입력된 값을 참조해 항목을 완성하도록 하고, off 값은 자동 완성을 비활성화하여 브라우저가 항목을 임의로 완성하지 못하게 합니다.
예제 코드
이제 <input> 요소의 autocomplete 속성을 실제로 적용한 예제를 살펴보겠습니다.
<!DOCTYPE html> <html> <body> <h2>Points</h2> <form action = "" method = "get"> Player − <input type = "text" name = "player" autocomplete = "on"><br> Rank − <input type = "number" name = "rank"><br> Points − <input type = "number" name = "pts"><br> <button type = "submit" value = "Submit">Submit</button> </form> </body> </html>
위 코드를 실행하고 이전에 몇 가지 값을 입력한 상태에서 다시 페이지에 접속하면, 자동 완성이 설정된 필드에 브라우저가 저장해 둔 값이 제안되는 것을 확인할 수 있습니다.
예제 코드 분석
예제에서는 다음과 같이 하나의 폼(form)을 구성했습니다.
<form action = "" method = "get"> Player − <input type = "text" name = "player" autocomplete = "on"><br> Rank − <input type = "number" name = "rank"><br> Points − <input type = "number" name = "pts"><br> <button type = "submit" value = "Submit">Submit</button> </form>
여기서 Player 입력 필드에만 자동 완성을 활성화했습니다.
Player − <input type = "text" name = "player" autocomplete = "on">
따라서 마우스 커서를 Player 텍스트 입력 필드에 올려놓거나 클릭하면, 이전에 입력했던 값들이 드롭다운 목록 형태로 나타나는 것을 볼 수 있습니다. 반면 Rank와 Points 필드에는 autocomplete 속성을 따로 지정하지 않았기 때문에 브라우저의 기본 설정을 따르게 됩니다.
정리
autocomplete 속성은 로그인 폼, 검색창처럼 반복 입력이 많은 필드에서는 on으로 설정해 사용자 편의성을 높이고, 보안이 중요한 일회용 인증번호 같은 필드에서는 off로 설정하는 것이 좋습니다. 이처럼 상황에 맞게 자동 완성 여부를 조절하면 더 안전하고 사용하기 편리한 웹 폼을 만들 수 있습니다.