Different input types in HTML
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. |
| 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
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.