Did I tell you how I spend time on web dev Subreddits and other spaces where web developers hang out? It’s one of the best ways to keep up with what’s happening in the industry and learn about new tools and techniques. I recently came across a joke on HTML input-type that actually made me laugh!
I’ll share that joke with you at some point, but let’s start this post with a brief description of an input element in HTML.
What Are HTML Inputs?
An input element in HTML creates interactive controls that allow users to enter data and interact with a website or application. These elements can include text fields, checkboxes, radio buttons, dropdown menus, and more. The input element’s type attribute specifies the type of control being created.
I know of 21 input types that HTML currently supports, including:
- Text.
- Password.
- Hidden.
- Search.
- Email.
- Tel.
- Number.
- Range.
- Date.
- Color.
- Reset.
- Button.
- Checkbox.
- Radio.
- File.
- Image.
- Tell.
- Week.
- Time.
- Date.
- Month.
Some of these 21 input types are used more frequently than others due to their specific use cases. This post will examine seven important HTML input types and their use cases.
1. Text HTML Input Type
The text input type is one of HTML’s most basic and commonly used input types. It comes in handy when you’re creating a single-line input field for users to enter text.
It can be useful for forms that require names, email addresses, or other short pieces of information. To use this input type, add “type=text” to the input tag.
However, there’s no need to use it for fields like passwords or credit card numbers, as specific input types exist for those use cases. I’ve used this HTML input countless times, and it’s one of the most straightforward input types to implement.
2. Email HTML Input Type
The email input type helps to create an input field that only accepts a valid email address. It ensures users enter the correct format for their email, reducing errors and making it easier for applications to use that information.
To use this input type, simply add “type=email” to the input tag. Please note that it doesn’t validate if the email actually works; it only validates the format of the entered text as an email.
This HTML input is crucial for most clients I’ve helped run campaigns.
3. Date HTML Input Type
The date input type allows users to select a specific date from a calendar pop-up or enter it manually in the specified format. It’s useful for forms that require a user’s birthdate, event dates, or any other input related to a specific date.
Add “type=date” in the input tag to use this input type. The default format is YYYY-MM-DD, but you can specify your preferred format using the “pattern” attribute.
This input type is extremely helpful when creating online booking or event registration forms. It ensures users enter the correct date format and reduces data entry errors.
4. Button HTML Input Type
It’s important to be careful when using this HTML input type, especially in register forms where the default button is the submit button. While using this type for buttons may seem like a good idea, it’s better to stick with CSS classes or IDs instead.
Inside a form, it’s safer to use the button input with <input type=”button” /> instead of <button>. Why? Button inputs won’t submit the form by default, so you have more control over their behavior.
It applies when creating forms with multiple buttons, such as a “Save” and “Cancel” button. Additionally, using CSS classes or IDs for buttons allows for more customization for styling and functionality. It also helps keep your HTML code clean and organized.
5. Submit HTML Input Type
The submit input type is specifically designed to submit form data. It’s the default button type for forms; you can use it without specifying a type. It’s similar to the button input type, but it serves a narrower purpose. Customizing the text inside the button is also possible by using the “value” attribute.
Just like the button input type, it’s important to be cautious when using it in forms. It should only appear once at the bottom of the form and be labeled clearly as the submit button.Â
Including multiple submit buttons can confuse users and potentially cause errors in data submission. Additionally, embed a clear message or action that occurs after clicking on the submit button.
It could be something like “Thank you for your submission” or “Your information has been successfully recorded.”
6. Numbers
This input type allows users to enter numbers, whether whole numbers or decimal values. It’s useful for forms that require numerical data such as age, weight, or price.
It also includes built-in validation that only accepts numbers and some basic symbols, like a decimal point. To customize this validation, you can use attributes like “min,” “max,” and “step.”
Though important, this HTML input is problematic. The main problem is that it collects numeric data but isn’t as specific as input types like tel, age, or date.
For example, many developers mistakenly use it to collect phone numbers, confusing users when entering dashes or spaces. Instead, use the “tel” input type to collect phone numbers specifically.
Another issue with the number input type is that it doesn’t have a built-in option for displaying currency symbols. It can be problematic for international users who are used to seeing their local currency symbol when entering numerical data.
To solve this, developers must use additional JavaScript or CSS coding.
7. Password HTML Input Type
As the name suggests, this type helps create password fields that hide user input by default. It’s a critical security feature in web forms and can help prevent sensitive information from being easily visible to anyone looking at the screen.
To use this input type, add “type=password” in the input tag. But I don’t use it as often as other developers do.
When setting up passwords in registers, I prefer languages like PHP or Java for creating secure forms and registers. They’re ideal for encrypting the password and double-checking its accuracy.
Now, Back to The Joke I Promised
Someone in the Subreddit thread I mentioned earlier said that the only time in his 20-year career he ever used the reset button on his computer was by accident. He concluded he must have been so overwhelmed with coding that he forgot how to turn off his computer normally.
Another person insisted that unlike everyone else, he’s used most of the 21 different input types available in HTML, except for color, because he’s color-blind.
A good number also said they never use the color input type because other languages like CSS are better suited for that purpose.
One of the most entertaining comments was from someone who used the image input type to create a “Choose Your Avatar” feature on their website. They joked that it indirectly forced users to upload an image of themselves rather than simply choosing one.
My favorite was an old-timer who claimed he’d coded longer than some of the people in the thread, but he’s never used half of the input types listed.
The point of the discussion was that though there are 21 HTML inputs, you only need to use a handful in your everyday coding. The joke that made me laugh was, “Whenever you feel useless, remember there are 21 supported HTML inputs!”
Simplicity Cells in Coding
You don’t need to use all the html input types! Using most of them means you’re designing some decently complex UI, but be careful. You might be over-complicating things in the process.
Remember, less is more when coding. Keeping your code simple and efficient makes it easier to read and maintain, and it also reduces the chances of errors or bugs.
