New Element types in HTML5

What are the different new form element types in HTML 5?

There are 10 important new form elements introduced in HTML 5:-

1.       Color.

2.       Date

3.       Datetime-local

4.       Email

5.       Time

6.       Url

7.       Range

8.       Telephone

9.       Number

10.    Search

Let’s understand these elements step by step.

If you want to show color picker dialog box.

<input type="color" name="favcolor"> 

Pic1:

If you want to show calendar dialog box.

<input type="date" name="bday"> 

Pic2:

If you want to show calendar with local time.

<input type="datetime-local" name="bdaytime"> 

Pic3:

If you want to create a HTML text with email validation we can set the type as “email”.

   

<input type="email" name="email">

Pic4:

For URL validation set the type as “url” as shown in the below HTML code.

   

<input type="url" name="sitename"> 

Pic5:

 

For URL validation set the type as “url” as shown in the below HTML code.

If you want to display textbox with number range you can set type to number.

<input type="number" name="quantity" min="1" max="5"> 

Pic6:

If you want to display a range control you can use type as range.

<input type="range" min="0" max="10" step="2" value="6">

Pic7:

Want to make text box as search engine box.

<input type="search" name="googleengine"> 

What to only take time input.

   

<input type="time" name="usr_time"> 

If you want to make text box to accept telephone numbers.

<input type="tel" name="mytel">