HTML input types
Table of contents:
1. Introduction to HTML input types
2. A list of HTML input types available
3. Recap
What are input types in HTML? How many input types does HTML actually provide? Let me show it to you in this article.
Let’s start!
HTML input types refer to the different types of input elements that can be used to collect information from users in an HTML form. These input types include text boxes, check boxes, radio buttons, and more. They play an important role in web development as they enable structured and organized user interaction and data collection. In this article, we will explore the different types of HTML input elements, their uses, and how to use them effectively in your web development projects.
There are 22 types of input elements that can be used in HTML forms. Here they are:
1/ `text`: a single-line text field
HTML input type text is the most basic form of the input element, allowing users to enter and submit plain text input in a single line, typically used for short free-form text fields like name, address, etc.
<label for="text-input">
Text:
</label>
<input type="text" id="text-field">
2/ `password`: a single-line text field that hides the input characters
HTML input type password is used for sensitive information like passwords, it masks the characters entered by the user, typically used to protect the user’s password from being visible.
<label for="password-input">
Password:
</label>
<input type="password" id="password-input">
3/ `checkbox`: a checkbox that can be selected or deselected
HTML input type checkbox is a small square box that allows the user to select multiple options from a set, it can be checked or unchecked, typically used for multiple choice questions or options.
<input type="checkbox" id="checkbox-input">
<label for="checkbox-input">
Checkbox
</label>
4/ `radio`: a radio button that can be selected as part of a group of options
HTML input type radio is a small round button that allows the user to select one option from a set, it is typically used for single-choice questions or options, where only one option can be selected at a time.
<div>
<input type="radio" id="html" name="tech" value="html">
<label for="html">HTML</label>
</div>
<div>
<input type="radio" id="css" name="tech" value="css">
<label for="css">CSS</label>
</div>
<div>
<input type="radio" id="javascript" name="tech" value="javascript">
<label for="javascript">JavaScript</label>
</div>
5/ `submit`: a button that submits the form
HTML input type submit is a button that is used to submit a form’s data to a server, it’s typically used to initiate an action when the user is ready to submit the form, such as sending a message or saving a form.
<input type="submit" value="Submit">
6/ `reset`: a button that resets the form to its default values
HTML input type reset is a button that is used to reset the form’s data to its initial state, it is typically used to clear the input fields and delete any data that the user has entered but not submitted yet.
<form>
<label for="id">First name:</label>
<input type="text" id="firstname" name="firstname" />
<label for="id">Last name:</label>
<input type="text" id="lastname" name="lastname" />
<div class="controls">
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</div>
</form>
9/ `image`: an image that can be used as a submit button
HTML input type image is a graphical submit button, it allows to use an image as a submit button. It works in the same way as the submit input type, but allows you to use an image to represent the button. This can be useful for creating visually appealing forms and buttons and allows you to use images as part of your form design.
<input type="image" value="Button Image" src="https://markodenic.com/man_working.png">
10/ `file`: a field that allows the user to select a file to upload
HTML input type file is used to allow users to upload one or multiple files, it is typically represented by a “browse” button that when clicked, opens a file picker dialog for the user to select the file(s) to be uploaded, it can be used to upload images, videos, documents, audio, etc.
<label for="avatar">
Avatar:
</label>
<input type="file" id="avatar" name="avatar" accept="image/png, image/jeg">
11/ `color`: a field that allows the user to select a color
HTML input type color is used to pick a color, it is typically represented by a color picker control that allows the user to select a color by adjusting the hue, saturation, and brightness of a color or by entering the color code in a text field. It can be used for various purposes, for example for selecting a color for a background or text, or for creating a color palette for a design.
<input type="color" id="color-field" value="#4433ff">
<label for="avatar">
Select Color:
</label>
12/ `date`: a field that allows the user to select a date
HTML input type date is used to select a date, it is typically represented by a calendar control that allows the user to select a date by navigating through the calendar and picking a specific day, month and year. It can be used for various purposes for example scheduling an appointment, setting a deadline, or creating a to-do list.
<label for="date-field">
Date:
</label>
<input type="date" id="date-field">
13/ `datetime-local`: a field that allows the user to select a date and time, without time zone information
HTML input type datetime-local is used to select a date and time, it is typically represented by a calendar control that allows the user to select a specific date and time by navigating through the calendar and picking a specific day, month, year, hour, and minutes. It is similar to the input type date but also includes a time picker.
<label for="datetime-field">
Datetime:
</label>
<input type="datetime-local" id="datetime-field">
14/ `email`: a field that allows the user to enter an email address
HTML input type email is used to input email addresses, it is typically represented by a single-line text field and validates the input to ensure that the value entered is a valid email address format. It can be used to gather email addresses for a newsletter subscription, contact forms, and other similar applications.
<label for="email-field">
Email:
</label>
<input type="email" id="email-field">
15/ `month`: a field that allows the user to select a month and year
HTML input type month is used to select a month and year, it is typically represented by a calendar control that allows the user to select a specific month and year by navigating through the calendar and picking a specific month and year. It can be used for various purposes for example for tracking expenses, and payments or for creating a budget.
<label for="month-field">
Month:
</label>
<input type="month" id="month-field">
16/ `number`: a field that allows the user to enter a numerical value
HTML input type number is used to input numerical values, it is typically represented by a single-line text field that can be used to input numbers, and can also include up and down arrows to increase or decrease the value. It can be used for various purposes for example for quantity selection, for taking measurements, for age, weight, and other numerical inputs.
<label for="number-field">
Number:
</label>
<input type="number" id="number-field">
17/ `range`: a field that allows the user to select a value within a range of values using a slider
HTML input type range is used to select a value from a range of values, it is typically represented by a slider control that allows the user to select a value by sliding a handle along a track. It can be used for various purposes for example for adjusting the volume, brightness, or other settings, or for allowing users to rate something on a scale of 1 to 10.
<label for="volume">Volume: </label>
<input type="range" id="volume" name="volume" min="0" max="20">
<label for="result">Your choice: </label>
<input type="number" id="result" name="result">
18/ `search`: a single-line text field for search queries
HTML input type search is used to input search queries, it is typically represented by a single-line text field with an optional search icon. It can be used to search for content on a website or to filter a list of items. It is similar to a regular text input field but is intended to be used specifically for search queries and usually has a specific styling.
<form>
<label for="text">Input Type Text</label>
<input type="text" id="text" name="text">
<label for="search">Input Type Search</label>
<input type="search" id="search" name="search">
</form>
19/ `tel`: a field that allows the user to enter a telephone number
HTML input type tel is used to input telephone numbers, it is typically represented by a single-line text field. It is similar to a regular text input field but is intended to be used specifically for telephone numbers. It is usually used in forms that require phone numbers, like contact forms, registration forms, and so on.
<label for="phone">
Phone number:
</label>
<input type="tel" id="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
20/ `time`: a field that allows the user to select a time
HTML input type time is used to select a time, it is typically represented by a clock or a time picker control that allows the user to select a specific time by picking hours and minutes.
<label for="time-field">
Time:
</label>
<input type="time" id="time-field">
21/ `url`: a field that allows the user to enter a URL
HTML input type url is used to input a URL or web address, it is typically represented by a single-line text field and validates the input to ensure that the value entered is a valid URL format. It can be used for various purposes for example for linking to other websites, for adding a link to a webpage, or for creating a form to submit a website address.
<label for="url-field">
Your website:
</label>
<input type="url" id="url-field" placeholder="https://markodenic.com" pattern="https://.*">
22/ `week`: a field that allows the user to select a week and year
HTML input type week is used to select a week and year, it is typically represented by a calendar control that allows the user to select a specific week and year by navigating through the calendar and picking a specific week and year. It can be used for various purposes for example for tracking expenses, and payments or for creating a budget. It is similar to input type date but instead of selecting a specific date, it allows the user to select a specific week and year.
<label for="week-field">
Week:
</label>
<input type="week" id="week-field">
Quick recap!
There are 22 HTML input types:
1/ input type text
2/ input type password
3/ input type checkbox
4/ input type radio
5/ input type submit
6 /input type reset
7/ input type button
8/ input type hidden
9/ input type image
10/ input type file
11/ input type color
12/ input type date
13/ input type datetime-local
14/ input type email
15/ input type month
16/ input type number
17/ input type range
18/ input type search
19/ input type tel
20/ input type time
21/ input type url
22/ input type week