Types of Input Tags in HTML5

Input Color Type

 
This type is used for picking a color
 
<input type="color" name="mycolor" />
 
Input Color Type
 

Input Date Type

 
This type is used for picking the date from a PopupCalender or you can type it in. You can also set the calendar date of a time span via the "min" and "max" properties of this tag with type="date".
 
<input type="date" name="mydate" />
 
Input Date Type
 

Input Type: datetime-local

 
This type is picking the date from a PopupCalender and time by arrow keys in control or you can type both in.
 
<input type="datetime-local" name="mydateTimeLocal"/>
 
Input DateTime Type
 

Input month type

 
This type is used for picking the month and year from the PopupCalender.
 
<input type="month" name="mymonth"/>
 
Input Month type
 

Input number type

 
This type is used for an input field that will contain only numeric values.
 
You can also set the min and max value in this type.
 
<input type="number" name="mynumber" min="1" max="5"/>
 
Input number type
 

Input RANGE type

 
It’s a Slider control, if you don’t want to type it in then you can select the value via the slider. You need to give the min and max values of this type.
 
<input type="range" name="myrange" min="1" max="5"/>
 
Input RANGE type
 

Input Time type

 
This type is used for selecting the time by the user.
 
<input type="time" name="mytime" />
 
Input Time type
 

Input Week type

 
This type is used for selecting the week of a specific year.
 
<input type="week" name="myweek" />
 
Input Week type
 

Bind Datalist with input Tag in place of the select tag

 
Bind a list of data with an input tag without using the select tag.
  1. <input list="browsers"/>  
  2. <datalist id="browsers">  
  3. <option value="C"/>  
  4. <option value="C++"/>  
  5. <option value="C#"/>  
  6. <option value="JAVA"/>  
  7. <option value="PHP"/>  
  8. </datalist>   
Bind DataList
 
Note: All types of INPUT Tags are the basis on browsers, Google Chrome supports most of them.  

Recommended Ebook

Printing in C# Made Easy

Download Now!
Similar Articles