HTML and CSS Reference
In-Depth Information
FIGURE 2.9
Error message for
the number and pattern input
type examples when they are
not filled in with the correct
data before submission.
Figure 2.9
shows usage of the new number input type and another simple text
field. The first example will accept as valid data any number between 1 and 100,
whereas the second one has a custom regular expression specified so that only
three concatenated digits of between 1 and 6 will constitute valid data.
I added some rudimentary styling to my example so that it looks a bit less hor-
rible than the standard HTML form looks. You'll notice as you play with it that
when you enter data into the form, it turns green as it becomes valid but is black
otherwise. I did this using the
:valid
CSS3 pseudo-class, which you'll learn more
about in Chapter 9.
NOTE:
For more information on HTML5 form elements, read
“New form features in HTML5” by Patrick Lauke and me at
<CANVAS>
Last but not least in this section, you'll briefly explore HTML5
<canvas>
, which
allows you to manipulate bitmap graphics via script. The
<canvas>
element doesn't
do much on its own. It creates a static space on the screen with dimensions that
you specify (see simple-canvas.html in the chapter2 folder):
<canvas id=”canvas” width=”480” height=”320”>
<!-- fallback content here -->
</canvas>
