HTML datalist 태그란?
HTML의 <datalist> 태그는 <input> 요소에 미리 정의된 옵션 목록을 제공하는 기능입니다. 사용자가 입력 필드에 값을 직접 타이핑할 수도 있고, 제안된 옵션 중에서 선택할 수도 있습니다. 즉, 텍스트 입력의 유연성과 드롭다운 선택의 편리함을 동시에 활용할 수 있는 자동완성(autocomplete) 기능을 구현할 때 유용합니다.
<datalist> 태그를 사용하려면 반드시 id 속성을 지정해야 합니다. 그리고 옵션 목록은 <datalist>...</datalist> 태그 내부에 <option> 태그를 나열하는 방식으로 작성합니다.
datalist 태그 사용 방법
<datalist>를 입력 필드와 연결하는 과정은 다음 두 단계로 이루어집니다.
- id 지정:
<datalist>태그에 고유한 id 속성을 부여합니다. - list 속성으로 연결:
<input>요소의 list 속성 값에 해당 id를 입력하여 두 요소를 연결합니다.
예제 코드
아래 코드를 실행하면 도구 이름을 입력하는 필드에 자동완성 옵션 목록이 표시되는 것을 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML Datalist Tag</title> </head> <body> <p>도구 이름을 입력하세요:</p> <input list = "tools" /> <datalist id = "tools"> <option value = "Image Editor"> <option value = "Whiteboard"> <option value = "Image Optimizer"> <option value = "Document Viewer"> </datalist> </body> </html>
주요 특징 및 활용 팁
- 자유로운 입력 허용: 일반 드롭다운(
<select>)과 달리, 목록에 없는 값도 직접 입력할 수 있습니다. - 브라우저 호환성: 대부분의 최신 브라우저에서 지원되지만, 모바일 환경이나 구형 브라우저에서는 동작 방식이 다를 수 있으므로 주요 브라우저에서 테스트하는 것이 좋습니다.
- 검색 폼에 활용: 검색어 추천, 카테고리 선택, 이메일 도메인 자동완성 등 다양한 폼 UI에서 활용도가 높습니다.