Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg16476052

Applying Cascading Style Sheet Properties to Form Elements 361

12

▼

As you can see, the field that we applied styles to is radically different from the one that
uses the default decoration. You can do anything to regular form fields that you can do
to other elements. In fact, you can make form fields look just like the rest of your page,
with no borders and the same fonts as your page text if you like. Of course, that will
make your forms extremely confusing to use, so you probably don’t want to do it, but
you could.

It’s also fairly common to modify the buttons on your pages. Normally, Submit buttons
on forms are gray with beveled edges, or they have the look and feel provided by the
user’s operating system. By applying styles to your buttons, you can better integrate them
into your designs. This is especially useful if you need to make your buttons smaller than
they are by default. I provide more examples of style usage in forms in Exercise 12.3.

Bear in mind that some browsers support CSS more fully than others. So some users
won’t see the styles that you’ve applied. The nice thing about CSS, though, is that they’ll
still see the form fields with the browser’s default appearance.

Exercise 12.3: Applying Styles to a Form

Let’s take another look at the form from Exercise 12.2. The form can easily be further
spruced up by tweaking its appearance using CSS. The main objectives are to make the
appearance of the controls more consistent and to make it clear to users which form fields
are required and which are not. In the original version of the form, the labels for the
required fields were bold. We keep with that convention here and also change the border
appearance of the fields to indicate which fields are required and which aren’t.

Let’s look at the style sheet. This style sheet is similar to the one in Exercise 11.2, but I
have made some changes. First, here are three styles that I copied directly from the previ-
ous exercise:

form div {
margin-bottom: 1em;
}
div.submit input {
margin-left: 165px;
}
label.field {
display: block;
float: left;
margin-right: 15px;
width: 150px;
text-align: right;
} ▼