datalist 요소

정의

predefined options for other controls; datalist 요소는 다른 컨트롤에서 사용할 수 있도록 미리 정의된 옵션 집합을 나타냅니다. 요소의 내용은 미리 정의된 옵션을 나타내는 option 요소와 섞여서 구형 사용자 에이전트를 위한 폴백 요소를 나타냅니다. 렌더링 과정에서는 아무것도 나타내지 않습니다.

마크업 규칙

Flow Interactive Metadata Phrasing Embedded Heading Sectioning

기본 문법은 다음과 같습니다. 데모

<form>
  <input type="text" list="search">
  <datalist id="search">
    <option value="date">날짜로 검색</option>
    <option value="subject">제목으로 검색</option>
    <option value="name">이름으로 검색</option>
  </datalist>
</form>

이와 같이 마크업하면 인풋 요소가 포커스를 받았을 때 데이터 리스트에 미리 제안된 옵션이 나타납니다. 예제의 결과는 다음과 같이 나타납니다.

예제 결과

속성

속성명 설명
전역 속성 공통 속성

메모

HTML4/XHTML1과의 차이점, 접근성, 보충 내용 그리고 편집자 의견 등을 포함하고 있습니다.

참조

기준 명세를 바탕으로 명세 번역과 레퍼런스 제작이 이루어졌습니다. 최근 내용은 최신 명세를 확인해 주세요.

관련 요소

 
html5/element/datalist.txt · 마지막 수정: 2013/11/19 13:35 (외부 편집기)
이 레퍼런스는 클리어보스가 제작/운영하고 있으며, 다음의 라이센스를 따릅니다 :CC 저작자표시-비영리-동일조건변경허락 2.0
Recent changes RSS feed World Wide Web Consortium Driven by DokuWiki