Professional Web Design: Techniques and Templates, Fourth Edition

378
Chapter 14 ■ Case Study: A CSS Form
■
■
The tag is styled by the a5-row-1 label rule in the style sheet. This
rule assigns a width of 220 pixels to the tag, floating it to the left of the form
field, aligning its text to the right, and creating 30 pixels of padding to the
right.
A tag, with the class a5-required-field assigned to it, is wrapped
around an asterisk. The sole purpose of this style is to make the asterisk red
to help it stand out visually.
Much of what is discussed with this example row is reused for many of the items
in the form. Listing 14.3 shows the text that is added.
Listing 14.3
XHTML Code for First Name Row
First Name: *
Adding the Last Name Row
The Last Name row uses much of the same code as the First Name line. The main
difference is that this row is added to provide an example of a disabled row.
Figure 14.6 shows how the disabled version appears when the a5-disabled-field
class is added to the code in Listing 14.4. It is important to note that if the class
were not added to the form field, it would still be disabled but it would appear
nearly the same as the First Name field. This is why the a5-disabled-field rule
has a background color added to it.
Figure 14.6
The form with the Last Name row added.
Game Developing GWX