HTML의 <form> 요소에서 제공하는 autocomplete 속성은 폼의 자동 완성 기능을 활성화(on)하거나 비활성화(off)할지 설정하는 데 사용됩니다. 자동 완성이 켜져 있으면, 웹 브라우저가 사용자가 이전에 입력했던 값을 기억했다가 폼 입력 시 자동으로 채워 줍니다.
autocomplete 속성 문법
기본 문법은 다음과 같습니다.
<form autocomplete="on|off">
속성 값은 두 가지입니다.
- on: 브라우저가 이전에 입력한 값을 기반으로 입력란을 자동으로 완성합니다.
- off: 브라우저가 입력값을 자동으로 완성하지 않도록 차단합니다.
예제 코드
이제 <form> 요소에 autocomplete 속성을 실제로 적용한 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h2>Points</h2>
<form action="" method="get" autocomplete="on">
Player: <input type="text" name="player"><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>
위 코드를 실행하면 다음과 같은 화면이 출력됩니다. 여기서는 사용자가 폼에 미리 몇 가지 값을 입력했다고 가정해 보겠습니다.
자동 완성 동작 확인하기
autocomplete 속성을 on으로 설정했기 때문에, 페이지를 다시 방문하면 이전에 입력했던 값들이 그대로 나타납니다.
입력 필드 안에 커서를 위치시키면, 과거에 입력했던 값들이 목록 형태로 표시되는 것을 확인할 수 있습니다. 이는 autocomplete가 on으로 설정되어 있기 때문에 가능한 동작입니다.
정리
autocomplete 속성은 로그인 폼, 검색창 등 반복적인 입력이 많은 경우 사용자 편의성을 크게 높여 줍니다. 반면, 보안이 중요한 결제 페이지나 민감한 정보를 입력하는 폼에서는 off로 설정하여 자동 완성을 비활성화하는 것이 좋습니다.
