HTML5 Input Type

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