HTML5 the new Input type
HTML5 has more than one new form input type. 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 new input types. However, you can already use them in all major browsers. You can still display as a regular text field, even if it is not supported.
Input Type-Email
The email type is used for an input field that should contain an e-mail address.
The value of the email domain is automatically validated when the form is submitted.
Instance
E-mail: <input type= "Email" name= "User_email"/>
Tip: The Safari browser in the IPhone supports the email input type and fits it by changing the touchscreen keyboard (add @ and. com options).
Input Type-URL
The URL type is used for an input field that should contain a URL address.
When you submit the form, the value of the URL field is automatically validated.
Instance
Homepage: <input type= "url" name= "User_url"/>
Tip: The Safari browser in the IPhone supports URL input types and fits it by changing the touchscreen keyboard (Add. com option).
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 that you accept:
Instance
Points: <input type= "number" name= "Points" min= "1" max= "ten"/>
Use the following properties to specify a qualification for a number type:
Property |
value |
Description |
Max |
Number |
Specify the maximum allowable value |
Min |
Number |
Specify the minimum allowable value |
Step |
Number |
Specify the legal number interval (if step= "3", the legal number is -3,0,3,6, etc.) |
Value |
Number |
Set default values |
Tip: The Safari browser in the IPhone supports the number input type and fits it (display numbers) by changing the touch screen Keyboard.
Input Type-Range
The range type is used for input fields that should contain a range of numeric values.
The range type is displayed as a slider bar.
You can also set a limit on the number that you accept:
Instance
<input type= "range" name= "points" min= "1" max= "ten"/>
Use the following properties to specify a qualification for a number type:
Property |
value |
Description |
Max |
Number |
Specify the maximum allowable value |
Min |
Number |
Specify the minimum allowable value |
Step |
Number |
Specify the legal number interval (if step= "3", the legal number is -3,0,3,6, etc.) |
Value |
Number |
Set default values |
Input Type-date pickers (date selector)
HTML5 has multiple new input types available for selecting dates and times:
- Date-Select day, month, year
- Month-Select month, year
- Week-Select Zhou
- Time-Select 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
Date: <input type= "date" name= "User_date"/>
input type "month":
input type "Week":
Enter type "Time":
Enter 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.