HTML5 New Input Types

HTML/HTML5 2012.01.26 09:17 |


  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week



지원 브라우져
W : IE
F : Firefox
C : Chrome
S : Safari
O : Opera


O
Input Type : Color 

Select a color from a color picker: 
<input type="color" name="favcolor" />

C, S, O
Input Type : date 

The date type allows the user to select a date.
<input type="date" name="bday" />

C, S, O
Input Type : datetime
The datetime type allows the user to select a date and time (with time zone). 
<input type="datetime" name="bdaytime" />

C, S, O
Input Type : datetime-local

The datetime-local type allows the user to select a date and time (no time zone).
<input type="datetime-local" name="bdaytime" />

F, C, O
Input Type : email

The email type is used for input fields that should contain an e-mail address.
<input type="email" name="usremail" />

C, S, O
Input Type : month

The month type allows the user to select a month and year.
<input type="month" name="bdaymonth" />

C, S, O
Input Type : number

The number type is used for input fields that should contain a numeric value.

You can also set restrictions on what numbers are accepted:

Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />

Use the following attributes to specify restrictions:

  • max - specifies the maximum value allowed
  • min - specifies the minimum value allowed
  • step - specifies the legal number intervals
  • value - Specifies the default value

C, S, O
Input Type : range

The range type is used for input fields that should contain a value from a range of numbers.

You can also set restrictions on what numbers are accepted.

<input type="range" name="points" min="1" max="10" />

Use the following attributes to specify restrictions:

  • max - specifies the maximum value allowed
  • min - specifies the minimum value allowed
  • step - specifies the legal number intervals
  • value - Specifies the default value


C, S
Input Type : Search

The search type is used for search fields (a search field behaves like a regular text field).
Search Google: <input type="search" name="googlesearch" />


지원브라우저없음
 Input Type : tel
Telephone: <input type="tel" name="usrtel" />
 

C, S. O
Input Type : time

The time type allows the user to select a time.
Select a time: <input type="time" name="usr_time" />


F, C
Input Type : rul

The url type is used for input fields that should contain a URL address.

The value of the url field is automatically validated when the form is submitted.

Add your homepage: <input type="url" name="homepage" />


C, S, O
Input Type : week

The week type allows the user to select a week and year.
Select a week: <input type="week" name="week_year" />


 
신고

'HTML > HTML5' 카테고리의 다른 글

HTML5 New Input Types  (0) 2012.01.26
DOCTYPE 부터 시작  (0) 2012.01.25
HTML5 참고 W3School  (0) 2012.01.19
Posted by jeonguk