2011.09.15 10:39

DataList는 네이버나 구글에서 볼 수 있는 실시간 검색어 제안과 같은 역할을 담당합니다. 텍스트 박스에 키워드를 입력하는 순간 미리 입력되어 있는 내용과 입력하면 추천 키워드로 제안해 줍니다.

DataList도 아직 모든 브라우저에서 공통적으로 지원되지 않습니다. 현재는 FireFox 4와 Opera 11만 지원됩니다.

Browsers Datalist Support
IE 9
Firefox 4
Safari 5
Chrome 8
Opera 11

사용하는 방법은 아래와 같이 간단합니다. <datalist>태그를 사용하고 <datalist> </datalist>사이에 <option> 태그를 입력하면 됩니다.

<datalist id="country">
  <option value="Afghanistan">
  <option value="Albania">
  <option value="Algeria">
  <option value="Andorra">
  <option value="Angola">
</datalist>

김영욱 iwinkey@hotmail.com

현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다.
올해는 컨슈머와 관련된 앱을 만드는 다양한 업체들을 발굴하고 지원하는 일을 맡고 있습니다.


HTML5 강좌 전체 목록
  1. HTML5 DocType의 정의
  2. HTML5 Header stuff
  3. Audio
  4. Video
  5. Canvas
    Canvas: Rectangle
    Canvas: Shadow
    Canvas: Path
    Canvas: Image
    Canvas: Text
  6. Web form 2.0
    Input Attr: Placeholder
    Input Attr: Autofocus
    Input Attr: Required field
    Input Attr: DataList
    Input Type: Search
    Input Type: Email, URL, Phone
    Input Type: Range
    Input Type: Number
    Input Type: Date
    Input Type: Color
  7. Towards Semantic Web
    Semantic <mark>
    Semantic <time>
    Semantic <meter>
    Semantic <progress>
    Semantic <section>
    Semantic <header>
    Semantic <footer>
    Semantic <nav>
    Semantic <article>
    Semantic <aside>
저작자 표시 변경 금지
신고