HTML <input> Types
Do you know?
There are almost 22 types of input fields 🤯
Let's see how many of them you know.
A thread ⤵️
#100DaysOfCode #CodeNewbie
Do you know?
There are almost 22 types of input fields 🤯
Let's see how many of them you know.
A thread ⤵️
#100DaysOfCode #CodeNewbie
🔸 Input type text
The most common type of input used is of type text. It defines a single-line text input field.
<input type="text">
The most common type of input used is of type text. It defines a single-line text input field.
<input type="text">
🔸Input type submit
This type is rendered as the button. When the user clicks on this (click event) the form is submitted to the server.
<input type="submit">
This type is rendered as the button. When the user clicks on this (click event) the form is submitted to the server.
<input type="submit">
🔸 Input type reset
This is also rendered as a button. It reset the form values to the default.
<input type="reset">
This is also rendered as a button. It reset the form values to the default.
<input type="reset">
🔸 Input type button
It defines a simple button. The functionality of this button is handled by JavaScript.
<input type="button">
It defines a simple button. The functionality of this button is handled by JavaScript.
<input type="button">
🔸 Input type checkbox
It defines a checkbox. Checkboxes are used where we want the user to select one or more options.
<input type="checkbox">
It defines a checkbox. Checkboxes are used where we want the user to select one or more options.
<input type="checkbox">
🔸 Input type radio
This is rendered as the radio buttons. Radio buttons are generally round buttons and get filled when we click on them. We use the radio button when we want the user to select only one of the given options.
<input type="radio">
This is rendered as the radio buttons. Radio buttons are generally round buttons and get filled when we click on them. We use the radio button when we want the user to select only one of the given options.
<input type="radio">
🔸 Input type password
It defines the password field. It's simply a text field but when user type into the characters is hidden by default. Normally, the characters are replaced by the asterisk ( * )
<input type="password">
It defines the password field. It's simply a text field but when user type into the characters is hidden by default. Normally, the characters are replaced by the asterisk ( * )
<input type="password">
🔸 Input type number
The type number is rendered as the numeric field input. You can also set a range of numbers to be accepted, using the "min" and "max" attributes.
<input type="number" min="1" max="99">
The type number is rendered as the numeric field input. You can also set a range of numbers to be accepted, using the "min" and "max" attributes.
<input type="number" min="1" max="99">
🔸 Input type range
This type is used to select a certain value between the min and max value. However, the exact value is not important. This is rendered as a slider. The default range is 0 to 100.
<input type="range">
This type is used to select a certain value between the min and max value. However, the exact value is not important. This is rendered as a slider. The default range is 0 to 100.
<input type="range">
🔸 Input type tel
This input field is used where the user is expected to enter the telephone number. You can use the "pattern" attribute to specify the pattern in which the user should fill it. The pattern is the Regex.
<input type="tel" pattern="[0-9]{10}">
This input field is used where the user is expected to enter the telephone number. You can use the "pattern" attribute to specify the pattern in which the user should fill it. The pattern is the Regex.
<input type="tel" pattern="[0-9]{10}">
🔸 Input type time
Using type time, the user is allowed to select the time ( not timezone ). Depending upon the browser, the time picker may differ.
<input type="time">
Using type time, the user is allowed to select the time ( not timezone ). Depending upon the browser, the time picker may differ.
<input type="time">
🔸 Input type date
Input type date is used for the input field which should contain the date. This may be rendered as the textbox field or as a date picker. You can also set "min" and "max" values.
<input type="date">
Input type date is used for the input field which should contain the date. This may be rendered as the textbox field or as a date picker. You can also set "min" and "max" values.
<input type="date">
🔸 Input type datetime-local
What if you want to select both date and time using one field only? Well, you can use the datetime-local field. Users will be allowed to select both dates in years, months, days, and time in hours and minutes.
<input type="datetime-local">
What if you want to select both date and time using one field only? Well, you can use the datetime-local field. Users will be allowed to select both dates in years, months, days, and time in hours and minutes.
<input type="datetime-local">
🔸 Input type month
It creates an input field where the user is allowed to select the month and year only.
<input type="month">
It creates an input field where the user is allowed to select the month and year only.
<input type="month">
🔸 Input type week
It creates an input field in which users can select the week and the year. A week from 1 to 52 or 53.
<input type="week">
It creates an input field in which users can select the week and the year. A week from 1 to 52 or 53.
<input type="week">
🔸 Input type URL
This is used for input fields that should contain a URL address. The value is automatically validated when the user submits the form.
<input type="url">
This is used for input fields that should contain a URL address. The value is automatically validated when the user submits the form.
<input type="url">
🔸 Input type search
This type is used for the search fields. It is just like a normal text field.
<input type="search">
This type is used for the search fields. It is just like a normal text field.
<input type="search">
🔸 Input type hidden
This type defines a hidden input field. This field is not visible to the user. Though it is not visible to the user on the screen it can be available in the developer tool or the source code.
<input type="hidden">
This type defines a hidden input field. This field is not visible to the user. Though it is not visible to the user on the screen it can be available in the developer tool or the source code.
<input type="hidden">
🔸 Input type file
It creates an input field where users can select the file from their device storage. Users can select one or more files.
<input type="file">
It creates an input field where users can select the file from their device storage. Users can select one or more files.
<input type="file">
🔸 Input type email
Used for the input field that should contain an email address. It can be automatically validated depending upon the browser. You can add the "pattern" attribute also.
<input type="email">
Used for the input field that should contain an email address. It can be automatically validated depending upon the browser. You can add the "pattern" attribute also.
<input type="email">
🔸 Input type color
It is rendered as the color picker. Users can select the color from the color picker.
<input type="color">
It is rendered as the color picker. Users can select the color from the color picker.
<input type="color">
🔸 Input type image
The input of the type image is used to create graphical submit buttons. You can specify the path to the image using the "src" attribute.
<input type="image" src="/source-image.png" alt="alt text.">
The input of the type image is used to create graphical submit buttons. You can specify the path to the image using the "src" attribute.
<input type="image" src="/source-image.png" alt="alt text.">
Thank you for reading this thread 💛
If you liked this thread →
1. Follow me ( @junaidshaikh_js ) for more such threads
2. Retweet the first tweet to help others discover this knowledge.
Keep coding 😉
If you liked this thread →
1. Follow me ( @junaidshaikh_js ) for more such threads
2. Retweet the first tweet to help others discover this knowledge.
Keep coding 😉
https://twitter.com/junaidshaikh_js/status/1421352482236600321?s=20
• • •
Missing some Tweet in this thread? You can try to
force a refresh
