HTML autocomplete와 datalist: 저장 정보 힌트와 직접 만든 추천 목록은 다릅니다
autocomplete는 브라우저가 폼 값을 어떻게 미리 채울지 알려 주는 힌트이고, datalist는 작성자가 제공한 추천 값 목록입니다. 추천 목록을 넣었다고 사용자가 그 안의 값만 제출할 수 있도록 검증까지 끝난 것은 아닙니다.
1. 자동완성이라는 이름을 두 역할로 나눕니다
AI가 만든 폼을 검토할 때 “자동완성을 넣었다”는 설명만으로 기능을 판단하지 마세요. 저장된 연락처 같은 정보를 채우는 힌트인지, 화면 작성자가 미리 정한 선택지를 제안하는 것인지 먼저 묻는 편이 좋습니다.
| 구성 | 역할 | 따로 확인할 일 |
|---|---|---|
| autocomplete | 브라우저의 사전 입력을 위한 힌트 | 입력 목적에 맞는 토큰·실제 브라우저 동작 |
| datalist | 연결된 입력란의 추천값 | 목록 밖 값 허용·검증 요구 |
| select | 정해진 선택지를 고르는 별도 입력 방식 | 업무에서 필요한 선택 제한 |
2. input의 list와 datalist의 id를 연결합니다
아래는 가상의 메모 분류를 제안하는 짧은 예시입니다. 실제 계정 정보나 개인정보를 받지 않는 학습용 코드이며, 동작하는 신청 서비스를 배포한 결과는 아닙니다.
<label for="note-topic">메모 분류</label>
<input id="note-topic" name="topic" list="topic-ideas">
<datalist id="topic-ideas">
<option value="독서"></option>
<option value="생활"></option>
</datalist>list의 값과 datalist의 id가 맞아야 연결됩니다. 추천 항목을 고를 때 들어가는 실제 값은 option의 value입니다. 브라우저마다 추천 메뉴의 보이는 방식까지 같다고 가정하지 마세요.
3. 목록 밖 입력과 접근성을 확인합니다
시험표에는 추천값 선택 / 목록 밖 값 직접 입력 / 키보드 이동 / 확대 / 사용하는 화면 읽기 도구를 나눠 적어보세요. MDN은 datalist 추천 목록이 select를 대체하지 않으며, 검증을 통과하는 목록 밖 값도 입력할 수 있다고 설명합니다.
또한 일부 브라우저·화면 읽기 도구 조합의 안내, 확대와 고대비 표현에서 한계가 있다는 설명이 있습니다. 한 브라우저에서 목록이 뜬 결과만으로 모두에게 사용성이 확인됐다고 표시하지 마세요. 실제 대상 환경에 맞는 확인이 필요합니다.
추천값을 넣으면 서버 검증도 필요 없나요?
아닙니다. 추천과 입력 검증은 다른 책임입니다. 어떤 값이 허용되는지는 서비스 요구와 서버 처리에 맞춰 별도로 정해야 합니다.
자료 확인: 2026년 10월 20일. MDN autocomplete, MDN datalist
대표 이미지는 AI로 제작한 개념 삽화이며, 본문 도표는 설명을 위해 직접 구성했습니다.
댓글
댓글 쓰기