HTML의 list 속성은 <input> 요소에 미리 정의된 선택 옵션을 제공하는 <datalist> 요소를 연결할 때 사용합니다. 이 속성을 활용하면 사용자가 제안된 목록에서 값을 선택할 수도 있고, 목록에 없는 값을 직접 입력할 수도 있어 폼 입력의 편의성이 크게 향상됩니다.
문법(Syntax)
list 속성의 기본 문법은 다음과 같습니다.
<input list="text">
list 속성값에는 연결하고자 하는 <datalist> 요소의 id 값을 지정합니다. 즉, <input>과 <datalist>는 이 id를 통해 서로 연결됩니다.
HTML list 속성 예제
아래 예제는 선택 과목을 입력받는 input 필드에 list 속성을 적용한 모습입니다.
예제 코드
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
input {
display: block;
width: 60%;
margin: 1rem auto;
}
</style>
<body>
<h1>HTML list Attribute Demo</h1>
<input list="subject" placeholder='Select your elective subject'>
<datalist id='subject'>
<option>Maths</option>
<option>Physics</option>
<option>Economics</option>
</datalist>
</body>
</html>
실행 결과
위 코드를 브라우저에서 실행하면 입력 필드를 클릭하거나 타이핑하는 순간 Maths(수학), Physics(물리학), Economics(경제학) 옵션이 드롭다운 목록 형태로 나타납니다. 사용자는 목록에서 항목을 선택할 수도 있고, 목록에 없는 값을 직접 입력할 수도 있습니다.
list 속성 사용 시 참고 사항
- <input>의 list 속성값과 <datalist>의 id 값은 반드시 일치해야 합니다.
- <datalist> 자체는 화면에 표시되지 않으며, input 요소와 연결되었을 때만 옵션 목록으로 나타납니다.
- Chrome, Firefox, Edge, Safari 등 주요 최신 브라우저에서 모두 지원됩니다.
- 텍스트 입력뿐 아니라 date, range, color 등 일부 input 타입에서도 활용할 수 있습니다.