2011/09/20 에 해당되는 글 2건

  1. 2011.09.20 6.9 HTML5 Input Type: Date (1)
  2. 2011.09.20 6.8 HTML5 Input Type: Number
2011. 9. 20. 12:30

6.9 HTML5 Input Type: Date

HTML5 2011. 9. 20. 12:30
웹상에서 달력을 한 번 출력하려면 엄청난 양의 Java Script를 사용해야 구현이 가능 했습니다. HTML5의 웹 폼에서는 달력을 출력할 수 있는 태그가 별도로 제공되기 때문에 훨씬 간단하게 구현이 가능 합니다.

<input id="meeting" type="date" value="2011-01-13"/>

다만 글을 쓰고 있는 이 시점에서는 지원하는 웹 브라우저가 Opera 11 밖에 없다는 것이 특이한 점입니다.

Browsers Date Time Support
IE 9
Firefox 4
Safari 5
Chrome 8
Opera 11 ✓

일반적으로 Date를 사용하면 아래와 같은 모양이 됩니다.


여기에 약간의 변화를 준다면 Week, Month, Time도 사용 가능합니다.

<input type="week" ...

<input type="month" ...

<input type="time" ...

 

Attributes Descriptions
value Value is the default value of the input box when a page is first loaded. This is a common attribute for <input> element regardless which type you are using.
min Minimum Date or time
max Maximum Date or time
step Step scale factor. Different type of input has its own default "step" value.
  • Date - default is 1 day
  • Week - default is 1 week
  • Month - default is 1 month
  • Time - default is 1 minute
  • DateTime - default is 1 minute
  • Local DateTime - default is also 1 minute

김영욱 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>
저작자표시변경금지
html5, HTML5시리즈, Web Form
0 1
  • cosmos 2012.03.15 11:45

    <input type = "date"> 해보니깐 안되는데 왜 그럴까요? 크롬에서도 안되고 파이어폭스에서도 안되고 ....

2011. 9. 20. 08:30

6.8 HTML5 Input Type: Number

HTML5 2011. 9. 20. 08:30

Number 필드는 이름에서 볼 수 있듯이 숫자 입력을 편하게 하기 위해서 제안된 태크 입니다. 다른 웹 폼들도 대부분 그러하지만 Number 도 모바일 같이 입력이 제한된 환경에서 유용하게 사용됩니다. 
 
<input id="movie" type="number" value="0"/>

숫자를 입력하기 위해서 제안된 용도에 맞게 이 항목을 선택하게 되면 모바일 환경과 같이 입력기가 별도로 뜰 때에는 숫자를 입력하기 위한 용도의 입력기가 나타 납니다. 

 Number는 단순히 숫자 입력을 요구하기 위한 용도로 사용되지는 않습니다. 숫자 이외에 다른 문제는 입력을 거부하거나 지정된 범위를 벗어나는 숫자의 입력을 거부하는 용도로도 활용 될 수 있습니다.

Attributes Descriptions
value Value is the default value of the input box when a page is first loaded. This is a common attribute for <input> element regardless which type you are using.
min Obviously, the minimum value you of the number. I should have specified minimum value to 0 for my demo up there as a negative number doesn't make sense for number of movie watched in a week.
max Apprently, this represents the biggest number of the number input.
step Step scale factor, default value is 1 if this attribute is not specified.


일반적인 데스크탑 환경에서는 Chrome, Opera에서 Number 태그가 사용 가능합니다. Number 객체 옆에는 숫자를 올리거나 내일 수 있는 버튼이 함께 붙어 있습니다. Step 속성은 숫자를 높이거나 낮출 때 사용하는 버튼을 눌렀을 때 증가 혹은 감소되는 양을 지정하기 위한 속성입니다.

Browsers Render "Number" input as Spinner
IE 9
Firefox 4
Safari 5 ✓ (in Mac OS, but not Windows)
Chrome 8 ✓
Opera 11 ✓

Attributes Descriptions
value Value is the default value of the input box when a page is first loaded. This is a common attribute for <input> element regardless which type you are using.
min Obviously, the minimum value you of the number. I should have specified minimum value to 0 for my demo up there as a negative number doesn't make sense for number of movie watched in a week.
max Apprently, this represents the biggest number of the number input.
step Step scale factor, default value is 1 if this attribute is not specified.

Java Script에서 Number 객체를 활용 할 때에는 stepUp(), steopDown(), valueAsNumber 등의 속성을 사용할 수 있습니다.

  • spinner.stepUp(x) - x being the value you want to increase in the field.
  • spinner.stepDown(x) - x being the value you want to decrease in the field.
  • spinner.valueAsNumber - return value of input as floating point number instead of string.

    • 하지만 역시 웹 폼의 기능들은 모바일 환경에서 제일 유용합니다.


    김영욱 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>
    저작자표시변경금지
    html5, HTML5시리즈, Web Form
    1 0
    1