Introduction to the input type of HTML5

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.