Section 10.3. Styling Forms | Dreamweaver CS3: The Missing Manual

10.3. Styling Forms

Web forms are the primary way visitors interact with a Web site. By supplying information on a form, you can join a mailing list, search a database of products, update your personal profile on MySpace, or order that Star Wars collector's plate you've had your eye on.

There's no reason your forms need to look like all the others on the Internet. With a little CSS, you can style form fields to share the same formatting as other site elements like fonts, background colors, and margins. There aren't any CSS properties specific to forms, but you can apply just about any property in this book to a form element.

The results, however, can be mixed (see Figure 10-7). Browser support for styling form elements varies greatly. Safari 2 and earlier limits styling to only a few form elements like text fields and the < fieldset > and <legend> tags. It won't let you change the look of buttons, checkboxes, radio buttons , or pull-down menus . Even Internet Explorer and Firefox may display the same form elements differently. The next section tells you which properties work best with which form tags, and also lists which browsers interpret them properly.

UP TO SPEED
Staying True to Form

Even without the varying browser support for CSS-styled forms (Section 10.3.1), there are good reasons to tread lightly when altering the look of universally recognized interface elements like Submit buttons and pull-down menus. Most Web surfers are already very familiar with how forms look and work. The generic look of a Submit button's the same from site to site. When people see it, they instantly know what that button does and how to use it. If you alter the look of a form too much, you may make it harder for visitors to fill out your form correctly.

Adding a dotted border to a form field can turn an easily recognizable text field into an easily skipped box. (See the examples at bottom right and bottom center of Figure 10-7.) If that text box is intended to capture email addresses for your newsletter, you may lose a few visitors who skip right over it. At the very least, make sure people can recognize the forms on your sites as forms.

10.3.1. HTML Form Elements

A variety of HTML tags help you build forms. You can format some of them (like text fields) more successfully than others (submit buttons.) Here are a few common form tags and the types of properties they get along with:

Fieldset . The < fieldset> tag groups related form questions. Most browsers do a good job of displaying background colors, background images, and borders for this tag. However, Internet Explorer lets the background flow up and over the top line of the fieldset. (Look at the top of the middle image in Figure 10-7, left column.) Padding places space from the edges of the fieldset to the content inside it. (Although Internet Explorer unfortunately ignores top padding, you can simulate it by adding a top margin to the first element inside the fieldset.)

Tip: Matt Heerema has found a way to prevent Internet Explorer from adding a background above a fieldset's top borderline. Read about it at www.mattheerema.com/archive/getting-fieldset-backgrounds-and-legends-to-behave-in-ie .
Legend . The <legend> tag follows the HTML for the <fieldset> tag and provides a label for the group of fields. The legend appears vertically centered on the top borderline of a fieldset. If the form elements for collecting a shipping address appear inside the fieldset, you might add a legend like this: <legend> Shipping Address</legend> . You can use CSS to change the <legend> tag's font properties, add background colors and images, and add your own borders.
Text fields . The <input type="text"> (<input type="text" /> in XHTML), <input type="password"> (<input type="password" />) and the <textarea> tags create text boxes on a form. These tags give you the most consistent crossbrowser CSS control. You can change the font size , font family, color , and other text properties for text boxes, as well as add borders and background colors. IE, Firefox, and Opera also let you add background images to text boxes; Safari 2.0 doesn't. You can set the width of these fields using the CSS width property. However, only the <textarea> tag obeys the height property.
Buttons . Form buttonslike <input type="submit"> (<input type="submit" />)let your visitors submit a form, reset its contents, or set off some other action to occur. While Safari 2.0 and earlier doesn't recognize formatting of these elements, other browsers let you go wild with text formatting, borders, and backgrounds. You can also align the button's text to left, middle, or right using the text-align property (Section 6.4.1.2).
Drop-down menus . Drop-down menus created by the <select> tag also give you a fair amount of styling control. Safari 2.0 limits you to font family, color, and size, while most other browsers also let you set background color, image, and borders.

Figure 10-7. Browser support for styling form fields varies. Safari 2.0 (right) has the strongest "keep your hands off my user interface" policy. Internet Explorer (left) and Firefox (center) are more tolerant, but there are significant differences between them. Internet Explorer applies background colors and borders to checkboxes and radio buttons, while Firefox doesn't. The best you can do is design your forms carefully and don't expect them to look the same on every browser.

Note: For more on the wide variety of browser results you get when applying CSS to form elements, visit www.456bereastreet.com/archive/200409/styling_form_controls/ and www.456bereastreet.com/archive/200410/styling_even_more_form_controls/.
Checkboxes and radio buttons . Most browsers don't allow formatting of these elements. Opera, however, lets you set a background color that appears inside the box or button. Internet Explorer adds a background color around the box or button. Because browsers vary widely in how they treat these elements, it's best to leave them alone.

POWER USERS' CLINIC
Attribute: The Selector of the Future

When it comes to styling forms, tag styles just don't cut the mustard. After all, text boxes, radio buttons, checkboxes, password fields, and buttons all share the same HTML tag<input>. While a width of 200 pixels makes sense for a textbox, you probably don't want your checkboxes to be that big, so you can't use the <input> tag to format width. For now, the most reliable way of formatting just text fields would be to add a class name to each text fieldlike <input type="text" class="textfield" name="email" /> and then use the class style to style it.

Before long, you'll have a more advanced CSS selectorthe attribute selector . An attribute selector targets an HTML tag based on one of the tag's attributes. The type attribute is responsible for determining what kind of form element the <input> tag produces. The type value for a form text field is text . To create a style that makes the background color of all single-line text fields blue, you'd create this selector and style:

   input[type="text"] { background-color: blue; }

Changing text in the above example to submit creates a style for submit buttons only, and so on.

Since Internet Explorer 7, Firefox, Safari, and Opera already understand attribute selectors, it won't be long before you can start using them full force. They're not just for form elements either. You can use an attribute selector to style any tag with a particular attribute. Here's the selector for styling links that point to http://www.cosmofarmer.com/: a[href ="http://www.cosmofarmer.com" ] .

CSS 3 promises even more elaborate attribute selectors, including the ability to select attributes that start with a particular value (like http:// ) or which end with a particular value (like .jpg or .pdf ).

10.3.2. Laying Out Forms Using CSS

All it takes to create a form is adding a bunch of labels and other form elements to a Web page. Visually, though, you may end up with a chaotic mess (see Figure 10-8, left). Forms usually look best when the questions and form fields are organized into columns (Figure 10-8, right).

Figure 10-8. The different shapes and sizes of text boxes, radio buttons, and other form objects don't naturally align well with text, often causing an ungainly zigzag pattern. This form isn't just ugly, it's hard to read (left). The solution's to organize your forms into columns (right), using either an HTML table or CSS styles.

You can achieve this effect in a couple of ways. The easiest approach is with an HTML table. Although form labels and fields aren't strictly table data, they lend themselves beautifully to a row/column format. Just put your labels ("First Name," "Phone Number," and so on) in one column, and form fields in a second column.

Using CSS, you can also create a two-column form like Figure 10-8 (with the added benefit of less HTML code.) Here's the basic approach:

Wrap each label in a tag .

The obvious choice for a tag is <label>, since it's designed to identify form labels. But you can't always use <label> tags for all labels. Radio buttons usually have a question like "What's your favorite color?" followed by separate <label> tags for each button. So what tag do you use for the question? In this case, you must resort to wrapping the question in a <span> tag: <span>What's your favorite color?</span> . Then add a class to each of these tags: <span class="label"> .

Note: Visit www.htmldog.com/guides/htmladvanced/forms/ for a quick overview on the <label> tag.
Float and set a width for the labels .

The secret to this technique lies in creating a style that floats the labels to the left and sets a width for them. The width value should provide enough space to accommodate the entire label on one line if possible. You can create a class style that looks something like this:
```
 .label {     float: left;     width: 20em; } 
```
The width and float turn the labels into little evenly- sized blocks and let the content that followsthe form fieldwrap on the right side of the label.
Adjust the style .

Just a couple more enhancements complete the job. You want to align the label text to the right, so each label appears next to each form field. Also, adding a clear: left property clears the floats (Section 7.6), so that the labels fall one below the other instead of wrapping continuously. Finally, by adding a little bit of right margin, you can create a nice gutter of white space between the labels and form fields.
```
 .label {     float: left;     width: 20em;  text-align: right;     clear: left;     margin-right; 15px;  } 
```
At this point, you've got yourself a simple, neat form. You can make other enhancements if you wish, like making the labels bold and a different color. The tutorial that starts in Section 10.1 provides a step-by-step example of this technique.

Note: For a sophisticated demonstration of an all-CSS form layout, visit http://jeffhowden.com/code/css/forms/ .