ChApteR 4 ■ CSS3 tRAnSItIonS foR UI elementS
You begin with the basic markup for an accessible form, shown in Listing 4-17.Listing 4-17. An Accessible HTML5 Form
As you can see, you’re using a number field with a min and max value to limit the user’s age when they enter it, an
eMail input, and a standard text input with a regular expression to get the user’s name. All inputs are required. (I’ve
added a pattern to the number input even though it is invalid in HTML5 in order to gain enforcement in Firefox 14
and earlier, which recognizes pattern but not the number attribute value itself, defaulting the field to a standard text
input.) You can use some basic CSS to improve the display of these elements, as shown in Listing 4-18.
Listing 4-18. CSS for a Typical Accessible Form
form { font-size: 1.2rem; font-family: "Gill Sans", Arial, sans-serif; }
label,input { display: block; }
label:first-letter { border-bottom: 2px solid #bbb; }
input { border: 1px solid #bbb; padding: .4rem; border-radius: .2rem; margin: .5rem 0; }
input[type="submit"] { border: none; text-transform: uppercase; }
Figure 4-4. Form Error Messages Animated with CSS3