Many websites and apps need to collect user data directly, and they do so by using form pages; the sign-in or login page is one such example. Input fields are the bedrock of forms, from texts to checkboxes and so many more. Ultimately, knowing the various types of input tags and their usage is a handy essential for developers and designers. By the end of this article, you should be familiar with the number of HTML input types available and their functions.
What is an input element?
An input element is an HTML element that provides a field for data insertion. It is a self-closing tag with quite a few attributes associated with it. Currently, there are 23 input types available with different functions. It is usually always identified with the label element, as they go hand in hand in form pages.
Additionally, like every element without direct-text content, the input element defaults to a preset type: text.
Input Types
As mentioned earlier, there are currently 22 input types, each with a different function and use case. In no particular order, they are:
Text
Reiterating from above, this is the default attribute value for the input element. It defines a single-line text field, that is, one without line breaks. Therefore, the text will continue in one line to any length unless there is a maximum value established. Below is a typical example of one of the components of a sign-up page.
Submit
The submit type is self-explanatory as it simply displays a button specifically for submission. It is usually enabled after a user has filled the other input types with relevant data. Additionally, the text displayed on the button for providing context on the form's purpose is customizable with the "value" attribute, like so:
<input type="submit" value="Sign Up">
Its default value is "submit."
Password
The password input type creates a password field where sensitive information, such as a password, can be entered securely. The characters entered into this field will be masked with asterisks or dots, hiding the actual password entered by the user. Consequently, it helps prevent prying eyes from seeing the password, providing an added layer of security.
The Email input type creates a field specifically for entering an Email address. This input type is often validated to ensure the entered Email is in the correct format. Without added attributes, it could easily pass for text type input.
Number
The number input type defines a field, particularly for entering a numerical value. Up and down arrows to increase or decrease the value follow after the data field. It is displayed below by the "Age" label.
CheckBox
The checkbox input type displays a toggleable on/off control for a single option in a form. Occasionally, it represents multiple options where the user can select one or more options. An example of its use case is in a "terms and conditions" acceptance section of a form, like so:
Telephone
With this input type, users can enter the telephone number. Upon selection, it displays a numeric keyboard for ease of input. It is similar to the text input type, as according to W3C, "Unlike the URL and Email types, the telephone type does not enforce a particular syntax. This is intentional; in practice, telephone number fields tend to be free-form fields, because there are a wide variety of valid phone numbers."
Radio
The radio input type defines a toggleable on/off control for a group of mutually exclusive options in a form. Only one option in the group can be selected at a time, but not by default. Although, for the radios to function as a group, they all have to contain a name attribute and share the same value. Like so:
Date
The date input type defines a field for selecting a date (year, month, and day). Depending on the user's device and browser, a date picker calendar will be displayed, making it easier for the user to choose a date. Additionally, the format of the date returned is controllable using the "min" and "max" attributes.
Search
The search input type establishes a search field. At a glance, it functions the same way as the "text" input type, upon usage, users can input a search query. The appearance of the search field may vary depending on the user's device and browser, but it typically includes styling to indicate that it is a search field, such as a magnifying glass icon.
Time
This input type provides a field that only accepts time values. It presents the user with a time picker interface to make selecting a time easier. The format of the time returned can be controlled using the "step" attribute.
URL
The URL input type specifies a field for inputting a URL. Like the search attribute, it is similar to the text input type on minimal inspection. Some devices and browsers may include additional validation to ensure that the inputted value is a valid URL.
Image
The image input type creates an image as a submit button. When the user clicks on the image, the form it is associated with is submitted. The source of the image is specified using the "src" attribute.
DateTime
The datetime input type creates a field for selecting both a date and time value. It presents the user with a date and time picker interface to make selecting both values easier. The format of the date and time returned is based on the UTC ( Universal Time Coordinated ) time zone.
DateTime-Local
Similar to the datetime input, datetime-local defines a field used for selecting both a date and time value, but with the time value being specific to the user's local time zone. It presents the user with a date and time picker interface to make selecting both values easier. The format of the date and time returned can be controlled using the "min" and "max" attributes.
Month
The month input type is used for selecting a month and year value. It presents the user with a month picker interface to make selection easier.
Week
As you may have guessed, the week input type defines a field for selecting a week and year value. It provides a week picker interface for selection.
Button
The button type creates a clickable button on a form. It is different from the submit type in the case of automatic form submission, but it can work hand in hand with JavaScript to create dynamic behavior. The text displayed on the button can be customized using the "value" attribute.
Color
The color type creates a color picker control on a form, which allows users to select a color. This type is supported in modern browsers and provides a graphical interface for color selection. The default value is #000000, a hex code for the color black.
File
The file type creates a file input control on a form, allowing users to select a file for upload. The form performs specific actions, i.e., sending the file to a server, with the selected file information. The file type also allows multiple files selection at once by setting the "multiple" attribute.
Hidden
The hidden type creates a form field that is not visible to the user but recognized by the form. This type is useful for storing information that needs to be processed by the form but does not require visibility.
Range
The range type creates a sliding control on a form that allows the user to select a value within a defined range of values. The "min" and "max" attributes define it, and you can set its default value using the "value" attribute.
Reset
The reset type creates a button that resets all form fields to their default values when clicked. The text displayed on the button can be customized using the "value" attribute.
Conclusion
The input types in HTML provide a way to create and present different types of form fields to users. Each input type serves a specific purpose and offers a unique user experience. By utilizing these input types in your forms, you can ensure that users can input the correct data type, leading to more accurate and efficient data collection.
Top comments (1)
Awesome article the input element is really versatile and I will definitely use them in my next project. I also didn't know you could link codepen to dev.to. Thanks for the tips.