8/3/13
HTML5 Input Types
Search w3schools.com: Select Language
HOME
HTML
C SS
JAVASC RIPT
JQUERY
XML
ASP.NET
PHP
SQL
MORE...
R EFER ENC ES
EXAMPLES
FO R UM
ABO UT
Get Certified
Study Web Technologies and get a diploma at w3schools.com
SHARE THIS PAGE
Like
76k
HTML Basic
HTML HOME HTML Introduction HTML Editors HTML Basic HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Formatting HTML Links HTML Head HTML CSS HTML Images HTML Tables HTML Lists HTML Blocks HTML Layout HTML Forms HTML Iframes HTML Colors HTML Colornames HTML Colorvalues HTML JavaScript HTML Entities HTML URL Encode HTML Quick List HTML Summary HTML XHTML
HTML5 Input Types
Previous Next Chapter
WEB HOSTING
Best Web Hosting eUK Web Hosting UK Reseller Hosting Domain, Hosting & Email
HTML5 New Input Types
HTML5 has several new input types for forms. These new features allow better input control and validation. This chapter covers the new input types: color date datetime datetime-local email month number range search tel time url week Note: Not all major browsers support all the new input types. However, you can already start using them; If they are not supported, they will behave as regular text fields.
WEB BUILDING
XML Editor - Free Trial! FREE Website BUILDER FREE Website C reator Best Website Templates
STATISTICS
Browser Statistics OS Statistics Display Statistics
Input Type: color
The color type is used for input fields that should contain a color.
Example
Select a color from a color picker:
S e l e c ty o u rf a v o r i t ec o l o r :< i n p u tt y p e = " c o l o r "n a m e = " f a v c o l o r " >
Try it yourself
HTML5 News
HTML5 Intro HTML5 New Elements HTML5 Canvas HTML5 SVG HTML5 Drag/Drop HTML5 Geolocation HTML5 Video HTML5 Audio HTML5 Input Types HTML5 Form Elements HTML5 Form Attributes HTML5 Semantic HTML5 Web Storage HTML5 App Cache HTML5 Web Workers HTML5 SSE
Input Type: date
The date type allows the user to select a date.
Example
Define a date control:
B i r t h d a y :< i n p u tt y p e = " d a t e "n a m e = " b d a y " >
Try it yourself
Input Type: datetime
The datetime type allows the user to select a date and time (with time zone).
HTML Media
HTML Media HTML Object HTML Audio HTML Video HTML YouTube
Example
Define a date and time control (with time zone):
B i r t h d a y( d a t ea n dt i m e ) :< i n p u tt y p e = " d a t e t i m e "n a m e = " b d a y t i m e " >
Try it yourself
HTML Examples
HTML Examples HTML Quiz HTML5 Quiz HTML Certificate HTML5 Certificate
Input Type: datetime-local
The datetime-local type allows the user to select a date and time (no time zone).
Example
Define a date and time control (no time zone):
HTML References
HTML Tag List HTML Attributes
B i r t h d a y( d a t ea n dt i m e ) :< i n p u tt y p e = " d a t e t i m e l o c a l "n a m e = " b d a y t i m e " >
w3schools.com/html/html5_form_input_types.asp
1/4
8/3/13
HTML Events HTML Canvas HTML Audio/Video HTML Doctypes HTML Colornames HTML Colorpicker HTML Colormixer HTML Character Sets HTML ASCII HTML ISO-8859-1 HTML Symbols HTML URL Encode HTML Lang Codes HTTP Messages HTTP Methods Keyboard Shortcuts Try it yourself
HTML5 Input Types
Input Type: email
The email type is used for input fields that should contain an e-mail address.
Example
Define a field for an e-mail address (will be automatically validated when submitted):
E m a i l :< i n p u tt y p e = " e m a i l "n a m e = " e m a i l " >
Try it yourself Tip: Safari on iPhone recognizes the email type, and changes the on-screen keyboard to match it (adds @ and .com options).
Input Type: month
The month type allows the user to select a month and year.
Example
Define a month and year control (no time zone):
B i r t h d a y( m o n t ha n dy e a r ) :< i n p u tt y p e = " m o n t h "n a m e = " b d a y m o n t h " >
Try it yourself
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:
Example
Define a numeric field (with restrictions):
Q u a n t i t y( b e t w e e n1a n d5 ) :< i n p u tt y p e = " n u m b e r "n a m e = " q u a n t i t y "m i n = " 1 "m a x = " 5 " >
Try it yourself 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 Try an example with all the restriction attributes: Try it yourself
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.
Example
Define a control for entering a number whose exact value is not important (like a slider control):
< i n p u tt y p e = " r a n g e "n a m e = " p o i n t s "m i n = " 1 "m a x = " 1 0 " >
Try it yourself 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
Input Type: search
The search type is used for search fields (a search field behaves like a regular text field).
Example
Define a search field (like a site search, or Google search):
S e a r c hG o o g l e :< i n p u tt y p e = " s e a r c h "n a m e = " g o o g l e s e a r c h " >
Try it yourself
w3schools.com/html/html5_form_input_types.asp
2/4
8/3/13
HTML5 Input Types
Input Type: tel
Example
Define a field for entering a telephone number:
T e l e p h o n e :< i n p u tt y p e = " t e l "n a m e = " u s r t e l " >
Try it yourself
Input Type: time
The time type allows the user to select a time.
Example
Define a control for entering a time (no time zone):
S e l e c tat i m e :< i n p u tt y p e = " t i m e "n a m e = " u s r _ t i m e " >
Try it yourself
Input Type: url
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.
Example
Define a field for entering a URL:
A d dy o u rh o m e p a g e :< i n p u tt y p e = " u r l "n a m e = " h o m e p a g e " >
Try it yourself Tip: Safari on iPhone recognizes the url input type, and changes the on-screen keyboard to match it (adds .com option).
Input Type: week
The week type allows the user to select a week and year.
Example
Define a week and year control (no time zone):
S e l e c taw e e k :< i n p u tt y p e = " w e e k "n a m e = " w e e k _ y e a r " >
Try it yourself
HTML5 <input> Tag
Tag <input> Description Defines an input control
Previous
Next Chapter
Top 10 Tutorials
HTML Tutorial HTML5 Tutorial C SS Tutorial C SS3 Tutorial JavaScript Tutorial jQuery Tutorial SQL Tutorial
Top 10 References
HTML/HTML5 Reference C SS 1,2,3 Reference C SS 3 Browser Support JavaScript HTML DOM XML DOM PHP Reference
Examples
HTML Examples C SS Examples XML Examples JavaScript Examples HTML DOM Examples XML DOM Examples AJAX Examples
Quizzes
HTML Quiz HTML5 Quiz XHTML Quiz C SS Quiz JavaScript Quiz jQuery Quiz XML Quiz
Color Picker
Statistics
w3schools.com/html/html5_form_input_types.asp
3/4
8/3/13
PHP Tutorial ASP.NET Tutorial XML Tutorial jQuery Reference ASP.NET Reference HTML C olors
HTML5 Input Types
ASP.NET Examples Razor Examples ASP Examples SVG Examples ASP Quiz PHP Quiz SQL Quiz Browser Statistics Browser OS Browser Display
RE P O RT E RRO R
HO ME
TO P
P RI N T
FO RU M
A BO U T
A D V E RT I SE WI T H U S
W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use and privacy policy. C opyright 1999-2013 by Refsnes Data. All Rights Reserved.
w3schools.com/html/html5_form_input_types.asp
4/4
