Hello Everyone 👋 , today I'm going to list down and concisely explain the input types of HTML that exist and are acknowledged by World Wide Web Consortium.
Without further delay, let's dive into the topic. Before that, we need to understand the input types in the HTML function to collect information or input data from our users. For example, we can find input types in registration forms, login forms, and many more components.
Now let's move on to the first input type which is a very common type.
- Text
The text input is used to collect normal text and other characters too. These include words, numbers, and symbols. They look like below:
- Password
Generally, when you enter most registration or log-in pages of a website, you may find that the input to enter your password is unique and usually has a show/hide toggle.
This is easily made possible by using the password input type. It looks like the example below:
- Checkbox
The checkbox input is like the radio button too but with a twist. Generally, we have several checkbox options and the user can check/select all the related options they want. Here's how it looks like:
- Radio
The radio input has nothing to do with a radio station or anything. It's actually a 2 option fixed input. It works like a boolean statement where the user can click on it for a true statement or leave it unclicked for a false statement. Here's how radio inputs look like:
- Color
If you're running a fashion design website where you would like to collect input about the color of a design or anything, there's an easier way to do it compared to asking the user to enter the HEX code of the color in the text field.
That solution is the color input type which opens a popup mini color picker to give a better user experience and submit color options. It looks like this:
- File
Cloud storage services like Google Drive, OneDrive, and more use this input type to collect files from you. It's a very useful and interactive input type that you probably would have seen before. Here's how this input type looks like:
- Number
Earlier we saw about the common text input type that covers words, numbers, and symbols too. But what if you want to collect numbers only? Well, that's where the special number input type comes in. It restricts the user to only enter numbers and it will not record other types of text even if the user clicks on it.
Here's how it looks like:
This input type works best with the password input we saw earlier. This input type ensures that the input type is an email type. If it isn't an email type, it will give a popup alert that you'll need to edit the input into a valid email type.
Here's how it looks like:
- Submit
This is one of the most important input types. Without using the submit input, you will not be able to collect the input entered earlier by the user. Generally, forms would have the form tag, followed by any type of input inside it, and lastly, the submit input type inside it to submit the info.
It has a simple button design like below:
And that's all for this article. There are some rarely used input types too that you may explore if you want. Thanks for reading and goodbye!
Top comments (0)