There are in total 22 input types in html
Watch Video Version:
1) Button
<input type="button">
First one we all know is button!
You can create buttons and style them however you want!
2) checkbox
<input type="checkbox">
Give options to your users and let them check as many boxes as they want!
3) color
<input type="color">
Let the user select any color they like
4) date
<input type="date">
User can choose day, month, and year
5) datetime-local
<input type="datetime-local">
Same as date (user can pick day, month, year) but the user can also pick time!
6) email
<input type="email">
User can only put in email address and no other text when form is submitted
7) file
<input type="file">
Let the user send files to your server BUT make sure to have backend code so they can't send malicious files to your server
8) hidden
<input type="hidden">
This type lets the developer to include any data that the user can not modify when form is submitted
9) image
<input type="image">
This lets the developer to put an image as the submit button of a form, instead of an actual button.
10) month
<input type="month">
User can only select month and year
11) number
<input type="number">
User can only insert number in the field, no text is allowed
12) password
<input type="password">
User can insert text in the field and it will display it as bullet points instead of the actual text
13) radio
<input type="radio">
User can only select one option from list of options
14) range
<input type="range">
User can adjust the bar and get a number value out of it
15) reset
<input type="reset">
You can let the user reset the form after they have put in their information but have not submitted it yet
16) search
<input type="search">
This is similar to the text input but it is styled differently
17) submit
<input type="submit">
Submit sends the form information to the server
18) tel
<input type="tel">
Let the user put in their telephone number, however it is not checked for telephone format when form is submitted because telephone numbers vary a lot around the world
19) text
<input type="text">
Simple field for inputting text
20) time
<input type="time">
Let the user select hours, minutes, seconds, and even am or pm
21) url
<input type="url">
Let the user only put in url
Field is checked for formatting when it is submitted
22) week
<input type="week">
Let the user select a week number in a year
and that is 22 input types explained,
Follow for more!