Saturday, 1 December, 2018 UTC

HTML5 Input Types Explained

HTML5 Input Types Explained

Summary

Remember searching for the perfect color picker library for jQuery? Remember writing code to generate the multiple select boxes that make up a date? As HTML has matured over the years, new improvements have replaced our old ways. Some welcome additions have come in the form of the expansion of the humble input element.
Gone are the days of the input’s greatest tricks being able to magically mask user input or embed hidden data on a form.
Input elements can still do these tricks but have been expanding into new types to support specific formats of textual data like email addresses or numbers and has expanded beyond basic text inputs with an out of the box color picker and slider component.
To get all of these goodies, all you need to do is switch the type attribute on your input and optionally specify any type-specific attributes.
Standard Attributes
Before discussing each of the different input types, I wanted to mention that each of the following types 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, 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
And let’s not forget the star of this post:
  • type - string to indicate which type of input the element represents
Any type-specific attributes are documented below.
While fairly well supported across modern browsers, there are still browsers out there that may not support the more advanced input types listed below. In those scenarios, the unsupported input type will gracefully fallback to being just a plain ol' text input.

All bets are off when it comes to the input type's validation, so it's recommended that you always implement server-side validation just in case.
Text 
<input type="text">
Our default type of input, text, is the most basic form of input. It’s a field, it accepts free form text.

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 spell checking
Password 
<input type="password">
Like our text input, password type is a free form text input with the added bonus of masking the user’s input for security.

Attributes

Password type accepts all of the additional attributes as the text type with the exception of spellcheck. When would you ever want to spell check a password anyway?
Hidden 
<input type="hidden">
Yet another free form text field, but like John Cena, you can’t see it.

Attributes

The hidden type doesn’t have any additional attributes, but does have another trick up it’s sleeve.
If you set the name attribute to _charset_ the value for the input will become that of the character encoding of the form being submitted.
Email Address(es) 
<input type="email">
The email type is where things start to really get interested. We’ve all done our fair share of email address format validation, and now it’s just baked in!
Somewhat of a subtle feature, some mobile browsers will take a hint from the email type and add the @ symbol at the top level of the keyboard for easier access.

Attributes

In addition to the common attributes as well as the text type’s attributes, the email type accepts a boolean attribute named multiple which will allow the input to accept a comma separated list of email addresses.
Number 
<input type="number">
Number type inputs not only force the user’s input to be that of a number (float or integer) but in most browsers provides some nice little buttons to increment / decrement 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.

Attributes

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">
Search type is effectively a text type with the added bonus of a button to clear the text that has been entered. It shares the same additional attributes as a normal text type input.
Telephone Number 
<input type="tel">
I know what you’re thinking, the telephone number type accepts only phone numbers. Actually, while intended to accept telephone numbers, the tel type doesn’t actually handle the validation of the phone number.

Attributes

The telephone number type accepts all of the standard attributes that text type does except spellcheck. Because this type accepts the pattern attribute, we can easily 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>
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

Attributes

Like most of our other textual input types, the URL type also accepts the same attributes as our text type, sans spellcheck.
Checkbox 
<input type="checkbox">
Checkboxes are an input type that represents the selection or 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.

Attributes

  • 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 check boxes. Multiple radio type inputs are considered a group and only one radio button in said group can be selected at a time.

Attributes

  • checked - boolean to indicate whether the radio is selected or not
Told you radio and check boxes were related ;)
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 fancy slider to select their value with.

Attributes

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 insert your favorite front end framework here.
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.

Attributes

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 before HTML5 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.

Attributes

  • accept - valid file types (comma-separated, extensions and/or MIME types)
  • capture - source to use for image or video input, user for the user-facing / selfie camera, 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 is a button is a button, so it really doesn’t do anything out of the box. If you want it to actually do something you will need to attach an event handler or use either submit or reset to get a button that actually does something.

Attributes

The most important attribute for the button type input is the value as 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.

Attributes

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.

Attributes

Because it’s an extension of the button type, the reset type accepts a value which 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 on.

Attributes

Same deal as the reset type, pass it a value and it will show up as the submit button’s text.
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 a up and down buttons to update the date and a lovely little date picker that the user can expose and use.
Please Note: the value displayed will always be shown in a format based on the user's locale, but the value itself is always in CCYY-MM-DD format.

Attributes

  • 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.

Attributes

  • 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 this particular input type isn’t nearly as supported as the aforementioned.

Attributes

  • 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.

Attributes

  • 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">
A little less useful in this author’s opinion, the week type input like the month type, presents the user with the same familiar calendar picker, but limits selection to a specific week.
Maybe by the time this input type is more widely supported I’ll have come up with a use case ;)

Attributes

  • 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
Final Thoughts
The input element sure 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 it’s at least quite graceful.

... more @ alligator.io

alligator.io