datalist 태그

datalist태그는 input태그의 text상자에 선택박스나 자동완성 처럼 선택항목을 보여주는 기능이다. input태그의 list속성과 datalist의 아이디를 일치시켜 연결한다.

 

<label list="local">거주 지역 선택</label>
<input type="text" id="local" list="area">
<datalist id="area">
	<option value="강원도">
	<option value="경기도">
	<option value="경상도">
	<option value="전라도">
	<option value="충청도">
</datalist>

 

See the Pen RwGqdbr by Yoo (@spiegel) on CodePen.