HTML의 <datalist> 태그는 <input> 요소에 미리 정의된 선택 옵션 집합을 제공합니다. 사용자가 입력 필드를 클릭하거나 글자를 입력하기 시작하면 해당 옵션들이 자동 완성 목록 형태로 표시되어, 원하는 값을 빠르고 정확하게 선택할 수 있도록 도와줍니다.
예제
아래 코드를 실행하면 HTML5에서 입력 값에 대한 옵션 목록을 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML Datalist Tag</title> </head> <body> <input list = "tutorials" /> <datalist id = "tutorials"> <option value = "Java"> <option value = "ASP"> <option value = "PHP"> <option value = "Ruby"> <option value = "jQuery"> </datalist> <p>위에 언급된 튜토리얼 이름 중 하나를 직접 입력해 보세요.</p> </body> </html>
코드를 실행하면 입력 필드에 포커스를 맞출 때 Java, ASP, PHP, Ruby, jQuery 항목이 드롭다운 추천 목록으로 나타납니다.
datalist 태그 활용 시 알아두면 좋은 점
<input>요소의 list 속성 값과<datalist>의 id 속성 값이 반드시 일치해야 연결됩니다.- 사용자는 제공된 목록에서 선택할 수도 있고, 목록에 없는 값을 직접 입력할 수도 있습니다.
- Chrome, Firefox, Edge, Safari 등 주요 최신 브라우저에서 폭넓게 지원됩니다.