Usage of new Input types in HTML5

0
6745
Input types

We will be using the new input types introduced in the HTML5 specification. We will be using

color
date
datetime
email
list
range
online Search
telephone number
time
url

All of them have specific input type in HTML5. We will be creating a form which uses each of these input types. You can put it in a local apache server and see the effect by going to the localhost url

Step 1 :

Open your favorite texteditor and create a file name input.html .

Step 2 :

Type in the header like content like the following

Step 3 :

Write the first three body elements

We have added the input type color for the heading favorite color, input type date for Birthdate and datetime for input name Date and Time.

Step 4

Add the code for the remaining input types as per our initial plan

In the code above we have used input type for email, month and year, list, range, search, phone number, time and url. We have not used any back end technology here but is showing the use of new tags in HTML5. You should try and get the input in any PHP or ASP page to process the data.

The output will look like the following

inputtypes

LEAVE A REPLY

Please enter your comment!
Please enter your name here