HTML5 Input type

HTML5 has several new form input types. These new features provide better input control and verification.

This chapter provides a comprehensive introduction to these new input types:

Color
Date
Datetime
Datetime-local
Email
Month
Number
Range
Search
Tel
Time
Url
Week

Note : Not all major browsers support the new input type, but 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: color

The color type used in the input field is mainly used to select the color, as shown below:


Run the program and try it out

Input type: date

The date type allows you to select a date from a date picker.


Run the program and try it out

Input type: Datetime

The datetime type allows you to choose a date (UTC time).

Instance

Define a date and time controller (local time):
Run the program and try it out

Input type: datetime-local

The datetime-local type allows you to choose a date and time (no time zone).

Instance

Define a date and time (no time zone):

Run the program and try it out

Input Type: email

The email type is used for input fields that should contain an e-mail address.

Instance

When the form is submitted, it automatically verifies that the value of the email domain is legal and valid:

Run the program to enter a legal and illegal email. Try it out.

Note : Type="email" is not supported in Internet Explorer 9 and earlier versions of IE.

Input type: month

The month type allows you to select a month.

Instance

Define the month and year (no time zone):

Run the program and try it out

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 you accept:

Instance

Define a numeric input field (qualified):

Run the program and try it out

Use the following properties to specify a limit on the number type:

Max- specifies the maximum allowed

Min - specifies the minimum allowed

Step - specifies a legal number interval (if step="3", the legal number is -3, 0, 3, 6, etc.)

Value - specifies the default value

Instance

Example with all qualified attributes

Run the program and try it out

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.

Instance

Define a value that does not require very precise (similar to slider control):

Run the program and try it out

Use the following properties to specify a limit on the number type:

Max - specifies the maximum allowed

Min - specifies the minimum allowed

Step - specifies a legal number interval

Value - specifies the default value

Input Type: search

The search type is used to search for domains, such as site search or Google search.

Instance

Define a search field (like site search or Google search):

Run the program and try it out

Input Type: tel

Instance

Define the input phone number field:

Run the program and try it out

Input type: time

The time type allows you to choose a time.

Instance

Define the input time controller (no time zone):

Run the program and try it out

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 verified when the form is submitted.

Instance

Define the input URL field:

Run the program and try it out

Input type: week

The week type allows you to choose weeks and years.

Instance

Define week and year (no time zone):

Run the program and try it out

HTML5 <input> tag

     label     description
     <input>Describe input input

Note : Not all major browsers support the new input type, but 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.

Last Updated: 2018-07-06 12:32:44 By akshay

SHARE THIS

share_facebook share_twitter share_google_plus

Please Comment Here :