HTML에서 <input> 요소에 미리 정의된 옵션 목록을 제공하려면 <datalist> 요소를 사용하고, 두 요소를 연결할 때는 list 속성을 활용합니다. 핵심은 <input> 요소의 list 속성 값과 <datalist> 요소의 id 값을 동일하게 지정하는 것입니다. 이렇게 하면 입력 필드를 클릭하거나 타이핑할 때 미리 정의된 옵션들이 자동 완성 형태로 나타납니다.
예제
<!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>
위 예제에서 <input> 요소의 list 속성 값은 "tutorials"이고, <datalist> 요소의 id 역시 "tutorials"로 설정되어 있습니다. 이처럼 두 값이 일치해야 <datalist>에 정의된 Java, ASP, PHP, Ruby, jQuery 같은 옵션들이 입력 필드에서 선택 가능한 목록으로 표시됩니다. 사용자는 목록에서 직접 선택하거나 원하는 값을 자유롭게 입력할 수도 있습니다.