1. input Element 의 새로운 Type
web form 은 10년이 넘도록 checkbox, radio, password, select, file, submit, text 와 같은 몇개의 입력타입만 가지고 있었습니다. 많은 이들이 그동안 javascript 와 씨름하느라 몸고생, 맘고생 많이들 하셨으리라... ^^

이젠 새롭게 몇가지?의 Type 이 추가되었습니다.

1-1. datetime, week, month, date, time
날짜 관련 Type 들입니다.
Web Browser 들마다 지원하는 Form  이 다른데요...
Opera 가 젤루다 좋은 것 같아요. 그래서 Browser 비교는 internet explore 9 과 opera 11 과 했습니다.
현재 PC 에 internet explore 10 을 설치할 수 없어서 image Capture 가... ^^;

Markup은 아래와 같이...
<input type="datetime">
<input type="week">
<input type="month">
<input type="date">
<input type="time">
<input type="datetime-local">


입력합니다.

datetime 부터 이미지로 확인해 보죠...



Opera 에서는 날짜 선택 Control 이 rendering 되네요... ^^

다음은 date Type 입니다.

똑같이 날짜 선택 Control 이 나타나죠?
month Type 은 date Type 과 동일하게 나타납니다.

다음은 Week Type 입니다.

날짜 선택 Control 좌측에 Week 가 표시되어 있는 것을 보실 수 있습니다.

다음은 time type.
시간을 선택할 수 있도록 Spin Control 을 rendering 합니다.



1-2. email
email 을 받아들이는 input type 입니다.
뭐 type 에 email type 을 부여한다고 해서 달라지는 것이 있을까?
email Type 을 지원하지 않는 Web Browser 는 text type 으로 인식을 할 것이고 Web Browser 에 따라서는 Validation Check 까지 할 수 있도록 지원해 줄 것입니다.

(참고 : naradesign.net)


또한, iphone 의 경우에는 input field 에 커서를 가져갔을 때 "@" 와 "." 이 포함된 Screen Keyboard 를 띄워 줄것입니다. 

(참고 : naradesign.net)

<input type="email" />


1-3. url
이번엔 URL type 입니다.
Web Browser 에서는 text type 의 외관과 별 차이가 없으므로 iphone 에서 어떻게 보이는지만 확인하도록 하죠.

 

이미지 하단을 보시면 "/" 와 ".com" 버튼이 보이실 겁니다.
URL 에 맞게 Screen Keyboard 가 배치되어 있군요.

<input type="url" />

1-4. color
Color Type 은 여러분이 생각하시기에도 Color 를 선택할 수 있는 Control 이 나타나야 한다고 생각하지 않으십니까?

Opera 에서는 구현이 되어있군요.
먼저 단순한 Color 선택 Control 이 나타나고 "Other..." 버튼을 Click 하게 되면 Color 대화상자가 뜨는 군요...

<input type="color" />

1-5. search
Search Type 또한 외관은 Text Type 과 다르지 않습니다. 그래서 iphone 의 모양을 살펴보도록 하겠습니다.

보시는 바와 같이 이미지 하단 우측의 버튼이 "Search" 버튼으로 바뀌어 있는 것을 보실 수 있습니다.

<input type="search" />

1-6. number
이번엔 number Type 입니다.

일단 숫자를 마우스로도 입력할 수 있도록 Spin Control 로 rendering 하고 있고요.

iphone 에서는 Screen Key Board 의 상단에 숫자 Key 가 배열되어 있는 것을 보실 수 있습니다.

<input type="number" min="1" max="100" />

1-7. range
range Type 은 입력형태를 number Type 에서 제공할 수 있는 Spin Control 과는 다르게 Slide Control 로 rendering 합니다.

<input type="range" min="0" max="100" step="10" value="0" />


1-8. tel
tel Type 의 경우는 완전히 숫자만 입력하지요.
iphone 에서는 아래와같이 숫자 입력 Screen Keyboard 가 나타나는 군요... ^^

<input type="tel" />

1-9. file
file Type 의 경우 예전에는 하나의 input Tag 에 하나의 파일만 선택할 수 있었습니다.
하지만 HTML 5 에서는 multiple 속성을 주어 여러 파일들을 선택할 수 있고
accept 속성을 사용하여 MIME type 을 선택하여 파일들을 filtering 할 수 있습니다.

<input type="file" accept="image/*" multiple />

위 Tag 를 Markup 하면 아래 이미지와 같은 파일 선택 대화상자가 나타나며 image 를 Filtering  할 수 있습니다. 




2. input Element 의 새로운 Attribute

2-1. placeholder

PlaceHolder 가 뭐냐구요?


위 이미지를 보시면 비어있는 TextBox 에 미리 Text을 넣어 두는 것인데요... 사용자가 Click 을 하거나 Control 에 Focus 가 가게되면 Placeholder Text 는 잽싸게 사라지죠.
이젠 이 기능을 javascript 의 도움없이도 사용할 수 있게 되었답니다.

<input name="w" placeholder="Email 을 적어주셔요.">



이렇게 말이죠...

2-2. autofocus
기존의 페이지들은 Autofocus 기능을 Javascript 를 이용해서 구현을 했습니다. 하지만, 구현하는 것이 그리 만만하지는 않았죠. 구현보다도 구현후에 페이지 Loading 과 사용자의 엑션 사이에서 문제가 좀 있었습니다. Page Loading 중 사용자가 입력을 하고 있는 상황이라면 사용자가 원하지 않는 곳(Page Loading 후에 autofocus 가 위치한 곳) 에 입력을 하고 있을 수 있습니다.
사이트 로그인을 하겠다고 id 란에 id 를 입력하고 password 란에 password 를 입력하고 있는데... 그 순간 Focus 가 javascript 에 의해서 다른 입력 Field 에 가 버려서... 입력한 Password 가 훤히 다 보인다면? ㅋㅋㅋ
사용자는 쬐끔 퐝당하겠죠? 이런 경험 한번쯤 있으실지도...

이젠 javascript 를 사용하지 않아도 됩니다. autoscript 속성을 설정하면 page 가 Load 되자마자 Focus 가 설정된 곳으로 이동할 것입니다.
또 Script 가 아닌 Markup 으로 동작하는 것이기 때문에 모든 Web Browser 에서 똑같이 동작할 것이구요. (Web Browser 가 설정해 놓았다면요... 옵션으로 제공할 수도 있겠죠.)

그리고 autofocus 는 다음과 같이 설정하면 됩니다.
<input name="w" autofocus>


2-3. formaction
formaction 속성을 사용하면 Page Form 의 action 이 되는 대상 Page에 가기전에 input Element 단에서 대상 Page 를 바꾸어 버릴수 있습니다. 

<form action="woolla.aspx" method="post">
    <input type="submit" formaction="woojja.aspx" value="Submit" />
</form>
위 Markup 의 내용을 보면 "woolla.aspx" 페이지로 이동할 것이 "woojja.aspx" 페이지로 이동하게 되겠죠...


3. 새로 추가된 Element

3-1. Keygen Element
Keygen Element 는 form 을 전송할 때 키를 생성하는 Control 입니다. form 이 전송되면 비밀키와 공개 키를 생성하여 비밀키는 Client 측에 저장하고 공개키는 서버에 전송합니다. HTML 5 에서 규정하는 Key 의 Type 은 "RSA" 뿐이므로 keytype 속성에는 "rsa" 만을 사용할 수 있습니다. 지정하지 않아도 기본값으로 지정합니다.
이젠 Keygen 요소를 사용하여 기존 ActiveX 를 사용하던 방식을 떨쳐버릴수 있을 것입니다.  기다려보도록 하죠...

<keygen name="key" type="rsa">


3-2. Output Element
Output Element 는 무언가의 계산 결과를 나타냅니다.
range Element 와 output Element 를 함께 사용하는 예를 살펴보도록 하지요.

<input type="range" id="rng" value="0"><output onformchange="value=form.elements.rng.value" for="rng">0</output>


output Element value 속성을 넣을 수 없으므로 주의하시길...

3-3. progress Element
Progress Element 는 작업의 진행정도를 나타냅니다.

<progress value="0.75" max="1">0</progress>

 



3-4. meter
meter Element 는 한정된 범
meter Element 는 한정된 범위에서의 값을 나타내고 싶을때 사용하는 것으로 최솟값과 최댓값을 지정할 수 없는 곳에서는 meter Element 를 사용할 수 없습니다.

예를 한번 볼까요?

<meter value="25" min="0" low="30" high="70" max="100" optimum="100">25점</meter>





지금까지 새로 추가된 Element 들 중 중요하다고 생각한 것들을 중심으로 간략하게 살펴보았습니다.

어떤가요? 지금까지 고생하던 것들이 조금은 사라질 것 같지 않습니까? ^^
저만 기분이 좋아진걸 까효? ^^;

마지막으로 페이지하나 소개하려합니다.
사용하는 Web Browser 를 이용하여 아래 Page 를 가셔서 input type 의 속성 지원여부를 확인할 수 있습니다.
http://miketaylr.com/code/input-type-attr.html

한번 방문해 보시기 바랍니다.

아 참...
위 내용들은 본인의 생각도 물론 많이? 포함되어 있지만

http://www.w3.org/TR/2011/WD-html5-20110525/
웹혁명을 꿈꾸다 HTML5 & API 입문
웹표준 가이드 HTML5 CSS3
앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS
철저해설 HTML 5
구글개발자가 들려주는 HTML5 활용

등을 참고했습니다.


행복한 고수되셔요.


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\



'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 8. Video Element  (3) 2011.06.10
[HTML 5] 7. Rich Text Edit API  (0) 2011.06.08
[HTML 5] 6. Strong Web Form  (0) 2011.06.05
[HTML 5] 5. Sementic Element (2)  (1) 2011.06.01
[HTML 5] 4. Sementic Element (1)  (0) 2011.05.29
[HTML 5] 2. HTML4 vs HTML5 (1)  (0) 2011.05.14
Posted by woojja