HTML and CSS Reference
In-Depth Information
no other value is valid, so entering the word “blue” wouldn't be correct. For that reason, you might opt to
provide a JavaScript-based color picker such as JSColor (
jscolor.com
) for browsers that don't support
color inputs, while browsers that do support it can use their native interface.
input type="number"
A number input is for—you guessed it—entering numbers. This input type is new in HTML5 but already
supported by several browsers, though not yet all of them. Some mobile browsers will automatically invoke
a numeric keyboard for number fields, and desktop browsers will typically render the field with a set of up
and down arrows (called a
spinner control
, shown in Figure 8-10) making it easy to increase or decrease
the value one digit at a time. You can also specify a different increment in the optional
step
attribute and
each click of the spinner will raise or lower the value by that number, though users can still enter a value
by hand. The optional
min
and
max
attributes can specify the minimum and maximum values, as you
would expect.
A number field won't accept any non-numeric characters, with just a few exceptions. If the number entered
begins with a minus symbol (
-
) it indicates a negative number, so that symbol is allowed but only as the
first character in the value. A valid number may also include a single period (
.
) as a decimal point. Any
other letters, symbols, or punctuation are invalid, but a browser might not indicate any error, instead opting
to just ignore and strip away those characters when the form is submitted.
A number input isn't intended for any arbitrary numerals; it's specifically made for indicating a
count
for
calculation purposes, such as a number of items or an amount of currency. Use a number input for
numbers where an incremental spinner control would make sense. For other kinds of numeric input that
people would typically enter by hand, like addresses, measurements, or a credit card number, use an
ordinary text field.
Listing 8-8 shows a number input with a
min
attribute that prevents entering any negative numbers (values
less than 0 aren't allowed) and a
step
attribute that increments (or decrements) the value by 2 with each
click of the spinner. The up and down arrow keys on a keyboard can also increment the value by the same
step.
Listing 8-8.
A number input with
min
and
step
attributes
<label for="order-count">How many? (sold only in matched pairs)</label>
<input type="number" name="count" id="order-count" min="0" step="2">
Figure 8-10 shows the rendered result, taken once again from Opera. Browsers that don't support the
number input will fall back to an ordinary text field with no spinner control and no restrictions on what value
it will accept. Some additional client-side or server-side validation could catch any non-numeric characters
and either reformat the value or display an error so the user can correct it.
Figure 8-10.
Opera displays a number input with a spinner control and the number aligned to the right within the field.
