HTML5 Guidelines for Web Developers

(coco) #1
3.1 New Input Types 41

Figure 3.2 The input type “range” in Safari


3.1.5 The Input Type “color”


Once again the developers of Opera lead the way by being the first to program a
graphical input option for the color element. As you can see in Figure 3.1, Opera
(version 11 and later) offers a rectangular field with a choice of frequently used
colors. You can also bring up a color picker along the lines of those you see in
image-editing programs. Sadly, this input element is still not implemented in the
other browsers.


The value of the input element must contain the 8-bit RGB values in hexadeci-
mal notation preceded by a # character. The color blue, for example, would be
written as #0000ff.


3.1.6 The New Input Types in Action


Enough with the theory: Our first example shows you the new elements, one
below the other. Because that’s not very challenging, we will also test each ele-
ment’s function. The trick is that the browser will set the type of an unknown ele-
ment to text, and we can then evaluate those properties in JavaScript:


Free download pdf