HTML에서는 <datalist> 요소를 사용하여 미리 정의된 옵션 목록을 만들 수 있습니다. 이 목록은 <input> 요소와 함께 사용되며, 사용자가 값을 입력할 때 선택할 수 있는 옵션을 제공합니다.
list 속성은 HTML5에서 새롭게 도입된 기능으로, <input> 요소에 미리 정의된 옵션들을 담고 있는 <datalist> 요소를 연결하는 역할을 합니다. 즉, input의 list 속성 값과 datalist의 id 값이 일치하면 두 요소가 서로 연결됩니다.
list 속성의 주요 특징
- 사용자가 직접 입력할 수도 있고, 제공된 옵션 중에서 선택할 수도 있습니다.
- 입력 필드에 포커스를 맞추면 옵션 목록이 자동으로 표시됩니다.
- 텍스트를 입력하면 일치하는 옵션만 필터링되어 보여지므로 편리합니다.
예제 코드
아래 예제를 실행하면 list 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다. 도구 이름을 입력하는 필드에 포커스를 맞추면 미리 정의된 옵션 목록이 나타납니다.
<!DOCTYPE html> <html> <head> <title>HTML list attribute</title> </head> <body> <p>도구 이름을 입력하세요:</p> <input list = "tools" name = "tool" /> <datalist id = "tools"> <option value = "Image Editor"> <option value = "Whiteboard"> <option value = "Image Optimizer"> <option value = "Document Viewer"> </datalist> </body> </html>
코드 설명
<input list="tools">: input 요소의 list 속성이 id가 "tools"인 datalist를 참조합니다.<datalist id="tools">: 미리 정의된 옵션들을 담고 있는 컨테이너 역할을 합니다.<option value="...">: 드롭다운에 표시될 각각의 선택 항목을 정의합니다.
이처럼 list 속성과 datalist 요소를 조합하면 별도의 JavaScript 없이도 간단하게 자동완성 기능을 구현할 수 있어, 검색창이나 폼 입력 필드의 사용자 경험을 크게 향상시킬 수 있습니다.