select 태그와 datalist 태그의 차이점
html에서 사용자로 하여금 여러 옵션 중 하나를 선택하게 할 때 사용하는 태그가 <select> 태그와 <datalist> 태그 입니다. 하지만 두 태그 사이에는 약간의 차이점이 있습니다.
<select> 태그 : 사용자는 문서 작성자가 만든 옵션 중에서만 선택이 가능하다.
<datalist> 태그 : 사용자는 입력창에 타이핑으로 직접 옵션을 선택할 수 있다.
직접 눈으로 확인해보도록 하겠습니다.
<select> 태그
<form>
<select>
<option>내용 1</option>
<option>내용 2</option>
<option>내용 3</option>
</select>
</form>
<datalist> 태그
<form>
<input list="ex" type="text">
<datalist id="ex">
<option value="내용1"></option>
<option value="내용2"></option>
<option value="내용3"></option>
</datalist>
</form>
아래의 코드를 직접 실행하여 비교해보셔도 좋습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>date</title>
</head>
<body>
<form>
<label id="selectTag">select tag</label>
<select id="selectTag">
<option>내용 1</option>
<option>내용 2</option>
<option>내용 3</option>
</select>
</form>
<hr>
<form>
<label id="datalistTag">datalist tag</label>
<input list="ex" type="text" id="datalistTag">
<datalist id="ex">
<option value="내용1"></option>
<option value="내용2"></option>
<option value="내용3"></option>
</datalist>
</form>
</body>
</html>
'IT공부 > HTML + CSS + Javascript' 카테고리의 다른 글
| 반응형 웹 만들기 1 - 고정 그리드 레이아웃 vs 가변 그리드 레이아웃 (0) | 2021.01.08 |
|---|---|
| HTML 기초 3 - map, area 태그를 활용하여 하나의 이미지에 링크 여러개 달기 (0) | 2020.12.31 |
| HTML 기초 2 - table(표) 만들기 (thead, tbody, tfoot, col, colgroup 태그) (0) | 2020.12.30 |
| HTML 기초 1 - HTML 문서의 기본구조 (0) | 2020.12.29 |
방구석 세계인
관심분야 : 외국어 학습, 프로그래밍, 책 리뷰 등...