HTML5 Form Attributes
Let’s go through each of the new attributes.
HTML5 New Form Input Types
search input type (
type="search") provides a search field — a one-line text input control for entering one or more search terms.
The spec states:
The difference between the text state and the search state is primarily stylistic: on platforms where search fields are distinguished from regular text fields, the search state might result in an appearance consistent with the platform’s search fields rather than appearing like a regular text field.
Many browsers style
search inputs in a manner consistent with the browser or the operating system’s search boxes. Some browsers have added the ability to clear the input with the click of a mouse, by providing an x icon once text is entered into the field.
While you can still use
type="text" for search fields, the new search type is a visual cue as to where the user needs to go to search the site, and provides an interface the user is accustomed to.
search, like all the new input types, appears as a regular text box in nonsupporting browsers, there’s no reason not to use it when appropriate.
type="email") is, unsurprisingly, used for specifying one or more email addresses. It supports the Boolean
multiple attribute, allowing for multiple, comma-separated email addresses.
If you change the input type from
The change becomes apparent if you’re using an iOS device. When you focus on the email field, the iPhone, iPad, and iPod will all display a keyboard optimized for email entry (with a shortcut key for the @ symbol).
url input (
type="url") is used for specifying a web address. Much like
For telephone numbers, use the
tel input type (
type="tel"). Unlike the
tel type doesn’t enforce a particular syntax or pattern. Letters and numbers—indeed, any characters other than new lines or carriage returns—are valid. There’s a good reason for this: all over the world countries have different types of valid phone numbers, with various lengths and punctuation, so it would be impossible to specify a single format as standard. For example, in the USA, +1(415)555-1212 is just as well understood as 415.555.1212.
number type (
type="number") provides an input for entering a number. Usually, this is a “spinner” box, where you can either enter a number or click on the up or down arrows to select a number.
The number input has
max attributes to specify the minimum and maximum values allowed. We highly recommend that you use these, otherwise the up and down arrows might lead to different (and very odd) values depending on the browser.
On many touchscreen devices, focusing on a
number input type will bring up a number touch pad (rather than a full keyboard).
range input type (
type="range") displays a slider control in browsers that support it (currently Opera and WebKit). As with the number type, it allows the
step attributes. The difference between
range, according to the spec, is that the exact value of the number is unimportant with
range. It’s ideal for inputs where you want an imprecise number; for example, a customer satisfaction survey asking clients to rate aspects of the service they received.
The default value of a range is the midpoint of the slider—in other words, halfway between the minimum and the maximum.
The spec allows for a reversed slider (with values from right to left instead of from left to right) if the maximum specified is less than the minimum; however, currently no browsers support this.
color input type (
type="color") provides the user with a color picker—or at least it does in Opera (and, surprisingly, in the built-in browser on newer BlackBerry smartphones). The color picker should return a hexadecimal RGB color value, such as #FF3300.
Until this input type is fully supported, if you want to use a color input, provide placeholder text indicating that a hexadecimal RGB color format is required, and use the
pattern attribute to restrict the entry to only valid hexadecimal color values.
Dates and Times
There are several new date and time input types, including
week. All date and time inputs accept data formatted according to the ISO 8601 standard.
This comprises the date (year, month, and day), but no time; for example, 2004-06-24.
Only includes the year and month; for example, 2012-12.
This covers the year and week number (from 1 to 52); for example, 2011-W01 or 2012-W52.
A time of day, using the military format (24-hour clock); for example, 22:00 instead of 10.00 p.m.
This includes both the date and time, separated by a “T”, and followed by either a “Z” to represent UTC (Coordinated Universal Time), or by a time zone specified with a + or – character. For example, “2011-03-17T10:45-5:00” represents 10:45am on the 17th of March, 2011, in the UTC minus 5 hours time zone (Eastern Standard Time).
datetime, except that it omits the time zone.
The most commonly used of these types is
date. The specifications call for the browser to display a date control, yet at the time of writing, only Opera does this by providing a calendar control.
If you want to take the full course and get all the information you need, check out the learnable.com course HTML5 & CSS3 for the Real World.
Looking for something specific – Sitepoint offers a range of free online tutorials
- HTML5 and even fancier forms
- How to Set Defaults for HTML Checkboxes and Radio Buttons
- The HTML5 form Attribute
- Common Techniques in Responsive Design: Heading Optimizing Form Fields
This is an excerpt from the Sitepoint book HTML5 & CSS3 for the Real World by Alexis Goldstein, Louis Lazaris, and Estelle Weyl.