HTML and CSS Reference
In-Depth Information
It works perfectly with the
min
,
max
, and
step
attributes (see
below). In Opera and Chrome, it is rendered as a spinner con-
trol that will not go beyond the upper and lower limits (if speci-
fied) and which progresses by the increment specified in
step
,
although a user can also type the value (
Figure 3.6
). The spin
controls are outside the input area in Opera, and inside the input
area in Chrome. The spec is rightly unprescriptive on the UI of
these new controls.
FIguRE 3.6
Opera (left)
and Chrome (right) rendering
<input type=number>
.
There's a nasty gotcha on desktop browsers that don't offer a
special, numeric-only UI. Currently, typing alphabetic characters
into
type=number
fields doesn't throw a validation error in Opera
or Chrome. This seems to me to be highly counter-intuitive
behavior. It's because the browser doesn't get as far as validat-
ing the input, as it never even replaces the current value of the
field with the non-numeric characters that you typed. Unfor-
tunately, the UI suggests that you've entered alphabetics and
they've been accepted.
The range input type
Using
<input type=range>
renders as a slider.
Figure 3.7
shows
it in Chrome.
FIguRE 3.7
Chrome's
rendering of
<input
type=range>
.
Previously, sliders needed to be faked by hijacking an input and
using JavaScript and images for the pointers. Because these
were not native in the browser, great care had to be taken—and
extra code written—to ensure keyboard accessibility. Now that
sliders are native to HTML, the responsibility is removed from
the developer, leading to leaner code and greater accessibility
for keyboard users.
See the example in the “Putting all this together” section of this
chapter for more information. It works perfectly with the
min
,
max
,
and
step
attributes (see below).
