New Input Types
HTML5 introduces thirteen new input types:
While no desktop browser implements all of the new HTML5 input types, most current desktop browsers implement most of the features; support on mobile browsers in generally better than on desktop. Visit http://www.findmebyip.com/litmus to see the current state of browser support for these input types.
The good news is that major browsers all fall back to type="text" when they don't recognize an input type.
The new HTML5 search input type is supported by the latest version of all browsers.
Most input fields are meant to be filled out only one time and then submitted for processing. But a search box is a bit different. For example, consider Microsoft Word 2010's search box:
Notice the x used for clearing the box. If you look at search boxes in other applications, you'll notice many of them provide a simple way to clear the text. HTML5 browsers that support the search input type are taking the same approach. For example, here's Chrome's search box: Note that the x doesn't show up until you have entered some text into the field.
The new HTML5 tel input type is supported by the latest version of all browsers.
On desktop browsers, you don't really gain anything by using the tel input type. As telephone numbers can come in all different formats, there are no constraints on what can be entered here. You could, however, add your own custom validation to all telephone inputs and use the type="tel" as a means of finding them.
Also, user agents are free to provide a different/better means for filling out input fields based on their type. For example, the iPhone provides a more appropriate interface (presenting the user with the phone keypad) for filling out fields of the tel type:
url and email
The new HTML5 url and email input types are supported by the latest version of all browsers.
Browsers can provide validation for type="url" fields to make sure the user enters a valid URL.
Also, like with type="tel", user agents are free to provide a different/better means for entering URLs and email addresses.
For example, for url types the iPhone provides keys for ".", "/" and ".com" and does not provide a "space" key, as spaces are not allowed in URLs:
For emails, the iPhone provides "@" and "." keys: For some reason, it does not provide a ".com" key.
Interestingly enough, the iPhone also provides a "space" key for emails. This is because email input types can include a multiple attribute, which, when included, allows users to enter multiple emails delimited by spaces. If the iPhone were a little smarter, it would only include the "space" key when the "multiple" attribute was present.
date/time input types
The new HTML5 date, datetime, datetime-local, month, week, and time input types are only supported by:
- iOS Safari
- Blackberry Browser
- Chrome for Android
Browsers that support these input types present the user with contextually-appropriate dialogs such as date pickers. Here's the date input field on Chrome:
And here's the date input field on an iPhone:
The new HTML5 number input type is only supported by:
Supporting browsers present up and down buttons (spinboxes) to scroll through numbers and they also allow you to use the up and down arrows on the keyboard. Opera's spinbox is shown below:
Safari on iPhone doesn't present spinboxes, but does offer the user the number-specific keypad:
All three implementations (Opera, Chrome and Safari) are subpar in that they don't accept decimals in their standard format. To see this:
- Open html5-forms/Demos/input-validity.html in Chrome, Opera, or Safari.
- In the number field, enter 3.3 or some other decimal.
- Press the Check Validity button. You'll receive an alert reading "3.3 is NOT a valid number." Oops.
The new HTML5 range input type is only supported by recent versions of all browsers.
Browsers currently represent range input types as sliders. This is nice, but the problem is that they don't indicate a value, so the user doesn't know what they've selected. Consider the following code:
The problem is that there is no indication of the current value. We can try fixing this with this simple little trick:
This trick works pretty well in Safari, which displays the title value immediately after the mouse hovers over the field. However, with Chrome and Opera there is a slight delay, which makes this solution less than ideal. Also, the value is only visible when the cursor is over the field.
The output Element
There is a new HTML5 output element used to show output generated by a script on a page. For example, you could use it to show an error message or the result of a calculation based on values entered in form fields.
We can use the output element to create a better solution for making our range slider more user friendly:
To fix this, we need to populate the output element dynamically if and only if the range input type is supported. Here's a possible solution:
The min, max, and step attributes can be used on the number, range, and datepicker elements.
min and max are intuitive. They are used to set the minimum and maximum possible values.
The step attribute is used to indicate possible values in between the min and max values.
These attributes are only supported by:
To see how this works:
- Open html5-forms/Demos/input-number-step.html in Chrome or Opera.
- Use the spinner to go up and down. Notice only even numbers are shown and that you cannot go below 0 or above 100.
- Type in 15 or some other odd number. Notice the field turns red.
Safari can validate the numbers based on min, max, and step, but doesn't provide an easy way to pick a number.
Only Opera and Chrome support the new HTML5 color input type, but, again, as browsers all fall back to type="text" when they don't recognize an input type, there is no harm in using the color input type now. When other browsers start implementing it, your visitors will likely get a nice color picker.
- Open html5-forms/Demos/input-validity.html in Chrome or Safari.
- In the color field, enter "red" or "#ff0000".
- Press the Check Validity button. You'll receive an alert reading "red is a valid color."
- Now try it with a bad color name (e.g., "foo") and you'll get an alert reading "foo is NOT a valid color."
Opera's color picker is shown below:
If you click on Other... you get a large color picker with more options.