HTML5 autocomplete 속성이란?
텍스트 입력 필드에서 자동 완성 기능을 사용하려면 autocomplete 속성을 활용하면 됩니다. 이 속성은 폼(form) 요소와 함께 사용되며, 자동 완성 기능을 켜거나 끌 수 있도록 설정합니다.
자동 완성 기능이 켜져(on) 있으면, 브라우저는 사용자가 해당 필드에 이전에 입력했던 값을 기반으로 자동으로 값들을 제안해 보여줍니다. 반대로 자동 완성 기능이 꺼져(off) 있으면, 브라우저는 이전 입력 내역과 무관하게 아무런 값도 자동으로 표시하지 않습니다.
autocomplete 속성의 값
autocomplete 속성은 다음 두 가지 값을 가질 수 있습니다.
| 번호 | 속성 값 | 설명 |
|---|---|---|
| 1 | on | 기본값입니다. 브라우저가 사용자가 이전에 입력한 값을 기반으로 자동으로 완성해 줍니다. |
| 2 | off | 브라우저가 이전 입력 값을 기반으로 자동 완성하지 않습니다. 사용자가 직접 값을 입력해야 합니다. |
autocomplete 속성 사용 예제
아래 코드를 실행하면 HTML에서 autocomplete 속성을 사용하는 방법을 직접 확인할 수 있습니다. 코드를 실행한 후 텍스트 입력 필드에 값을 입력하고 제출(Submit) 버튼을 클릭해 보세요. 그다음 페이지를 다시 불러와 같은 필드에 값을 입력하면, 이전에 입력했던 값들이 자동 완성 목록으로 나타나는 것을 볼 수 있습니다. 이것이 autocomplete가 on일 때의 동작입니다.
반면 autocomplete를 off로 설정하면, 웹 브라우저는 사용자가 이전에 입력한 값을 기반으로 자동 완성을 수행하지 않습니다.
<!DOCTYPE html> <html> <head> <title> HTML autocomplete attribute</title> </head> <body> <form action = "" method = "get" autocomplete="on"> Details:<br><br> Student Name<br><input type="name" name="sname"><br> Training week<br><input type="week" name="week"><br> <input type="submit" value="Submit"> </form> </body> </html>
위 예제에서는 폼 태그에 autocomplete="on"이 설정되어 있어, 학생 이름(Student Name)과 교육 주차(Training week) 필드에 입력한 값이 브라우저에 저장되고 다음 입력 시 자동으로 제안됩니다. 개인정보 등 민감한 정보를 다루는 폼이라면 보안을 위해 autocomplete="off"로 설정하는 것이 좋습니다.