강의명 : html
- HTML <datalist> 태그
<datalist> 태그는 <input> 요소에서 사용하기 위한 옵션들의 리스트를 미리 정의할 때 사용합니다.
<datalist> 요소는 사용자가 <input> 요소에 데이터를 입력할 때 미리 정의된 옵션을 드롭다운 리스트로 보여줌으로써 자동완성 기능을 제공합니다.
<input> 요소의 list 속성값으로 <datalist> 요소의 id 속성값을 명시하면, 해당 <datalist> 요소에서 미리 정의한 옵션들을 <input> 요소에서 사용할 수 있습니다.
<datalist> 요소는 사용자가 <input> 요소에 데이터를 입력할 때 미리 정의된 옵션을 드롭다운 리스트로 보여줌으로써 자동완성 기능을 제공합니다.
<input> 요소의 list 속성값으로 <datalist> 요소의 id 속성값을 명시하면, 해당 <datalist> 요소에서 미리 정의한 옵션들을 <input> 요소에서 사용할 수 있습니다.
예제
<form action="/examples/media/action_target.php" method="get">
학과 : <input type="text" name="st_department" list="depList"><br>
이름 : <input type="text" name="st_name"><br><br>
<datalist id="depList">
<option value="컴퓨터공학과"></option>
<option value="영어영문과"></option>
<option value="경영학과"></option>
<option value="사회체육과"></option>
</datalist>
<button type="submit">제출하기</button>
</form>
학과 : <input type="text" name="st_department" list="depList"><br>
이름 : <input type="text" name="st_name"><br><br>
<datalist id="depList">
<option value="컴퓨터공학과"></option>
<option value="영어영문과"></option>
<option value="경영학과"></option>
<option value="사회체육과"></option>
</datalist>
<button type="submit">제출하기</button>
</form>
댓글목록
등록된 댓글이 없습니다.