HTML5 the new Input type
HTML5 has a number of new form input types. These new features provide better input control and validation.
This chapter provides a comprehensive overview of these new input types:
- Email
- Url
- Number
- Range
- Date pickers (date, month, week, Time, DateTime, datetime-local)
- Search
- Color
Browser support
Input Type |
IE |
Firefox |
Opera |
Chrome |
Safari |
Email |
No |
4.0 |
9.0 |
10.0 |
No |
Url |
No |
4.0 |
9.0 |
10.0 |
No |
Number |
No |
No |
9.0 |
7.0 |
No |
Range |
No |
No |
9.0 |
4.0 |
4.0 |
Date pickers |
No |
No |
9.0 |
10.0 |
No |
Search |
No |
4.0 |
11.0 |
10.0 |
No |
Color |
No |
No |
11.0 |
No |
No |
Note: Opera has the best support for the new input type. However, you can already use them in all major browsers. Even if it is not supported, it can still be displayed as a regular text field.
Input Type-Email
The email type is used for input fields that should contain e-mail addresses.
When the form is submitted, the value of the email domain is automatically validated.
Instance
type="email"
Name= "User_email"/>
Tip: The Safari browser in the IPhone supports the email input type and works with it by changing the touch-Screen Keyboard (add @ and. com options).
Input Type-URL
The URL type is used for the input domain that should contain the URL address.
When the form is submitted, the value of the URL field is automatically validated.
Instance
type="url"
Name= "User_url"/>
Tip: The Safari browser in the iPhone supports the URL input type and works with it by changing the touch-screen Keyboard (adding. com options).
Input Type-Number
The number type is used for input fields that should contain numeric values.
You can also set a limit on the number of accepted numbers:
Instance
type="number"
Name= "Points" min= "1" max= "ten"/>
Properties |
value |
Description |
Max |
Number |
Specify the maximum allowable value |
Min |
Number |
Minimum allowable value is specified |
Step |
Number |
Specify a valid number interval (if step= "3", the legal number is -3,0,3,6, etc.) |
Value |
Number |
Specify default values |
Tip: The Safari browser in the IPhone supports the number input type and works with it by changing the touch-screen keyboard (displaying numbers).
Input Type-Range
The range type is used for input fields that should contain numeric values in a range.
The range type is displayed as a slider bar.
You can also set a limit on the number of accepted numbers:
Instance
type="range"
Name= "Points" min= "1" max= "ten"/>
Use the following properties to specify the qualification for numeric types:
Properties |
value |
Description |
Max |
Number |
Specify the maximum allowable value |
Min |
Number |
Minimum allowable value is specified |
Step |
Number |
Specify a valid number interval (if step= "3", the legal number is -3,0,3,6, etc.) |
Value |
Number |
Specify default values |
Input Type-date pickers (date selector)
HTML5 has several new input types that can be selected for the date and time:
- Date-Select day, month, year
- Month-Select months, years
- Week-Select minute
- Time-Select the Times (hours and minutes)
- DateTime-Select time, day, month, year (UTC time)
- Datetime-local-Select time, day, month, year (local time)
The following example allows you to select a date from the calendar:
Instance
type="date"
Name= "User_date"/>
input type "month":
input type "Week":
input type "time":
input type "datetime":
input type "datetime-local":
Input Type-Search
The search type is used for searching domains, such as site search or Google search.
The search field appears as a regular text field.
HTML5 Input Type