(^376) Chapter 9 XHTML Forms
Styling Forms with Only CSS
Using “Pure” CSS to Style a Form.In this method, the CSS box model is used to
create a series of boxes, as shown in Figure 9.23: the outermost box defining the form
area, a series of boxes contained in the form area (one for each line in the form), and
the innermost boxes to align the form text. CSS is used to configure each of the box
types previously described. The myFormid declares properties for the entire form area.
The myRowclass sets the height of a typical line in the form. The mySubmitclass config-
ures the display of the submit button with declarations for the left and top margins.
The labelColclass is the key to aligning the text. The area has a width of 100 pixels
and the text will align to the right.Figure 9.23
A sketch of the box
model used to
configure the form
Figure 9.24 displays a Web page with a form configured in this manner (see
Chapter9/form2.html in the student files).
As you view the following CSS and XHTML, note that the labelColclass floats to the
left side of the form and results in a neatly aligned text label for each input box.