Different input types in HTML

Different input types in HTML

K. M. Shawkat Zamil | December 13, 2022

Hello Developers,

Today I will cover the most important thing in the HTML part, which is input type. The <input type=' '> called the most important element of HTML. The type attribute of <input> has a lot of variety, which defines the information field. The combination of input-type elements is listed below:


<input type="button">

<input type="checkbox">

<input type="color">

<input type="date">

<input type="datetime-local">

<input type="email">

<input type="file">

<input type="hidden">

<input type="image">

<input type="month">

<input type="number">

<input type="password">

<input type="radio">

<input type="range">

<input type="reset">

<input type="search">

<input type="submit">

<input type="tel">

<input type="text">

<input type="time">

<input type="url">

<input type="week">

We can see some basic input type definitions:


type=" " Description
text The text type is simply used to show a one-line text input field.
password Password type used for the one-line password input field.
reset The reset button is used to reset all values in the form.
radio The radio button is used to allow select one option.
submit Submit type used to submit the form to the server.
checkbox Checkbox type used for allowing select multiple options form.
button The button type can be programmed to perform a task on an event.
file The file type is used for fetching the file from the device storage.
image Image type used for submitting a graphical submit button.










Recently HTML5 included some new input types, descriptions are given below:


type=" " Description
color The color input field defines a specific color.
tel The tel input type used for entering the telephone number.
number The number input field is used for entering a number.
url The URL input type used for entering URL
date Date input field is used for the selection of the date.
datetime-local Datetime-local input field is used for entering a date without a time zone.
email The email input field is used for entering an email address.
month The month type is used to take month and year, without a time zone.
week The week input type is used to enter the date with week-year, without a time zone.
search Search input type used to show single line text field for entering a search string.











Hope this will help with the journey of development.


Read More: Learn about HTML - <optgroup> Tag

K. M. Shawkat Zamil

K. M. Shawkat Zamil

Senior Software Engineer

I am a Senior Software Engineer in a reputed company in Bangladesh. I am a big fan of Laravel, PHP Programming, MSSQL Server, MySql, JavaScript, and lots more. I love to help people who are especially eager to learn. I believe in patience and motivation.