Table of Contents for

The Modern Web

The new HTML5 input types discussed so far already cover various text formats. But, of course, many forms require that the user enter a number, for instance, credit card details, an area code, or a quantity.

The number input is the field for inputting numbers. It is often displayed as a text field, but some browsers also add controls—often a pair of arrows, one up, one down—for incrementing or decrementing the value.

Similar to number is the range input, which lets users enter a value without requiring them to be too precise about the exact figure; to allow this, many browsers style this element as a slider.

<input type="number">
<input type="range">

You can compare number and range as they’re displayed in Chrome for Android in Figure 8-4.

Figure 8-4. The number and range types as displayed in Chrome for Android

Both of these types have some new attributes in common: max and min are number values that set the maximum and minimum (did you work that out for yourself?) permitted values, and step is the number by which the value is incremented or decremented. The following code shows how all three could work; the number input has an initial value of 50 and can be incremented or decremented by 10 at a time to reach a minimum of 10 or a maximum of 100:

<input type="number" max="100" min="10" step="10" value="50">

You can also manipulate these values with JavaScript using the stepUp() and stepDown() methods. Each takes a single integer value, which moves the value of the input by the specified number of steps; for example, this syntax reduces the range input value by 3 steps:

var foo = document.querySelector('input[type=range]');
foo.stepDown(3);

Each method returns an error if the specified number of steps causes the value to exceed the element’s max or min values.

When working with numeric fields, you may want to take advantage of a new DOM property defined in HTML5, valueAsNumber. This property is similar to the existing value property but returns the value as a number rather than a string, meaning you don’t need to convert between types using parseInt(). Using valueAsNumber is simplicity itself:

var foo = document.querySelector('input[type=number]');
bar = foo.valueAsNumber;

Another popular data pattern for forms is a date or time field, used in situations such as when asking the user to enter a date of birth or choose a delivery time and date. Often these are rendered using a JavaScript-created date picker, a common widget aimed at helping users choose a date from a range shown on screen so they don’t have to worry about conforming to your chosen date pattern.

HTML5 has a range of new input types for date and form fields, and many browsers have added native date-picker widgets to enhance them. Probably the most commonly implemented is date, which lets the user select a single date from the widget:

<input type="date">

The implementation method varies across browsers, with mobile and tablet devices varying quite significantly from desktop and laptop browsers. You can see some examples of this variety in Figure 8-5.

Figure 8-5. The native date-picker widget on the Chrome for Android tablet (left), the iPhone (center), and the Chrome desktop (right)

HTML5 also has a series of other date and time inputs: If you need to be more general about dates, you can use month to select an entire month and week for an entire week; or if you require a time without any associated date, you can use time to choose hours and minutes. A couple examples of different time and date pickers are shown in Figure 8-6.

Figure 8-6. A time picker on Chrome for Android (left) and a month picker for iPhone (right)

If you require a date and a time, the datetime input requests both. This field requires a value in the format YYYY-MM-DDTHH:MMZ, where the Z is a shorthand code for the UTC time zone. For example, to submit a time of 2 PM on April 1st, 2014, you would use 2014-04-01T14:00Z. If the time zone isn’t required, you could use datetime-local. For both types, the picker widget would have fields for both date and time, as shown in Figure 8-7.

All the date-related input types are demoed in input-types-dates.html; open the page in different browsers and see how they’re displayed.

As with the number input types, the max and min attributes are permitted, but they must use a valid date or time format; a full datetime would require YYYY-MM-DDTHH:MMZ, whereas the month would require only YYYY-MM. The step attribute is also allowed, but its time period depends on the element used: a day, a week, a month, or a time in seconds.

Figure 8-7. A datetime picker on Chrome for Android

So putting that all together, you could use attributes somewhat like the following, where the month input would allow the user to select only dates between January 2012 and June 2016; the step attribute would be in play only if the stepDown() and stepUp() methods were used:

<input type="month" max="2016-06" min="2012-01" step="3">

As numbers have the valueAsNumber DOM property, so dates have valueAsDate. This property works in the same way, but returns a date-formatted value; for example, given the date 04/01/2014, the value property would return 2014-04-01, whereas the valueAsDate property would give Tue Apr 01 2014 01:00:00 GMT+0100 (BST) (in my time zone, at least).

var foo = document.querySelector('input[type=date]');
bar = foo.valueAsDate;

If you’re building an app that allows the user some level of customization, you may be interested to know that HTML5 has a color input, which will, if implemented, show either the system default color picker or a proprietary widget, depending on the browser:

<input type="color">

Try it for yourself in input-types-more.html. Figure 8-8 shows how Chrome implements it for Ubuntu.

Figure 8-8. Chrome uses the native color picker of your OS for the color element; here’s how it looks in Ubuntu.