How To Use HTML5 Input Types

Introduction

<input> elements are among the most complex and powerful of all HTML5 elements. In turn, the type attribute determines how a given <input> element will accept user data. This makes <input> and type two critical concepts in web development.

There are currently 22 input types for HTML5. This tutorial will review them all.

Standard Attributes

Before discussing each of the different input types, note that every type accepts the following common attributes:

• autocomplete - string to indicate which autocomplete functionality to apply to the input, commonly set to on to allow for autocompletion
• autofocus - boolean to indicate if the input should be focused automatically (on page load)
• disabled - boolean to indicate if the input should be disabled
• form - the ID of the <form> the input is a member of, defaults to the nearest form containing the input
• list - the ID of a <datalist> element that provides a list of suggested values, not widely supported at the moment
• name - the name of the input, used as an indicator on submitted data
• required - boolean to indicate if the value is required before the <form> can be submitted
• tabindex - number to indicate which order the inputs should receive focus when the user hits TAB
• value - the current value of the input

Any type-specific attributes are documented in that type’s section.

Text

<input type="text">

Our default type of input, text, is the most basic form of input. It’s a field that accepts free-form text.

Text accepts the following attributes:

• maxlength - maximum characters to be considered valid
• minlength - minimum characters to be considered valid
• pattern - regular expression to match to be considered valid
• placeholder - example text to display when the input is empty
• readonly - boolean whether the input should be read-only
• size - how many characters wide the input should display as
• spellcheck - boolean to toggle spellchecking

Password

<input type="password">

Like our text input, the password type is a free-form text input with the added bonus of masking the user’s input for security.

password accepts all of the additional attributes as type with the exception of spellcheck.

Hidden

<input type="hidden">

The hidden type is another free-form text field, but it not visible.

The hidden type doesn’t have any additional attributes, but it does have another feature:

If you set the name attribute to _charset_, then the value for the input becomes that of the character encoding of the form being submitted.

Email Address(es)

<input type="email">

The email type provides email address format validation.

In addition to the common attributes, as well as the text type’s attributes, the email type accepts a boolean attribute named multiple. This allows the input to accept a comma-separated list of email addresses.

Number

<input type="number">

The number type restricts input to a number (float or integer). In most browsers, it also provides buttons for incrementing or decrementing the value.

To take this a step further, most mobile browsers take a hint from this type and present a number pad instead of a full keyboard when entering data.

Number type accepts all of the common attributes, shares placeholder and readonly with the text type, and also introduces a few numerical-specific attributes:

• min - the minimum value to be considered valid
• max - the maximum value to be considered valid
• step - the interval to use when clicking the up and down arrows

Search

<input type="search">

The search type is effectively a text type with the added bonus of a button to clear entered text. It shares the same additional attributes as a normal text type input.

Telephone Number

<input type="tel">

The tel type is intended to accept telephone numbers, but the tel type doesn’t actually handle the validation of the phone number. But, because this type accepts the pattern attribute, we can add in validation for whichever telephone number format we’d like:

<input type="tel" pattern="([0-9]{3}) [0-9]{3}-[0-9]{4}">
<br><small>Format: (800) 555-1212</small>

The telephone number type accepts all of the standard attributes that text type does except spellcheck.

Universal Resource Locator (URL)

<input type="url">

Unlike the telephone number type, the URL type accepts and validates the user input, expecting it to either be empty or to be a properly formatted absolute URL.

This type does not guarantee that the URL is actually valid (domain resolves, site loads, et cetera) and is purely a sanity check on the pattern of the data being entered: protocol://domainAndSlashesAndSuch

Like most of our other textual input types, the URL type also accepts the same attributes as our text type, without spellcheck.

Checkbox

<input type="checkbox">

checkbox is an input type that represents the selection one or more items, typically displayed as a list of options. If you want to use multiple checkboxes, you’ll need to create multiple checkbox type inputs.

The input itself only shows the actual checkbox and not any text, so you’ll have to handle that part on your own.

• checked - boolean to indicate whether the checkbox is checked or not

Radio Button

<input type="radio">

radio type inputs can be considered the “pick one” version of checkboxes. Multiple radio type inputs are considered a group and only one radio button in said group can be selected at a time.

• checked - boolean to indicate whether the radio is selected or not

radio types also use the checked boolean.

Range

<input type="range">

The range type input is like the mature version of the number type. It represents a numerical value, but presents the user with a slider to select their value.

Just like the number type, the range type input accepts the same min, max, and step attributes in addition to the common input attributes.

Color

<input type="color">

Never again will you need to scour the Internet looking for the best color picker for your favorite framework.

The color type input presents the user with a button that shows the currently selected color and when clicked, presents the user with a movable color palette, allowing them to click to pick a color or even enter in the hexadecimal color code.

The color input type is significantly more limited than most of our other input types. The only attribute it supports (other than type) is the value. None of the other common input attributes are valid.

File

<input type="file">

One of the more spectacular input types is the file type input. This type of input makes it easy for a user to select a file or files from their computer, typically to upload to a remote server.

More recently, the file type input has been expanded to accept data from a user’s camera which can then be transferred.

• accept - valid file types (comma-separated, extensions and/or MIME types)
• capture - source to use for image or video input. You can specify user for the user-facing/selfie camera and environment for the outward-facing camera
• files - a <FileList> of the select file or files
• multiple - boolean to indicate if the user can select more than one file

Buttons

<input type="button">

Very similar to the button element, the button type input is just a button.

A button has no functionality out of the box. If you want a button to do something, you will need to attach an event handler or use either submit or reset to get a button that functions.

The most important attribute for the button type input is the value, because it’s what gets displayed on the button itself (similar to <button>value</button>).

Images

<input type="image">

The image input type is for when you want to have a button, but want to use an image instead.

Unlike the button type, images have a bit more capabilities depending on which attributes you provide:

• alt - alternate text string
• height - height in pixels to display the image
• src - the source URL for the image
• width - width in pixels to display the image

And if you want to use it as a form submission button:

• formaction - URL to submit the form to
• formenctype - encoding type to use, handle when you’re submitting files
• formmethod - HTTP method to use when submitting
• formnovalidate - boolean to indicate if form validation should be skipped
• formtarget - where to load the form submission results

The Reset Button

<input type="reset">

The reset type is an extension of the button type input. When clicked, it will reset the form to it’s original state.

Because it’s an extension of the button type, the reset type accepts a value that is used as the button text.

The Submit Button

<input type="submit">

A bit less destructive, the submit type input will submit the current form when it’s clicked.

Dates

<input type="date">

The date type input not only expects the input from the user in the format of a date, but also provides up and down buttons to update the date and a lovely little date picker that the user can expose and use.

Parameters:

• min - the earliest date to be considered valid
• max - the latest date to be considered valid
• readonly - boolean whether the input should be read-only
• step - the interval to use when clicking the up and down arrows

Time

<input type="time">

Similar to the date input, the time input type expects the user input to be in the format of a time string and provides the user with up and down buttons to increment and decrement the hour and minute values as well as toggle the meridian (AM/PM).

On some browsers, a more modern experience is presented in the form of a time picker featuring hour and minute sliders to make things even easier.

• min - the earliest time to be considered valid
• max - the latest time to be considered valid
• readonly - boolean whether the input should be read-only
• step - the interval to use when clicking the up and down arrows

Local Date and Time

<input type="datetime-local">

Taking the date and time inputs and combining them into a single input was the next logical step, but unfortunately the datetime-local input type isn’t nearly as supported as the aforementioned.

• min - the earliest date and time to be considered valid
• max - the latest date and time to be considered valid
• readonly - boolean whether the input should be read-only
• step - the interval to use when clicking the up and down arrows

Month

<input type="month">

The month type input provides a similar interface to the date type and date portion of the datetime-local type which limiting the selection to the month and year.

Once the support is there, this is going to make a great input type for accepting expiration dates of credit cards as well as birthdays.

• min - the earliest year-month to be considered valid
• max - the latest year-month to be considered valid
• readonly - boolean whether the input should be read-only
• step - the interval to use when clicking the up and down arrows

Week

<input type="week">

The week type input like the month type, presents the user with the same familiar calendar picker, but limits selection to a specific week.

• min - the earliest year-week to be considered valid
• max - the latest year-week to be considered valid
• readonly - boolean whether the input should be read-only
• step - the interval to use when clicking the up and down arrows

Conclusion

The <input> element has come a long way, expanding into a full (albeit not fully supported yet) suite of user input types. Support for these new types is improving rapidly and for most of the new types, falling back to a plain text input may not be ideal, but at least it’s quite graceful.