Form Mastery - HTML5 Mastery: Semantics, Standards, and Styling - page 144

support the new types, the input fields will fall back to the default—the basic text
input. As with other HTML5 features, you can use Modernizr ( ht-
tp://www.modernizr.com ) to detect support for the new input types. To add sup-
port for features missing in older web browsers, you can use a script such as html5Wid-
gets, which is a JavaScript polyfill—meaning it fills in missing form features using
JavaScript in browsers that do not support them natively. Download the html5Wid-
gets script and find implementation details at https://github.com/zoltan-
dulac/html5Widgets .

Color picker
The color input type creates a color picker (also known as a color well ) that can be
used to choose colors, as shown in Figure 4-9 . The color values are sent as URL-en-
coded 1 hexadecimal values on form submission. For instance, black (the default) will be
sent as %23000000 , where “ %23 ” is the URL-encoding for the hash symbol (#), which
means %23000000 is the color value #000000 (which is the more usual way of en-
countering colors in, for example, CSS code).

Figure 4-9. Pop-up color picker created with the color input type, as shown in the Opera web
browser

This particular input may seem rather esoteric, and you may even go so far as to ask
yourself when you would actually need it. Here's an example to get your gears turning
on how it could be used: a search engine that includes a “search-by-color” feature, per-
haps as part of a search form for a car dealership that allowed the user to include a pre-
ferred color in their search for a new car:
<p><label>Preferred

color: <input type="color"

name="carcolor" /></label></p> 2