728x90
- datalist 태그는 input 요소와 함께 사용되며, 자동 완성 옵션을 제공
- option 태그를 사용하여 추천 값을 정의
- select 태그와 달리 사용자가 새로운 값을 입력할 수도 있음
- 브라우저 지원이 다를 수 있으므로, 테스트 필수
HTML datalist 태그란?
HTML datalist 태그는 input 요소와 함께 사용되어, 사용자가 입력할 때 자동 완성(autocomplete) 목록을 제공하는 HTML 태그입니다. 사용자가 직접 값을 입력할 수도 있고, 제안된 옵션 중에서 선택할 수도 있습니다.
기본 문법
<label for="browser">사용하는 브라우저:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Edge">
<option value="Safari">
<option value="Opera">
</datalist>사용자가 input 태그 필드에 입력하면 datalist 태그에서 미리 정의한 옵션이 자동으로 추천됩니다.
주요 특징
- 사용자가 입력할 때 자동 완성 목록을 제공
- option 태그를 사용하여 여러 개의 추천 값을 정의 가능
- select 태그와 달리, 사용자가 목록에 없는 값을 직접 입력할 수도 있음
- 브라우저 기본 지원 기능으로 JavaScript 없이 자동 완성 제공
주요 속성
| 속성 | 설명 |
| id | <input> 요소의 list 속성과 연결하기 위한 고유 식별자 |
| option | 자동 완성 목록의 개별 항목을 정의하는 태그 |
datalist 태그 자체에는 속성이 없으며, option 태그 내부에서 값을 지정합니다.
사용 예제
💡 자동 완성 기능 제공
🌈 예제 코드:
<label for="city">도시 선택:</label>
<input list="cities" id="city" name="city">
<datalist id="cities">
<option value="서울">
<option value="부산">
<option value="대구">
<option value="인천">
<option value="광주">
</datalist>실행 결과:
사용자가 입력할 때 해당하는 도시명이 자동으로 추천됩니다.
💡 숫자 입력 시 자동 완성 제공
🌈 예제 코드:
<label for="year">출생 연도:</label>
<input list="years" id="year" name="year">
<datalist id="years">
<option value="1990">
<option value="1995">
<option value="2000">
<option value="2005">
<option value="2010">
</datalist>실행 결과:
연도를 입력할 때 자동 완성 목록이 나타납니다.
💡 검색어 자동 완성 기능 구현
🌈 예제 코드:
<label for="search">검색어 입력:</label>
<input list="keywords" id="search" name="search" placeholder="검색어 입력">
<datalist id="keywords">
<option value="HTML 기초">
<option value="CSS 강좌">
<option value="JavaScript 입문">
<option value="React 학습">
<option value="웹 개발">
</datalist>실행 결과:
검색 입력 필드에서 미리 입력된 키워드를 추천하여 사용자 경험(UX) 향상
datalist 태그와 select 태그의 차이점
| 태그 | 차이점 |
| datalist | 사용자가 제안된 옵션을 선택할 수도 있고, 새로운 값을 입력할 수도 있음 |
| select | 목록에서 반드시 제공된 옵션 중 하나만 선택해야 함 |
💡 datalist 예제 (새로운 값 입력 가능)
🌈 예제 코드:
<input list="fruits" name="fruit">
<datalist id="fruits">
<option value="사과">
<option value="바나나">
<option value="오렌지">
</datalist>실행 결과:
사용자가 "포도"를 입력할 수도 있음
💡 select 예제 (고정된 값만 선택 가능)
🌈 예제 코드:
<select name="fruit">
<option value="사과">사과</option>
<option value="바나나">바나나</option>
<option value="오렌지">오렌지</option>
</select>실행 결과:
제공된 옵션 외에는 선택 불가
주의 사항
- datalist 태그는 input 태그 요소와 함께 사용해야 하며, select 태그와는 다름
- option 태그에는 value 속성만 사용할 수 있고, label 속성을 사용할 수 없음
- 브라우저마다 디자인이 다를 수 있으며, 일부 브라우저(특히 iOS Safari)에서는 완벽하게 지원되지 않을 수도 있음
- multiple 속성 지원하지 않음 (여러 개의 값을 동시에 선택할 수 없음)
사용 장점
- 사용자 입력을 돕기 위해 자동 완성 기능을 제공할 때
- 입력 필드에서 추천 값을 제공하면서도 사용자가 자유롭게 입력할 수 있도록 할 때
- 검색 필드, 제품 코드 입력, 주소 입력 등에 활용할 때
728x90
'프로그래밍 > HTML' 카테고리의 다른 글
| HTML <del> 태그 (취소 표시선) (119) | 2025.02.21 |
|---|---|
| HTML <dd> 태그 (설명 기능) (65) | 2025.02.21 |
| HTML <data> 태그 (SEO 및 데이터 처리) (126) | 2025.02.20 |
| HTML <colgroup> 태그 (78) | 2025.02.20 |
| [HTML] col 태그 (53) | 2025.02.20 |