list 속성 (input)

정의

list 속성은 사용자에게 제안되는 미리 정의된 옵션들의 목록을 나타냅니다.

속성 값

이 속성이 사용되었다면, 값은 동일한 문서 내에 있는 datalist 요소id 속성의 값 여야 합니다.

예제

예제1

<label>자주 이용하는 검색사이트: <input name="searchSite" type="url" list="searchSites"></label>
<datalist id="searchSites">
  <option value="http://www.google.com" label="Google"></option>
  <option value="http://www.bing.com" label="Bing"></option>
</datalist>
Opera 11 에서 실행결과

[예제1]의 경우 사용자의 방문 기록에 기초해서 다른 URL을 제시할 수도 있습니다. 이것은 사용자 에이전트의 재량입니다.

예제2-1

<p>
  <label>
    선호하는 커피:
    <input type="text" name="coffee" list="coffees">
    <datalist id="coffees">
      <option value="에스프레소">
      <option value="아메리카노">
      <option value="카페라떼">
      <!-- ... -->
    </datalist>
  </label>
</p>

자동 완성 목록은 단순히 보조적인 기능일 뿐이며, 중요한 내용이 아니라면 datalist 요소를 사용하고 그 자식 요소로서 option 요소들을 사용하면 충분합니다. 구형 사용자 에이전트에서 속성값들이 노출되는 것을 방지하기 위해, option 요소들은 인라인으로 사용되는 것이 아니라 예제2-1과 같이 value 속성 안에 위치해야 합니다.

예제2-2

<p>
  <label>
    선호하는 커피:
    <input type="text" name="coffee" list="coffees">
  </label>
  <datalist id="coffees">
    <label>
      또는 목록에서 하나를 선택:
      <select name="coffee">
        <option value="">(선택해주세요.)
        <option>에스프레소
        <option>아메리카노
        <option>카페라떼
        <!-- ... -->
      </select>
    </label>
  </datalist>
</p>
Internet Explorer 8 에서 실행결과
Firefox 5 에서 실행결과

반대로, 속성값들이 중요하고 구형 사용자 에이전트에서도 보여져야 하는 것이라면, [예제2-2]와 같이 자동 완성 목록을 사용하면서도, 구형 사용자 에이전트에서는 효과적으로 단계적 기능 축소를 하는 방법으로 datalist 요소 안에 폴백 콘텐츠를 위치 시킬 수 있습니다. 폴백 콘텐츠는 사용자 에이전트가 datalist 요소를 지원하지 못하는 경우에만 보여질 것이며, 옵션들이 datalist 요소의 직접적인 자식 요소가 아니더라도 모든 사용자 에이전트에서 노출될 것입니다.

폴백 콘텐츠로 사용된 datalist 요소 내부에 위치한 option 요소selected 속성이 활성화된 상태라면, 구형 사용자 에이전트에서는 기본적으로 폴백 콘텐츠가 선택되겠지만(이것은 select 요소에 영향을 미칩니다), datalist 요소를 지원하는 사용자 에이전트에서는 그렇지 않을 것임을 염두에 두십시오.

참조

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

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