The Complete Guide to HTML Input Types

November 11, 2021

The humble HTML input tag is actually an extremely useful and powerful HTML tag. Not only are they used for constructing forms, but they allow for all sorts of additional functionality to be added to your page.

Let’s fund out what the input types are, what they do and when we should use them to provide our users with the best possible experience when using our websites.


The HTML input text type creates a single-line textbox. It is most commonly used in forms for capturing simple text entries like first names and last names.


The HTML input password type creates a single-line textbox like the text input above, however, when a user enters text into the textbox it is obfuscated by displaying the characters as asterisks or bullet points. This means the text entered is never readable to anyone viewing the website. The value itself is accessible via scripts in your website to send to an API to authenticate a user.


The HTML input radio type creates a selectable option list like the below checkboxes, however, the radio differs from the checkboxes in two main areas.

They are displayed as circular ‘radio buttons’ instead of a box and only one option can be selected at a time, unlike the checkboxes where multiple options can be selected.

It is possible to split the options into their own groups which allows one option from each group to be selected.

A common use case for these inputs would be an online quiz where the user needs to select one, and only one, answer to a question.


Similar to the radio type above, the HTML input checkbox presents the user with a list of options to choose from. In the case of checkboxes, they do display a box to click and allow for multiple options to be selected.


The button type input transforms the input to have the appearance of a clickable button. This input type provides access to the “click” event so that the website can detect when the user clicks on this input and can then perform some desired logic. \ The button can be styled using standard CSS to move away from the standard grey button.

A common use case for the button input is to communicate with a server to retrieve or calculate some values to fill in additional components of a form or to send an email based upon other form values.


The color input type opens a custom color picker so that the user can select a color to use. These are quite often used in applications that allow theming by letting the user specify the colors that are used in CSS variables to style components of an application.


The email input type displays exactly the same as the text and password input types by default, however, the textbox automatically validates the text entered by the user to ensure that it is a properly formatted email address. The textbox is applied by CSS pseudo-classes, :valid or :invalid, to denote the status of the current value.

This input type is most commonly used in registration and login type forms to ensure that the user is entering a valid email address to create or locate an account in your database.


The file input type displays a button and a text label. Clicking the button opens the file picker window on the user’s computer so that they can select a file saved to their hard disk to submit to your application.

This is useful when you need a user to upload a profile picture or a resume/CV if you have a job application processing application.


The hidden input is just that - hidden! These inputs cannot be seen by the user looking at your website.

They are useful for auto-populating data that you don’t want your users to see or modify. It might be a product code or security token value that is calculated based upon values that the user enters into other form fields.