22 HTML Input Types To Utilize On Your Website

input elements in HTML go way beyond your standard text input fields that we've all seen and used in almost every website. Contrary to popular belief, accepting text input is only the beginning of what input fields can do.

HTML input types provide some of the most complex and powerful functionality available on the web. There are 22 different input types supported in HTML5. This article will cover all of them.

What is an Input Field in HTML?

An input field is an HTML element that accepts some type of user input, whether it be text, numbers, dates, etc. You can use input fields to accept login data, user information, credit card information, and much more.

The data entered can then be transferred to a server-side script via a form submission from the front-end for processing, or it can be used to update other fields or related elements on the screen.

Input Field Attributes

Before getting into each input type, let's cover some of the most common input field attributes:

• autocomplete: a string indicating whether a list of suggestions will be shown to the user or not. Set to on to show the list, and off to not show the list.
• autofocus: a boolean value indicating if the input field should be auto-focused after page load or not.
• disabled: a boolean value indicating if the input field should be disabled or not. If disabled, the user will not be able to modify its contents.
• name: a string containing the name of the input field. The value of this attribute is what you'll use when accessing form data via submissions to a back-end script.
• required: a boolean value indicating if the input field is required or not. If it is required, the form can not be submitted until data is populated in it.
• tabindex: a number value indicating the order in which input should receive focus when moving through the form with the keyboard's Tab key.
• value: the current value of the input field.

Some browsers may not support some of the newer or more complex input types or attributes. If the browser does not support a type or attribute that you've used on an input field, it will default to the text type.

Also note that even if you use types that will cover input validation for you on the front-end, you should still perform the same validation server-side. This will prevent users from circumventing your front-end validation process, intentionally or unintentionally.

Now, let's start working through each of the HTML input types.

Text

The default type, text, is used for any type of string input, numeric input, and more. It's a free-form type that you can use to accept almost any type of data.

<input type="text" />

The text type accepts the following attributes:

• maxlength: the maximum character count considered valid for form submission.
• minlength: the minimum character count considered valid for form submission.
• pattern: a regular expression that must be matched for form submission.
• placeholder: an example string to display to your users when the input field value is empty.
• readonly: a boolean value used to display a value that cannot be changed by the user when set to true.
• size: how many characters wide the input field will be displayed. This is dependent on which font family and size you use for your input fields.

Password

Just like the text type, password provides a free-form text input field. The only difference is the input value is masked by either a series of asterisks or bullets, depending on which browser you're using.

The password type also accepts the same attributes as text.

<input type="password" />

Hidden

The hidden type is yet another free-form text field. The only difference between this and the others is that it's not visible to the user.

The hidden type does not contain any additional attributes.

<input type="hidden" />

Number

The number type restricts the user to only entering integers or floats into the input field.

This type also contains controls to allow you to increase or decrease the field's value without using the keyboard.

On mobile devices, you'll be presented with a numeric keypad instead of the full keyboard with alphanumeric character keys.

In addition to the common attributes, this type also accepts a few other optional attributes for setting valid integer values:

• min: the minimum numeric value considered valid for form validation and submission.
• max: the maximum numeric value considered valid for form validation and submission.
• step: the interval to use when decreasing or increasing the numeric value when clicking the up or down arrows in the input field's controls.

<input type="number" />

Phone Number

The tel type works similarly to the number type in that it displays a numeric keypad for numeric input only, however, is used for phone number inputs.

Unfortunately, phone number validation is not handled automatically with this input type. However, you can work around this by entering a regular expression as the pattern attribute's value, like mentioned earlier:

<input type="tel" pattern="([0-9]{3}) [0-9]{3}\-[0-9]{4}" />

All the other common attributes are accepted with this type.

<input type="tel" />

Range

The range type is like an upgraded version of the number type, in that it allows you to select a numeric value with a range of numbers, but by using a slider instead of arrow controls.

The same min, max, and step attributes apply to this input type.

<input type="range" />

Email

The email type provides email address format validation to the user. If the value of this input field is invalid, the user will not be able to proceed with form submission until corrected.

In addition to the common attributes, this type also accepts an optional boolean attribute, multiple, which allows the user to enter multiple email addresses when the value is set to true.

<input type="email" />

URL

The url type also validates the user input, expecting it to be properly formatted as a URL for form validation to succeed.

This type is only a format check. It does not determine whether that actual URL entered is a valid URL on the internet.

All the other common attributes are accepted with this type.

<input type="url" />

Search

The search type is essentially a text type with the added option of clicking a button to clear entered text.

All the other common attributes are accepted with this type.

<input type="search" />

Checkbox

The checkbox type allows the user to select one or more options by activating a checkbox.

To group selected values into a comma-delimited list format, you'll need to give the checkbox input field the same name for all values you want to be grouped.

The checkbox type allows for a name and value attribute, and one additional attribute:

• checked: a boolean value indicating whether the checkbox should be auto-checked or not.

<input type="checkbox" />

Radio Button

Similar to the checkbox is the radio type, which allows you to make selections in a checkbox sort of format. The key difference here is you can only select one option with the same name instead of multiple.

If you want to select multiple values with radio buttons, you'll need to assign a different name to each one.

Also, like checkboxes, you can apply a name and value attribute, with optional checked attribute.

<input type="radio" />

File

The file type allows the user to select a file from their local file system. This type of control is generally used to upload the selected file, or files, or load or parse them for display on the front-end.

There are some cool attributes associated with this type that we should go over:

• accept: a comma-delimited list of file extensions or MIME types that will be valid for user selection. File types not listed in this attribute will not be displayed for selection to the user.
• capture: allows for real-time capture of an image or video that will be selected for upload. For video capturing, you can either specify user for the user-facing/selfie camera, or environment for the outward-facing camera.
• files: an array of file objects selected by the user. This can be used to loop over individual files one by one for additional checking or validation processes.
• multiple: by default, the user can only select one file with a file input type. This attribute accepts a boolean value, true allowing the user to select multiple files at once.

<input type="file" />

Button

The button type is very similar to the button element. The only key difference is, with a button element you set the value between an opening an closing button HTML tag. With the input element you set the value within a value attribute and self-closing input HTML tag.

The button type itself has no functionality. You have to assign specific event handlers to perform some type of action.

<input type="button" />

Reset Button

The reset type displays a button element on the page and resets all associated form elements back to their original state with no confirmation prompt.

The reset button accepts one attribute, value, which will be displayed as the button's text.

<input type="reset" />

Submit Button

The submit type submits all form element keys and values to whichever script you specified in your form tag's action attribute.

The submit button also accepts one attribute, value, which will be displayed as the button's text.

<input type="submit" />

Image

The image type acts like a submit button but, instead of using text for a button's caption, it uses an image.

This type has quite a few more allowable attributes to control the display and accessible text for the button:

• alt: alternate text string if the image source is invalid or inaccessible.
• height: the height of the display image, in pixels.
• src: the source URL for the button's image.
• width: the width of the display image, in pixels.

Color

Probably the coolest input type available is the color type, allowing you to select any color available in a movable color palette.

You're presented with a button displaying the currently selected color and even have a box for you to enter a hexadecimal color code if you already know which color you want.

None of the common attributes are valid with this input type but that's okay because it already comes packed with its amazing color picking functionality.

<input type="color" />

Date

The date type accepts user input in the format of a date. However, it doesn't require manual input. There are up and down arrows you can use to decrement or increment the date values. Also, clicking the date field will show a calendar popup where you can easily select a date that will be auto-populated in the input field.

The date's value will be displayed according to the user's locale, but the submission value will always be in CCYY-MM-DD format.

Additional parameters for the date type include:

• min: the earliest date that can be input or selected by the user.
• max: the latest date that can be input for selected by the user.
• readonly: a boolean value indicating whether or not the input should be readonly. If set to true, the user will not be able to alter the date in any way.
• step: the interval in which the date decreases or increases when clicking the up and down arrows.

<input type="date" />

Time

Similar to the date type, the time type accepts user input in the format of a time string. Here, you are also presented with up and down arrows to decrement or increment the time value. And you're also presented with a time picker.

Additional parameters for the time type are similar to the date type and include:

• min: the earliest time that can be input or selected by the user.
• max: the latest time that can be input for selected by the user.
• readonly: a boolean value indicating whether or not the input should be readonly. If set to true, the user will not be able to alter the time in any way.
• step: the interval in which the time decreases or increases when clicking the up and down arrows.

<input type="time" />

Local Date and Time

The datetime-local type combines both date and time types together into a single input field. The only unfortunate thing about this type is that it is still not as widely supported as the individual date and time types. So make sure to test this out when using it.

Additional parameters for the datetime-local type are similar to the date and time types and include:

• min: the earliest date and time that can be input or selected by the user.
• max: the latest date and time that can be input for selected by the user.
• readonly: a boolean value indicating whether or not the input should be readonly. If set to true, the user will not be able to alter the date and time in any way.
• step: the interval in which the date and time decrease or increase when clicking the up and down arrows.

<input type="datetime-local" />

Month

The month type provides a simple selection tool, allowing the user to select only the month and year. Again, support is limited here, so make sure to test it out to make sure it works properly.

Additional attributes include:

• min: the earliest month-year that can be input or selected by the user.
• max: the latest month-year that can be input for selected by the user.
• readonly: a boolean value indicating whether or not the input should be readonly. If set to true, the user will not be able to alter the month-year in any way.
• step: the interval in which the month-year decrease or increase when clicking the up and down arrows.

<input type="month" />

Week

The week type is identical to the month type, in that a presents a calendar picker for the user. The only key difference here is the selection is limited to a specific week instead of a month.

Additional attributes include:

• min: the earliest year-week that can be input or selected by the user.
• max: the latest year-week that can be input for selected by the user.
• readonly: a boolean value indicating whether or not the input should be readonly. If set to true, the user will not be able to alter the year-week in any way.
• step: the interval in which the year-week decrease or increase when clicking the up and down arrows.

<input type="week" />

Conclusion

Although some of the HTML input types are not fully supported by all browsers yet, it's fun to take advantage of some of the features that are offered.

In this case, it never hurts to use these types of options for internal reporting, tools, functionality, and more. But remember that even if the specific input type is not supported by your browser, it will still fall back to the default text type.

The input element has proven to be a useful and convenient tool for websites and page forms.