There are 10 important new form elements in HTML 5:

  1. Color
  2. Date
  3. Datetime-local
  4. Email
  5. Time
  6. URL
  7. Range
  8. Telephone
  9. Number
  10. Search

If you want to show color picker dialog box see bellow code:

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

If you want to show calendar dialog box see bellow code:

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

If you want to show calendar with local time dialog box see bellow code:

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

If you want to create a HTML text with email see bellow code:

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

If you want to set the type as “url” see bellow code:

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

If you want to display textbox with number range you can set type to number see code:

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

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

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

If you want to make search engine box.

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

If you want to take time input:

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

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

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

%d bloggers like this: