HTML5 자동 완성(autocomplete) 속성 개요
웹 양식(form)을 작성할 때 브라우저의 자동 완성 기능이 제대로 작동하도록 하려면 HTML5의 autocomplete 속성을 올바르게 활용해야 합니다. HTML5 공식 명세는 이와 관련해 다음과 같이 설명하고 있습니다.
자동 채우기(autofill) 필드 이름이 "on"인 경우, 사용자 에이전트(브라우저)는 휴리스틱스(heuristics)를 통해 사용자에게 제공할 가장 적절한 값을 판단하려고 시도해야 합니다. 예를 들어 요소의 name 속성값, 해당 요소가 문서 DOM 내에서 차지하는 위치 등을 근거로 판단합니다.
즉, autocomplete="on"만 설정하면 브라우저가 스스로 추측해야 하기 때문에 자동 완성의 정확도가 떨어질 수 있습니다. 따라서 각 입력 필드의 용도를 브라우저에 명확하게 알려주는 것이 좋습니다.
autocomplete 속성에 사용할 수 있는 주요 값
다음 표에 정리된 값 중 하나를 autocomplete 속성의 값으로 지정하면, 브라우저는 해당 필드의 용도를 정확히 인식하고 저장된 정보를 자동으로 채워 넣습니다.
| 필드 이름 | 의미 |
|---|---|
| "name" | 전체 이름(Full name) |
| "honorific-prefix" | 접두어 또는 호칭 (예: "Mr.", "Ms.", "Dr.") |
| "given-name" | 이름 — 서양 문화권에서는 first name이라고도 함 |
| "additional-name" | 추가 이름 — 서양 문화권에서는 middle name이라고도 하며, 첫 번째 이름을 제외한 나머지 이름 |
| "family-name" | 성(family name) — 서양 문화권에서는 last name 또는 surname이라고도 함 |
| "honorific-suffix" | 접미어 (예: "Jr.", "B.Sc.", "Ph.D.") |
그 밖의 자주 사용되는 값
이름 관련 값 외에도 연락처나 계정 정보를 위해 다음 값들을 널리 사용할 수 있습니다.
- "email" — 이메일 주소
- "tel" — 전화번호
- "street-address" — 거리 단위 주소
- "postal-code" — 우편번호
- "organization" — 회사 또는 조직명
- "username" — 사용자 계정 이름
- "current-password" / "new-password" — 현재 비밀번호 및 새 비밀번호
실제 사용 예시
아래 코드는 autocomplete 속성을 적용한 간단한 양식 예시입니다.
<form action="/signup" method="post">
<label for="given-name">이름</label>
<input type="text" id="given-name" name="given-name" autocomplete="given-name">
<label for="family-name">성</label>
<input type="text" id="family-name" name="family-name" autocomplete="family-name">
<label for="email">이메일</label>
<input type="email" id="email" name="email" autocomplete="email">
<button type="submit">제출</button>
</form>정리
브라우저 자동 완성 기능을 제대로 지원하려면 autocomplete="on"에만 의존하기보다는, 각 입력 필드의 목적에 맞는 구체적인 autocomplete 값을 지정하는 것이 가장 확실한 방법입니다. 이렇게 하면 사용자 경험이 크게 향상되고 양식 작성에 소요되는 시간도 줄어듭니다.