How to use HTML5 Input Types

This article describe about input type in HTML5.
  • 2022

HTML5 Input Types

There are several  new input types has in HTML5 for a from. These new input type feature allow to create better input control and Validation.

Note: Below given the several new input type.

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • url
  • week
  • range
  • search
  • tel
  • time

Note: These all input type supported by modern browser. If it does not then it behave like a regular text field.

Input Type: color

This input type contain the color. And it is used give color in input

 Select your color: <input type="color" name="yourcolor" /><br />

Input Type: date

It is allow to user for select date

Holiday: <input type="date" name="hday" />

Input Type: datetime

It is allow to user for select date as well as time according to time zone

Holiday(date and time): <input type="datetime" name="hdaytime" />

input Type: datetime-local

It is allow to user to select date and time but not according to time zone

Holiday (date and time): <input type="datetime-local" name="hdaytime" />

Input Type: Email

This input type contain email address

Enter Email: <input type="email" name="umail" />

Input Type: month

This input type allow to user to select month and year.

Holiday(month and year): <input type="month" name="hdaymonth" />

Input Type: number

This input type is used to select the numeric value

NO of item (between 1 and 10): <input type="number" name="item" min="1" max="10" />

Input Type: url

The input type url is used for input fields that contain a URL.

Automatically value is validate in the url field when the form is submitted

 ADD your Mainpage: <input type="url" name="Mainpage" />

Input Type: week

The input type week allow to the user to select input week and year

Select your desire week: <input type="week" name="year and week" />

Input Type: range

The range input type allow to user to insert number between a specific range. It also take restriction

Enter no <input type="range" name="e_no" min="1" max="10" />

These following attributes to specify restrictions:

  • max -It allow the maximum value
  • min - It allow the minimum value
  • step -It  is  specifies the legal number increment
  • value -It is  specifies the default value

Input Type: search

It is used to search the field that work like a regular text

Search Yahoo: <input type="search" name="Yahoosearch" />

Input Type: tel

This field define that enter telephone number

Telephone No: <input type="tel" name="tel" />

Input Type: time

This input type allow to user to select time

Select your desire time: <input type="time" name="desire_time" />

Further Readings

You may also want to read these related articles :

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

© 2019 DotNetHeaven. All rights reserved.