2011.09.19 08:30
Email, Phone, URL등 정형화된 입력 유형의 입력을 도와주는 타입이 HTML5에서 추가 되었습니다. 입력하려는 내용이 구체적으로 명시되면서 입력을 적극적으로 도와 줄 수 있게 되었는데 주로 입력이 불편한 모바일 환경에서 적극적으로 활용되고 있습니다.
 아래와 같이 email, url, tel 등 타입을 명시하게 되면 HTML5를 지원하는 웹 브라우저는 여기에 적합한 입력기 형태를 노출해 줍니다. 현재로는 주로 모바일 환경에서 이를 지원하도록 되었습니다.

<input id="email" type="email"/>
<input id="website" type="url"/>
<input id="phone" type="tel" />



아래는 안드로이드 계열의 폰과 iOS계열의 스마트 폰에서 위의 폼을 접근했을 때 유형 별로 어떤 입력기가 출력되는지를 볼 수 있습니다.


김영욱 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>

저작자 표시 변경 금지
신고