Why is it so important?
I mentioned it in one of my previous articles: , because it definitely makes the interface easier to use. This is often accompanied by the display of the corresponding keyboard on the mobile device, making it easier to enter the correct data.
We must also remember the users who use screen readers for whom the type (together with the label) gives a clear indication of what they are dealing with.
So, why not take advantage of this fact? Let's start exploring types! I grouped them in four categories, it isn't an official subdivision, I used it, because I think this way can help you to easy remember where to use them. I also attach a link to the MDN documentation to each of them, so that if you want to dive deeper, you can use it.
Here are the most commonly used types. Who among us has never used a
text or a
number? I called them "one-liners", because they basically take one line, there's nothing deeper 😅
- allows user to enter numbers. In addition, it has a validation that prevents inputting strings. Can also have stepper arrows with which you can increase or decrease the number with the mouse or a fingertip.
- basically the
text input, but with built-in validation for URL addresses. Worth mentioning, that on browsers that don't support inputs of type
url input falls back to being a standard
This group contains input fields that are commonly used for handling forms. The appearance is usually similar to buttons, but they are really inputs!
- works like a normal button, with the difference that the value inside can only be a string. For this reason, for creating buttons it's recommended to use
<button> where you can put any valid HTML code inside.
- basically the button, but when user clicks it, form will be sent. Be careful, because if you only use
<button> in the form, remember that if you have only one button in the form, it will be treated as a submit button by default.
Everyone knows dates. But, do you know that we have five different types for inputs designed to provide date information? Let's explore them all! 🔍
- most commonly used to enter date (year, month, day) from the user. Worth mentioning, that it provides easy interface for choosing dates and normalizes the format of the data transmitted to the server regardless of the user's locale.
I called this group "Special", but so you don't feel misleading. These input fields are not intended for rare or special cases. Don't be afraid and use them when you think it's right. I hope the following list will help you make your future decisions 😁
- the most mysterious one 🤐 What is the mystery behind this? Quite simply, they allow developers to include data in the form that cannot be changed or deleted. These fields are completely invisible on the website and you can't prevent it.
Using the right types is just as important as it helps the user to enter the data in the right format. Many of them have built-in validation that enables this, e. g.
url. Also, don't forget the HTML attributes, which help you to narrow down the range of valid data, e. g. by limiting the time interval for the date selection.
In summary, it's very important to know what type of input should be used in the right situation to develop today's applications. I hope that with this article you will never again have a moment of hesitation in choosing and above all the desire to use
text where it's completely unnecessary.
Good luck with the creation and see you next time! 👋