HTML - datalist 태그 : 사전에 미리 정의된 옵션 목록 제시

텍스트를 입력하는 필드에 사전에 미리 정의된 드롭 다운 형식의 목록을 출력합니다.

태 그	속 성	설 명
<input>	list	<datalist>의 id 값
<datalist>	id	<input>의 list 값
	value	서버로 넘겨질 값
	label	사용자에게 보여질 값. 생략하면 value 값이 라벨이 됨.

input 의 list 속성 값과 datalist 의 id 속성의 값과 일치해야 합니다.

<input list="[id 이름]">

<datalist id="[id 이름]">
  <option value="ie">
  <option value="ff">
</datalist>

<input list="brow">

<datalist id="brow">
  <option value="익스플로어">
  <option value="파이어폭스">
  <option value="크롬">
  <option value="오페라">
  <option value="사파리">
</datalist>

label 속성을 이용하면 브라우저에 따로 표시할 라벨을 지정할 수 있습니다. value 값이 서버로 넘겨질 값, label이 보여질 값이 됩니다.

<input list="brow">

<datalist id="brow">
  <option value="Explorer" label="익스플로어">
  <option value="Firefox" label="파이어폭스">
  <option value="Chrome" label="크롬">
  <option value="Opera" label="오페라">
  <option value="Safari">
</datalist>