Designing Forms - Web Publishing with HTML and CSS - page 339

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 11.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.

Task: Exercise 11.3: Applying Styles to a Form

▼

Let's take another look at the form from Exercise 11.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.

11

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, three styles that I copied directly from the previous exer-
cise:

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;

}