Fancy Form Design Using CSS

Every day this week, we'll be publishing an article that's been hand picked by our editor, as part of CSS Theme Week [1].

Forms. Is there any other word that strikes as much fear into the hearts of grown web designers?

I think that the reputation of forms as an untamable, ugly necessity has arisen for two reasons:

• Form elements are derived from native operating system widgets, which makes them particularly difficult to style.
• Forms are often critical to the function of a web site -- they're most often employed as search boxes, inquiry forms, or shopping cart checkouts -- and need to function as smoothly as possible in order to meet user expectations.

However, it's still possible to incorporate both these points into designing a form tailored to the style of the rest of your site. This chapter, which is fresh from The Art and Science of CSS [2], will explore the ways in which you can design a great-looking form, and provide you with the necessary code, which we'll work through together. You can also download this article [3] as a PDF.

Accessible Form Markup

Before we can begin to look at form layout, we need to craft some really solid markup that will provide us with a framework to which we can add some style.

Forms represent the one area of your web site where you absolutely must commit time and energy to ensure user accessibility. Even though forms represent some of the most complex interactions that can occur on a web page, in many cases these interactions are only represented visually -- via the proximity of a form element to its label [4], or grouping by borders and background colors. Users of assistive technology such as screen readers may not be able to see these visual clues, so it's vital that you support these users by ensuring accessibility. The key concept behind providing an accessible form is to have descriptive labeling of all its sections and input [5] elements.

In particular, this means the proper usage of two elements: label [6] and legend [7].

There's also an improperly held belief that the only way you can guarantee that a form displays properly is by using tables. All of the code reproduced here for forms is standards-based, semantic markup, so you've got no excuse for relying on tables now!

Labeling Form Elements

No matter how you style a form element and its label [8], it generally conforms to a certain pattern:

• the form element itself
• a text label for the element
• a connection between the element and its textual description

This connection is made either through visual alignment, visual grouping, or some other visual indicator. In Figure 1, you can see that the form on the left makes a connection between the field element and its label purely through alignment, whereas the form on the right indicates a more explicit connection via the use of color.

Figure 1: Visual connections in forms (See larger image in new window [9].)

When accommodating users of assistive technology in the creation of your forms, there's one main question to consider. How can a user who's unable to see a web page create the connection between a form element and its text label, without the visual cues of proximity or grouping?

The answer is the label [10] element. label [11] is a special element applied to a form element to allow its textual description to be semantically linked to the element itself, so any assistive technology such as a screenreader can read out that text when it encounters its partner form element.

In order to use a label [12], wrap the textual description in a pair of label [13] tags, then add a for [14] attribute to the label [15]. The value of the for [16] attribute should be the id [17] of the form element with which you want to create a connection:

<label for="firstName">First name</label>
<input id="firstName" name="firstName" type="text" />

Now, when a screenreader encounters the firstName field, it'll also read out the text "First name" to the user, so he or she will know what to type into that field. The label [18] doesn't have to be near the form element and neither of them have to be in any particular order -- as long as the label [19]'s for attribute contains a valid reference, the relationship will be understood. However, having the label [20] right before the form element in the source order generally makes the most semantic sense.

A label [21] should be applied to any form element that doesn't automatically include descriptive text, such as:

• checkboxes
• radio buttons
• textarea [22]s
• text fields
• select [23] boxes

Submit buttons and submit images don't require label [24] elements, because their descriptions are contained, respectively, in their value [25] and alt [26] attributes.

Of course, you can easily style the text inside the label [27] using CSS, so you can format the label [28] text in your forms in the same way as if you were using a span [29], p [30], or div [31], but using a label [32] has the benefit of being much more accessible than any of those elements.

Grouping Related Elements

legend [33] goes hand in hand with fieldset [34]. In fact, the only element of which a legend can be a child is a fieldset [35]. A fieldset [36] groups a series of related form elements. For instance, "street address," "suburb," "state," and "zip code" could all be grouped under "postal address." You could create a fieldset [37] that groups all of those elements, and give it an appropriate legend [38] to describe that group:

<form action="example.php">
<fieldset>
<legend>Postal Address</legend>  
<label for="street">Street address</label>
<input id="street" name="street" type="text" />
<label for=" suburb">Suburb</label>
<input id="suburb" name="suburb" type="text" />
<label for="state">State</label>
<input id="state" name="state" type="text" />
<label for="postcode">Postcode</label>
<input id="postcode" name="postcode" type="text" />
</fieldset>
</form>

Now that legend [39] is associated with all those form elements inside the fieldset [40], when a person using a screenreader focuses on one of the form elements, the screenreader will also read out the legend [41] text: "Postal Address; Suburb."

The benefit of the screenreader specifying both legend [42] and fieldset [43] becomes apparent when you have two groups of elements that are very similar, except for their group type:

<form action="example.php">  
<fieldset>  
<legend>Postal Address</legend>  
<label for="street">Street address</label>  
<input id="street" name="street" type="text" />  
<label for=" suburb">Suburb</label>  
<input id="suburb" name="suburb" type="text" />  
<label for="state">State</label>  
<input id="state" name="state" type="text" />  
<label for="postcode">Postcode</label>  
<input id="postcode" name="postcode" type="text" />  
</fieldset>  
<fieldset>  
<legend>Delivery Address</legend>  
<label for="deliveryStreet">Street address</label>  
<input id="deliveryStreet" name="deliveryStreet"  
type="text" />  
<label for="deliverySuburb">Suburb</label>  
<input id="deliverySuburb" name="deliverySuburb"  
type="text" />  
<label for="deliveryState">State</label>  
<input id="deliveryState" name="deliveryState"  
type="text" />  
<label for="deliveryPostcode">Postcode</label>  
<input id="deliveryPostcode" name="deliveryPostcode"  
type="text" />  
</fieldset>
</form>

As Figure 2 shows, with the fieldset [44]'s legend [45] elements in place it's quite easy to determine visually which fields fall under which group, even on an unstyled form.

Figure 2: Unstyled form using fieldset [46] and legend [47] elements for grouping (See larger image in new window [48].)

But, you ask, couldn't the same visual effect be achieved using h1 elements instead of legend [49] elements?

Yes. However, the point of using legend [50] is that without proper semantic grouping and labeling, a screenreader user would become confused as to why he or she was required to enter "Address 1" twice. With the legend [51] included, the user will know that the second "Address 1" actually belongs to another group -- the group for the delivery address.

So, by combining label [52] and legend [53], we give visually impaired users the ability to navigate and fill in our forms much more easily. By using this combination as the basic structure for your forms, you'll ensure that not only will they look fantastic, but they'll be accessible as well!

Form Layout

There are several different ways in which you can lay out a form. The method you choose depends upon how long the form is, its purpose, how often it will be used by each person who has to fill it out, and, of course, the general aesthetics of the web page.

It's generally considered most efficient to have one form element per line, with the lines stacked sequentially one on top of the other, as most Western-language web pages are designed to scroll vertically rather than horizontally. This allows users to follow the path to completion easily and focus their attention on entering one piece of data at a time.

For each form element in a left-to-right reading system, it's logical to position the corresponding label [54] in one of three ways:

• directly above the form element
• in a separate left column, left-aligned
• in a separate left column, right-aligned

Each of these approaches has its own advantages and its own look, so consider these options when you're deciding how to lay out a form for a particular page.

Labels that are positioned directly above a form element have been shown to be processed most quickly by users. The compact grouping between label and element reduces eye movement by allowing the user to observe both simultaneously -- here's an excellent article published by UXmatters [55]. However, this type of positioning is rather utilitarian, and isn't the most aesthetically pleasing layout. It also has the disadvantage of occupying the most vertical space of the three layouts, which will make a long form even longer. Generally, top-positioned labels work well for short forms that are familiar to the user -- see the comment form in Figure 3, which is from a previous incarnation of the Dress For Dialogue web site.

Figure 3: Labels positioned above form elements

Labels that are positioned in a column to the left of the elements look much more organized and neat, but the way in which the text in those labels is aligned also affects the usability of the form.

Right-aligning the text creates a much stronger grouping between the label and the element. However, the ragged left edge of the labels can make the form look messy and reduces the ability of users to scan the labels by themselves, as Luke Wroblewski argues in his article on the subject. [56] In a left-aligned column, the labels instantly become easier to scan, but their grouping with the associated form elements becomes weaker. Users have to spend a little more time correlating the labels with their elements, resulting in slower form completion. An example of left-aligned labels can be seen in Figure 4.

Figure 4: Labels positioned in a column and aligned left -- The Man in Blue [57]

The right-aligned column layout shown in Figure 5 allows for quicker association between label and element, so again it's more appropriate for forms that will be visited repeatedly by the user. Both layouts have the advantage of occupying a minimal amount of vertical space.

Figure 5: Labels positioned in a column and aligned right -- LinkedIn [58]

Using the CSS

To create each of these different types of form [59] layouts, we'll use identical markup, but with different CSS rules.

In our example, the HTML looks like this:

<form action="example.php">  
<fieldset>  
<legend>Contact Details</legend>  
<ol>  
<li>  
<label for="name">Name:</label>  
<input id="name" name="name" class="text" type="text" />  
</li>  
<li>  
<label for="email">Email address:</label>  
<input id="email" name="email" class="text" type="text" />  
</li>  
<li>  
<label for="phone">Telephone:</label>  
<input id="phone" name="phone" class="text" type="text" />  
</li>  
</ol>  
</fieldset>  
<fieldset>  
<legend>Delivery Address</legend>  
<ol>  
<li>  
<label for="address1">Address 1:</label>  
<input id="address1" name="address1" class="text"  
type="text" />  
</li>  
<li>  
<label for="address2">Address 2:</label>  
<input id="address2" name="address2" class="text"  
type="text" />  
</li>  
<li>  
<label for="suburb">Suburb/Town:</label>  
<input id="suburb" name="suburb" class="text"  
type="text" />  
</li>  
<li>  
<label for="postcode">Postcode:</label>  
<input id="postcode" name="postcode"  
class="text textSmall" type="text" />  
</li>
 
<li>  
<label for="country">Country:</label>  
<input id="country" name="country" class="text"  
type="text" />  
</li>  
</ol>  
</fieldset>  
<fieldset class="submit">  
<input class="submit" type="submit"  
value="Begin download" />  
</fieldset>
</form>

This HTML uses exactly the same fieldset-legend-label structure that we saw earlier in this chapter. However, you should see one glaring addition: inside the fieldset [60] elements is an ordered list whose list items wrap around each of the form element/label pairs that we're using.

The reason for this addition? We need some extra markup in order to allow for all of the styling that we'll do to our forms in this chapter. There are just not enough styling hooks in the standard fieldset-label structure to allow us to provide robust borders, background colors, and column alignment.

There are a number of superfluous elements that we could add to the form that would grant us the extra styling hooks. We could move the form elements inside their label [61] elements and wrap the label [62] text in a span [63], or wrap a div [64] around each form element/label pair. However, none of those choices would really contribute anything to the markup other than its presence.

The beauty of using an ordered list is that it adds an extra level of semantics to the structure of the form, and also makes the form display quite well in the absence of styles (say, on legacy browsers such as Netscape 4, or even simple mobile devices).

With no CSS applied and without the ordered lists, the rendered markup would appear as in Figure 6.

Figure 6: Unstyled form without any superfluous markup (See larger image in new window [65].)

Figure 7 shows how the unstyled form looks when we include the ordered lists.

Figure 7: Unstyled form that includes an ordered list inside each fieldset
(See larger image in new window [66].)

I'm sure you'll agree that the version of the form that includes ordered lists is much easier to follow, and hence fill out.

Using Lists in Forms If you're vehemently opposed to the inclusion of an ordered list inside your form.markup, you can easily substitute it for some other wrapper element; all you need is one extra container around each form element/label pair in order to style your forms any way you want.

Two other HTML oddities that you might have picked up on:

• Each form input has a class that replicates its type attribute, for example class="text" type="text". If you need to style a form element, this is a handy way of accessing it, given that Internet Explorer 6 and earlier don't support CSS attribute selectors (although Internet Explorer 7 does, so you mightn't need to include these extra classes in the near future).
• The form submit button is contained inside its own fieldset [67] with class="submit." You'll frequently have multiple actions at the end of a form, such as "submit" and "cancel." In such instances, it's quite handy to be able to group these actions, and a fieldset [68] does this perfectly. If any styles are applied to normal fieldset [69] elements, you'll most often want to have a different style for the fieldset [70] surrounding these actions, so the class is necessary to distinguish our actions fieldset [71]. The fieldset [72] and the input [73] inside it both have the same class name because the term "submit" makes sense for both of them, but it's easy to distinguish them in the CSS by preceding the class selector with an element selector, as we'll see below.

Applying General Form Styling

There are a number of styles which we'll apply to our forms, irrespective of which layout we choose. These styles revolve mainly around the inclusion of whitespace to help separate form elements and fieldset [74] elements:

fieldset {  
margin: 1.5em 0 0 0;  
padding: 0;
}
legend {  
margin-left: 1em;  
color: #000000;  
font-weight: bold;
}
fieldset ol {  
padding: 1em 1em 0 1em;  
list-style: none;
}
fieldset li {  
padding-bottom: 1em;
}
fieldset.submit {  
border-style: none;
}

The margin [75] on the fieldset [76] helps to separate each fieldset [77] group from the others. All internal padding [78] is removed from the fieldset [79] now, because later on it'll cause problems when we begin floating elements and giving them a width [80]. Since padding [81] isn't included in the width [82], it can break the dimensions of your form if you have a width of 100% and some padding [83]. Removing padding [84] also helps to sort out inconsistencies between browsers as to the default internal spacing on the fieldset [85].

To help define a visual hierarchy that clearly shows each label [86] inside the fieldset [87] grouped under the legend [88], we give our legend [89] elements a font-weight [90] of bold. We also have to replace the spacing that was removed from the padding [91] on the fieldset [92], so we give the legend [93] a margin-left [94] of 1em.

In order to turn off the natural numbering that would appear for the ordered list, we set list-style [95] to none on the ol [96], and thus remove any of the bullet formatting that normally exists in such a list. Then, to recreate the internal spacing which we removed from the fieldset [97], we give the ordered list some padding [98]. No padding [99] is put on the bottom of the list, because this will be taken up by the padding [100] of the last list item.

To separate each form element/label pair from each other pair, we give the containing list item a padding-bottom [101] of 1em.

Finally, to remove the appearance of the submit button as a form element group, we need to take the borders off its surrounding fieldset [102]. This step is achieved by targeting it using the fieldset.submit selector and setting the border-style [103] to none.

After applying all of this markup and adding some general page layout styles, we end up with Figure 8 -- a form that's beginning to take shape, but is still a bit messy.

Figure 8: Form with general styling applied, but no layout styles

Now we can go ahead and add in some layout styles!

Using Top-positioned Text Labels

Positioning labels at the top of their form elements is probably the easiest layout to achieve, as we only need to tell the label [104] to take up the entire width of its parent element.

As our form elements/labels are inside ordered list items (which are block elements), each pair will naturally fall onto a new line, as you can see from Figure 9. All we have to do is get the form elements and labels onto different lines.

This exercise is easily completed by turning the label [105] elements into block elements, so that they'll occupy an entire line:

label {  
display: block;
}

It's a simple change, but one which makes the form much neater, as shown in Figure 9.

Figure 9: Example form with text labels positioned at the top of each form element

Left-aligning Text Labels

When we create a column of text labels to the left of the form elements, we'll have to do a little bit more work than just to position them at the top. Once we begin floating elements, all hell breaks loose!

In order to position the labels next to the form elements, we float [106] the label [107] elements to the left and give them an explicit width [108]:

label {  
float: left;  
width: 10em;  
margin-right: 1em;
}

We also apply a little bit of margin-right [109] to each label [110], so that the text of the label [111] can never push right up next to the form element. We must define an explicit width [112] on the floated element so that all the form elements will line up in a neat vertical column. The exact width we apply will depend upon the length of the form labels. If possible, the longest form label should be accommodated without wrapping, but there shouldn't be such a large gap that the smallest label looks like it's unconnected to its form element. In the latter scenario, it is okay to have a label [113] width that is smaller than the longest label [114], because the text will wrap naturally anyway, as you can see in Figure 10.

Figure 10: Text in floated label wraps automatically

Once we float the label [115], however, we run into a problem with its containing list item -- the list item will not expand to match the height of the floated element. This problem is highly visible in Figure 11, where we've applied a background-color [116] to the list item.

Figure 11: li [117] containing floated label [118] does not expand to match label [119] height

One markup-free solution to ensuring a parent contains any of its floated children is to also float the parent, so that's what we'll do:

left-aligned-labels.css (excerpt)
fieldset li {  
float: left;  
clear: left;  
width: 100%;  
padding-bottom: 1em;
}

If the list item is floated, it'll contain all of its floated children, but its width [120] must then be set to 100%, because floated elements try to contract to the smallest width possible. Setting the width [121] of the list item to 100% means that it'll still behave as if it were an unfloated block element. We also throw a clear :left property declaration in there to make sure that we won't find any unwanted floating of list items around form [122] elements. clear: left means that the list item will always appear beneath any prior left-floated elements instead of beside them.

However, once we float the list item, we find the same unwanted behavior on the fieldset [123] -- it won't expand to encompass the floated list items. So, we have to float the fieldset [124]. This is the main reason that we removed the padding [125] from fieldset [126] earlier -- when we set its width [127] to 100%, any padding [128] will throw out our dimensions:

left-aligned-labels.css (excerpt)
fieldset {  
float: left;  
clear: left;  
width: 100%;  
margin: 0 0 1.5em 0;  
padding: 0;
}

Where will this float madness end? Remain calm. It ends right here, with the submit fieldset [129]. Since it's the last fieldset [130] in the form, and because it doesn't need as much special CSS styling as the other fieldset [131]s, we can turn off that floating behavior for good:

left-aligned-labels.css (excerpt)
fieldset.submit {  
float: none;  
width: auto;  
border: 0 none #FFF;  
padding-left: 12em;
}

By turning off floating and setting the width [132] back to auto, the final submit fieldset [133] becomes a normal block element that clears all the other floats. This means the form will grow to encompass all the fieldset [134] elements, and we're back in the normal flow of the document.

None of the elements in the submit fieldset [135] are floated, but we want the button to line up with all of the other form elements. To achieve this outcome, we apply padding [136] to the fieldset [137] itself, and this action pushes the submit button across to line up with all the text fields. It's best to have the button line up with the form elements, because it forms a direct linear path that the user's eye can follow when he or she is completing the form.

After all that floating, we now have Figure 5.12 -- a form with a column for the form labels and a column for the form elements.

Figure 12: Example form with label elements organized in left-aligned column

Right-aligning Text Labels

With all that difficult floating safely out of the way, aligning the input [138] labels to the right is a breeze; simply set the text alignment on the label [139] elements to achieve a form that looks like Figure 5.13:

right-aligned-labels.css (excerpt)
label {  
float: left;  
width: 10em;  
margin-right: 1em;  
text-align: right;
}

Figure 13: Example form with label [140] elements organized in right-aligned column

And we're done! Now you can take your pick of whichever form layout best fits your pages, all by changing a little CSS!

Applying fieldset [141] and legend [142] Styles

It's actually fairly rare to see a fieldset [143] displayed in the default browser style. For some reason people just don't like the look of them, and I must admit those borders and legend [144] elements don't fit into a lot of page designs. legend [145] elements are one of the trickiest HTML elements to style, but you can use a number of tricks to tame them, and there are some great ways to differentiate fieldset [146] elements using CSS.

Providing a background color for your fieldset [147] elements helps to differentiate form [148] content from normal content and focuses the user's attention on the form [149] fields themselves. However, it's not as simple as just specifying a background-color [150].

Resolving Internet Explorer's Legends Issues

In a totally unexpected turn of events (yeah, right!) Internet Explorer handles legends differently from other browsers. From experimentation, it seems that Internet Explorer treats legend [151] elements as if they're inside the fieldset [152], while other browsers treat them as if they're outside the fieldset [153]. I'm not saying that any browser's wrong, but we have to circumvent these differences somehow, and creating a separate IE style sheet seems to be the best solution.

If you put a background-color [154] on a fieldset [155] with a legend [156], as in Figure 14, you can see the problem all too clearly.

Figure 14: Browser rendering of fieldset [157] elements with background color (See larger image in new window [158].)

The fieldset [159] on the left shows how most browsers render a legend [160] and fieldset [161] with a background color. The fieldset [162] on the right shows how Internet Explorer renders it -- the background-color [163] of the fieldset [164] appears to extend beyond its border, stretching to fit the height of the legend [165].

The way to avoid this problem is to accomodate Internet Explorer browsers with a separate style sheet that uses conditional comments:

<!--[if lte IE 7]>  
<style type="text/css" media="all">  
@import "css/fieldset-styling-ie.css";  
</style>
<![endif]-->

This statement includes a style sheet for Internet Explorer 7 and earlier, as these are the versions that currently display this deviant behavior. Any other browsers will ignore it. We could use a style sheet that applies to any version of Internet Explorer -- including those released in the future -- but the legend [166] display difference may be corrected by then, so it's safest just to apply it to the versions we know for the present.

Inside that style sheet we use relative positioning on the legend [167] to move it up to align with the top of the fieldset [168]:

legend {  
position: relative;  
left: -7px;  
top: -0.75em;
}
fieldset ol {  
padding-top: 0.25em;
}

In this case, the value we've given the legend [169]'s top -- 0.75em -- just happens to be the right value to get the legend [170] to align with the fieldset [171]. It may vary depending on other styles we might apply to the legend [172] (such as margin [173] and padding [174]). This is quite a robust solution -- we've used relative units, so if users change the text size in their browsers, the position of the legend [175] will shift accordingly and still line up.

In addition to moving the top of the legend [176], we move it 7px to the left by applying a left [177] value of -7px. This step counters an Internet Explorer quirk -- IE always shifts legends to the right by 7px (regardless of text size), so we need to negate that shift to get the legend [178] and the label [179] elements lining up neatly.

Because we're moving the legend up relatively, it will create more space below the legend [180]. To counteract this space, we reduce the padding at the top of the ordered list by an equivalent amount, changing it from the original value of 1em to 0.25em.

The last Internet Explorer fix is to relatively position the fieldset [181] itself:

fieldset {  
position: relative;
}

Without this rule, Internet Explorer produces some weird visual effects around the legend [182]. How weird? You can see exactly how weird in Figure 5.15.

Figure 15: Visual aberrations in Internet Explorer (See larger image in new window [183].)

We really need to avoid the IE aberrations we've seen, but we're almost there -- now we'll just set the position [184] of the fieldset [185] to relative to restore everything to normal.

Styling Legends and Fieldsets

In all browsers, legend [186]s will have some padding [187] by default. The amount of padding [188] varies between browsers, so to have the legend [189] lining up nicely with our label [190]s we'll eliminate the padding [191] in our main style sheet:

fieldset-background-color.css (excerpt)
legend {  
margin-left: 1em;  
padding: 0;  
color: #000;  
font-weight: bold;
}

The default border [192] for fieldset [193] elements is normally an inset border -- which doesn't match some sites -- so here we're going to make it a flat, 1px border. In addition, we'll add in a background color that will make the fieldset [194] elements stand out from the normal page background, marking them as special areas:

fieldset-background-color.css (excerpt)
fieldset {  
float: left;  
clear: both;  
width: 100%;  
margin: 0 0 1.5em 0;  
padding: 0;  
border: 1px solid #BFBAB0;  
background-color: #F2EFE9;
}

Generally speaking, we don't want any borders or background color behind the submit fieldset [195], so it's quite easy to turn those off:

fieldset-background-color.css (excerpt)
fieldset.submit {  
float: none;  
width: auto;  
border-style: none;  
padding-left: 12em;  
background-color: transparent;
}

Now we've got fieldset [196] elements with a background color and a legend [197] that lines up neatly with all the other form elements, as in Figure 16.

Figure 16: fieldset [198] elements with background-color [199] set and adjustments made to legend [200]

The cut-off of color behind the legend [201] can sometimes look a bit abrupt, as you can see in the magnified view of the legend [202] shown in Figure 17.

Figure 17: Magnification of legend [203] -- cut-off of background color is apparent

This cut-off will become more pronounced if we use a fieldset [204] background color that has more contrast with the normal page background color. If you want to counteract this effect, it's possible to put a gradient background image into the fieldset [205] that smoothly changes the color from the page background color (white) to your chosen fieldset [206] background color:

fieldset-background-image.css (excerpt)
fieldset {  
float: left;  
clear: both;  
width: 100%;  
margin: 0 0 1.5em 0;  
padding: 0;  
border: 1px solid #BFBAB0;  
background-color: #F2EFE9;  
background-image: url(images/fieldset_gradient.jpg);  
background-repeat: repeat-x;
}

That background-image [207] rule will also be applied to our submit fieldset [208], so to keep a clean, transparent background, we'll also have to cancel the fieldset [209]:

fieldset-background-image.css (excerpt)
fieldset.submit {  
float: none;  
width: auto;  
border-style: none;  
padding-left: 12em;  
background-color: transparent;  
background-image: none;
}

See Figure 18 -- the form looks a lot smoother, no?

Figure 18: fieldset [210] elements with background color and gradient images applied

Changing the Default Fieldset Layout

Although fieldset [211] and legend [212] elements are the most accessible means of marking up form groups, in the past a lot of people haven't used them because they don't like the default styling that browsers impose on these elements -- the border around the fieldset [213], the legend [214] intersecting the edge of the box. But it is possible to change this default layout and make your forms a little less boxy.

Our first step is to push the fieldset [215] elements together, eliminating the whitespace between them. To do this, we could make the margin [216] on the bottom of the fieldset [217] elements zero, but that actually ends up looking like Figure 19.

Figure 19: legend [218] adding extra height so fieldset [219] elements cannot touch

The legend [220] at the top of the fieldset [221] elements prevents the two fieldset [222] elements from joining.To circumvent this problem we can use some negative margin [223] on the bottom of each fieldset. This will "pull" up the lower fieldset [224] so that it overlaps the upper fieldset [225], making it look like they're touching.

To prevent the bottom fieldset [226] from overlapping any form elements, we should also add a bit of padding to the bottom of the fieldset [227] elements so that they've got some space to move into:

fieldset {  
float: left;  
clear: both;  
width: 100%;  
margin: 0 0 -1em 0;  
padding: 0 0 1em 0;  
border: 1px solid #BFBAB0;  
background-color: #F2EFE9;
}

Moving the fieldsets up by 1em is enough to cover the gap between them, and the bottom-padding [228] of 1em counteracts the movement, making sure no form [229] elements disappear beneath fieldset [230] elements.

A couple of visual tweaks are necessary when removing the whitespace. Without contact between the fieldset [231] background color and the normal page background color, we no longer need the gradient background image, so this has been left out.

The border-style [232] has also been changed -- we're removing all borders, then replacing only the top border:

fieldset {  
float: left;  
clear: both;  
width: 100%;  
margin: 0 0 -1em 0;  
padding: 0 0 1em 0;  
border-style: none;  
border-top: 1px solid #BFBAB0;  
background-color: #F2EFE9;
}

With all the fieldset [233] elements being joined together, the extra borders on the left and right make the form look cluttered. With just a top border, we've created a much cleaner look, as shown in Figure 20.

Figure 20: Joined fieldset [234] elements

The other side effect of joining the fieldset [235] elements together is that the legend [236] now looks out of place, balancing in between either fieldset [237]. The way to solve this problem is to bring the legend [238] fully within the boundaries of its fieldset [239].

Instinctively, you might use relative or absolute positioning on the legend [240] to move it down into the fieldset [241]. However, Firefox resists any attempt to reposition the legend [242] -- it just doesn't move.

Unfortunately, the only way around this issue is to add a tiny bit more markup to our form. By inserting a superfluous span [243] into each of our legend [244] elements, Firefox allows us to style this and move the text down into the fieldset [245]:

fieldset-alternating.html (excerpt)
<legend>  
<span>Contact Details</span>
</legend>

That span [246] can be positioned absolutely and moved down into the fieldset [247] using margin-top [248]. While we're at it, let's also increase the font-size [249] of the legend [250] text, to give it a bit more prominence:

fieldset-alternating.css (excerpt)
legend span {  
position: absolute;  
margin-top: 0.5em;  
font-size: 135%;
}

There's actually an esoteric bug in some point releases of Firefox (Firefox 1.5.0.6 on Windows XP, but not OSX, from what I've seen) that makes the absolutely positioned span [251] elements behave as if they were all positioned at the top of the form element. Giving the legend [252] elements a position of relative doesn't seem to affect the span [253] elements, so we actually need to relatively position each of the fieldset [254] elements and give the span [255] elements some explicit coordinates to sidestep this bug:

fieldset-alternating.css (excerpt)
fieldset {  
position: relative;  
float: left;  
clear: both;  
width: 100%;  
margin: 0 0 -1em 0;  
padding: 0 0 1em 0;  
border-style: none;  
border-top: 1px solid #BFBAB0;  
background-color: #F2EFE9;
}
legend span {  
position: absolute;  
left: 0.74em;  
top: 0;  
margin-top: 0.5em;  
font-size: 135%;
}

The 0.74em value of left [256] actually matches the 1em padding [257] we gave to the ordered list, due to the fact that the span [258] has a larger font-size [259].

Because we're now specifying a left [260] ordinate for the span [261], we also have to take the margin-left [262] off its parent legend [263], so that we don't get a doubling of the spacing. Simply omit the margin [264] rule that we used previously:

fieldset-alternating.css (excerpt)
legend {  
padding: 0;  
color: #545351;  
font-weight: bold;
}

That bug's now squashed!

As we're moving the legend [265] down into the fieldset [266], we need to make sure that the legend [267] won't overlap any of the form elements, so let's add a bit more padding [268] to the top of our ordered list:

fieldset-alternating.css (excerpt)
fieldset ol {  
padding: 3.5em 1em 0 1em;  
list-style: none;
}

Don't forget to change the matching value inside our Internet Explorer-only style sheet:

fieldset-alternating-ie.css (excerpt)
legend span {  
margin-top: 1.25em;
}
fieldset ol {  
padding-top: 3.25em;
}

Internet Explorer has slightly different spacing on the legend [269] element's span [270], so let's tweak the margin-top value for that as well.

After all these changes, there's one fieldset [271] that looks a little out-of-place: the submit fieldset [272]. Because the submit fieldset [273] doesn't have a legend [274], the submit button will be moved up too high, so we need to push it down a bit. This is done most easily by adding some padding [275] to the top of this fieldset [276] only. Also, because the submit fieldset [277] will overlap the fieldset [278] above it, we need to provide a solid background-color [279] for the submit fieldset [280], otherwise the previous fieldset [281]'s background-color [282] will shrow through. This means changing the background-color [283] value from transparent to whatever your normal page background-color [284] is:

fieldset-alternating.css (excerpt)
fieldset.submit {  
float: none;  
width: auto;  
padding-top: 1.5em;  
padding-left: 12em;  
background-color: #FFFFFF;
}

Previously, we also removed borders from the submit fieldset [285], but for this adjoining layout we need the submit fieldset [286] to retain the top border that's applied to all fieldset [287] elements. We'll just let that rule cascade into the submit fieldset [288] without interference.

Once we've implemented all those changes, the layout of the form is complete. The form appears as shown in Figure 21, but it requires some slight aesthetic tweaks.

Figure 21: All fieldset elements joined and legend elements moved inside boxes

Because we've pushed all the fieldset [289] elements together, they tend to run into one another visually. Better distinction can be created between each fieldset [290] by subtle alternation of the background-color [291] elements in odd and even fieldset [292] elements. The only cross-browser method for achieving this is to add in a new class for every second fieldset [293]. This allows us to use a CSS selector to give those fieldset [294] elements a different background-color [295]. I normally use a class of alt, but you can use whatever you think is logical:

<fieldset>
...
</fieldset>
<fieldset class="alt">
...
</fieldset>
<fieldset>
...
</fieldset>
<fieldset class="alt">
...
</fieldset>
...

Then all you have to do is think of a different background-color [296]:

fieldset-alternating.css (excerpt)
fieldset.alt {  
background-color: #E6E3DD;
}

And our final form [297] with alternating fieldset [298] elements looks like Figure 22!

Grouping Radio Buttons and Checkboxes

There are two types of form elements that are likely to be part of their own subgroup. These are checkboxes and radio buttons, both of which can be used to offer users multiple choices when responding to a given question on a form.

Figure 22: Alternating-color fieldset [299] elements

The way in which these form elements are laid out is slightly different to text fields, select [300] boxes or textarea [301]s. As they are part of their own subgroup, they should be included in a nested fieldset [302] inside the main fieldset [303]. Using our fieldset [304]:

element-subgroups.html (excerpt)
<fieldset>  
<legend>Contact Details</legend>  
<ol>  
<li>  
<fieldset>  
<legend>Occupation:</legend>  
<ol>  
<li>  
<input id="occupation1" name="occupation1"  
class="checkbox" type="checkbox" value="1" />  
<label for="occupation1">Doctor</label>  
</li>  
<li>  
<input id="occupation2" name="occupation2"  
class="checkbox" type="checkbox" value="1" />  
<label for="occupation2">Lawyer</label>  
</li>  
<li>  
<input id="occupation3" name="occupation3"element  
class="checkbox" type="checkbox" value="1" />  
<label for="occupation3">Teacher</label>  
</li>  
<li>  
<input id="occupation4" name="occupation4"  
class="checkbox" type="checkbox" value="1" />  
<label for="occupation4">Web designer</label>  
</li>  
</ol>  
</fieldset>  
</li>  
</ol>
</fieldset>

The label [305] for the subgroup actually becomes the legend [306] for the nested fieldset [307], then each of the checkboxes or radio buttons inside the fieldset [308] receives its own label [309]. The ordered list structure that was put in place at the top level is replicated on this sub-level as well, more for consistency than necessity although it can be very handy if you want to style some of the sub-items.

The nested elements will inherit the styles that we put in place for top-level items, so we'll have to set some rules specifically for nested elements before they'll display correctly:

element-subgroups.css (excerpt)
fieldset fieldset {  
margin-bottom: -2.5em;  
border-style: none;  
background-color: transparent;  
background-image: none;
}
fieldset fieldset legend {  
margin-left: 0;  
font-weight: normal;
}
fieldset fieldset ol {  
position: relative;  
top: -1.5em;  
margin: 0 0 0 11em;  
padding: 0;
}
fieldset fieldset label {  
float: none;  
width: auto;  
margin-right: auto;
}

Firstly, all the decoration on the nested fieldset [310] is removed: background-color [311], background-image [312], and border [313] properties. Instead, it's given a negative margin-bottom [314] for the purposes of some trickery we'll see in a moment.

We want to make the legend [315] look exactly like a normal label [316], so we remove the left margin and also take off its bold font-weight [317]. It's important to be careful with the length of text inside the legend [318], as most browsers won't wrap the text in a legend [319]. As a result, any width [320] you've set for the legend/text will be ignored, as the text will just continue on in one line, possibly running over the rest of the form [321]. We can overcome this limitation by exercising a maximum character width for the legend [322] text and sizing the form [323] columns in em [324] units, so that with text-resizing the layout will scale accordingly.

Limitations of legend Along with the inability of legend [325] elements to wrap text, they are also resistant to width [326] settings and text alignment. This use of legend [327] elements for grouping within fieldset [328] elements is only possible for left-aligned label [329] elements, not right-aligned label [330] elements.

We use the ordered list to position the nested form elements and label [331] elements. Its left margin [332] pushes the entire container away from the left edge, equivalent to the amount of margin [333] given to form elements at the top level. Then, to bring the top of the form elements in line with the top of their respective legend [334], we need to position the ordered list relatively and move it up by -1.5em. This will leave a large space at the bottom of the list (where the list would have been if it wasn't moved relatively), and this is where the fieldset [335]'s negative margin [336] comes into play. The negative margin [337] pulls up the content after the fieldset [338] by the same amount we moved the ordered list, making it look like there is no empty gap. The padding [339] that's put on ordered lists at the top level isn't needed here, so we just set this property to 0.

The last thing we need to do is to revert our label [340] elements to their native state. This means we stop them from floating and set their width [341] to auto. Because they're inline elements, they'll now sit nicely next to the actual form elements -- checkboxes or radio buttons.

There's an additional change to make to the Internet Explorer-specific style sheet: to turn off the negative relative position on nested legend [342]s. We don't have to deal with background colors on the nested fieldset [343] elements, so the negative relative position isn't needed here:

element-subgroups-ie.css (excerpt)
fieldset fieldset legend {  
top: 0;
}

Once those new styles have been created, we end up with the form that appears in Figure 23 -- a nested fieldset [344] that lines up perfectly with all the other form elements and gives the user a nice straightforward choice of options.

Figure 23: Nested subgroups of checkboxes and radio buttons

Required Fields and Error Messages

There are often little extra bits of information that you want to convey on a form, and they should be equally as accessible as the text label [345] elements for the form element. In fact, to ensure that they're accessible, they should be included in the label [346] itself. There are two types that we'll look at here: required fields and error messages.

Indicating Required Fields

The easiest and most accessible way of indicating the required fields on a form is to write "required" after the form label [347]. This addition is not only read out by screenreaders, but it also means that an extra symbol key doesn't need to be provided for visual users, as is the case should you choose to mark required fields with an asterisk or other symbol.

To emphasize the importance of the information, we can add the text "required" inside an em [348] element, which also gives us a stylable element to differentiate the "required" text from the label [349] text:

required-fields.html (excerpt)
<label for="name">  
Name: <em>required</em>
</label>

To give the em [350] its own little place on the form [351], we can set it to display: block, and change the appearance of the text:

required-fields.css (excerpt)
label em {  
display: block;  
color: #060;  
font-size: 85%;  
font-style: normal;  
text-transform: uppercase;
}

Our "required" markers now look like Figure 24.

Figure 24: Form fields marked with textual "required" markers (See larger image in new window [352].)

However, the asterisk, or star, has now become a common tool for marking required fields, possibly due to its brevity. But it doesn't have much meaning outside the visual context -- most screenreaders will read an asterisk character as "star." So you end up with a label [353] being "Email address star" -- a little confusing for the user.

For accessibility purposes, instead of including an actual asterisk character next to the form label [354], it's actually better to include an inline image of the asterisk, with alt [355] text saying "required." This means that screenreader users will hear the word "required" instead of just "star," which is a lot more helpful. If you are using an image, you should include a key at the top of the form [356] to let visual users know exactly what it means.

We still want to emphasize the fact that the label [357] is required, so we just replace the text "required" inside the em [358] element with the image of an asterisk:

required-fields-star1.html (excerpt)
<label for="name">  
Name: <em><img src="images/required_star.gif"  
alt="required" /></em>
</label>

This replacement doesn't actually need any styling; we can leave the em [359] as an inline element and the asterisk will appear directly next to the form label [360]:

Figure 25: Inline asterisk marking required fields (See larger image in new window [361].)

Or, we can use some CSS to position the image absolutely and have it more closely associated with the form element itself:

required-fields-star2.css (excerpt)
label {  
position: relative;  
float: left;  
width: 10em;  
margin-right: 1em;
}
label em {  
position: absolute;  
left: 10em;  
top: 0;
}

When positioning the em [362] absolutely, it's important to position its parent (the label [363]) relatively, so that when we specify some coordinates for the em [364], they will be relative to the label [365]'s top-left corner. The star image should be positioned in the gap between the label [366] and the form element (created by the label [367]'s right margin [368]), so the value for the em [369]'s left [370] will depend upon what we've set there. Setting the top value for the em [371] is just a precaution in case the image has wrapped onto a new line.

By taking this course of action, we'll end up with a much more orderly series of "required" markers, as shown in Figure 26.

Figure 26: Required fields marked with absolutely positioned image of a star, aligned against form elements (See larger image in new window [372].)

Handling Error Messages

Error messages are handled in almost the same way as required markers. In order to be read out as a screenreader user places focus on the appropriate form element, they should form part of the label [373]:

error-fields1.html (excerpt)
<label for="name">  
Email: <strong>This must be a valid email address</strong>
</label>

The semantic strong element is used to enclose the error message, distinguishing it from a required marker and giving it a stronger emphasis.

The styling is almost the same as it was for the textual "required" marker, except you might want to change the color. A good strong red is suitably alarming:

error-fields1.css (excerpt)
label strong {  
display: block;  
color: #C00;  
font-size: 85%;  
font-weight: normal;  
text-transform: uppercase;
}

This styling produces a layout such as that shown in Figure 27.

Figure 27: Error messages included as part of label [374] element, displayed underneath the label [375] text (See larger image in new window [376].)

An alternative placement of the error message does exist, but it depends upon a couple of prerequisites. The error message can be placed to the right of the form element as long as:

• The maximum width of any of the form [377] elements is known.
• The error message is unlikely to wrap.

This placement involves the error message being positioned absolutely, so we mustknow in advance how far to move the error. Absolute elements are outside the flow of the document, so the other content will not adjust to accommodate the error message if itstarts wrapping. If the design can be reconciled with these two problems, then the CSS for the job is:

error-fields2.css (excerpt)
label {  
position: relative;  
float: left;  
width: 10em;  
margin-right: 1em;
}
label strong {
position: absolute;
left: 27em;
top: 0.2em;
width: 19em;
color: #C00;
font-size: 85%;
font-weight: normal
;text-transform: uppercase;
}

Again, because the strong element is being positioned absolutely, its parent label [378] must be positioned relatively to allow us to move the error message relative to the label [379] itself.

The width [380] of the error message is dictated by the space following the form element. The left [381] is calculated by adding together the width [382] of the form element, plus the width [383] of the label [384], plus any extra space we need in order to align the error message properly.

Figure 28 shows how it ends up when viewed in the browser.

Figure 28: Error messages as part of the label [385] element, displayed using absolute positioning (See larger image in new window [386].)

Inaccessible Error Text Solutions It is possible to position the error text to the right of the text fields by changing the source order of the HTML But this either:

• places the error text outside the label [387]
• involves nesting the form [388] element inside the label [389] and placing the error text after the form element

Both of these solutions are inaccessible because screenreaders will most likely fail to read out the error message when the form [390] element is focused.

In conjunction with right-positioning the error messages, we can also include error icons, to further highlight the problem areas on the form. The error icon is included in the HTML with an appropriate alt attribute:

error-fields3.html (excerpt)
<fieldset>  
<legend>Contact Details</legend>  
<ol>  
<li>  
<label for="name">  
Email: <strong><img src="images/error_cross.gif"  
alt="Error" /> This must be a valid email address  
</strong>  
</label>  
<input id="name" name="name" class="text" type="text" />  
</li>

We can now move it to the left of the form elements using absolute positioning. Because its parent (the strong element) is already absolutely positioned, any movement we make will be relative to that parent, so, effectively, we have to move it in a negative direction in order to shift it back over to the left:

error-fields3.css (excerpt)
label strong img {  
position: absolute;  
left: -16em;
}

This adjustment equates to the width of the form element, plus a little bit extra for spacing, so we'll get a nicely positioned icon, such as you can see in Figure 29.

Figure 29: Error messages displaying to right of form [391] elements, in combination with error icon on left (See larger image in new window [392].)

Summary

Now that you've finished this chapter, you have no excuse for producing inaccessible forms that use tables for positioning!

We've worked through the correct and effective labeling, grouping, layout, and styling of form elements, anticipating and solving potential problems of compatibility and accessibility along the way. With the code provided here you've got quite a few different options for how you want your forms laid out, but there's still more you can do by combining and experimenting with different styles, form elements and layouts.

If there's an underlying message of this chapter, it's just to keep in mind that no matter what you do, your forms have to be usable and accessible above everything else. Forms, at the end of the day, are really all about your users being able to provide information and tell you what they want as easily as possible. Of course, there are other aspects of the site where usability comes into play -- you might like to check out the Navigation and Tables chapters [393], also included in The Art and Science of CSS [394], and don't forget to download a PDF of this chapter [395]!

Back to SitePoint.com

[1] http://www.sitepoint.com/blogs/2008/06/23/css-theme-week-more-css-than-you-can-handle
[2] http://www.sitepoint.com/books/cssdesign1/
[3] http://www.sitepoint.com/books/cssdesign1/
[4] http://reference.sitepoint.com/html/label
[5] http://reference.sitepoint.com/html/input
[6] http://reference.sitepoint.com/html/label
[7] http://reference.sitepoint.com/html/label
[8] http://reference.sitepoint.com/html/label/
[9] http://i2.sitepoint.com/graphics/forms_connection.png
[10] http://reference.sitepoint.com/html/label/
[11] http://reference.sitepoint.com/html/label/
[12] http://reference.sitepoint.com/html/label/
[13] http://reference.sitepoint.com/html/label/
[14] http://reference.sitepoint.com/html/label/for
[15] http://reference.sitepoint.com/html/label/
[16] http://reference.sitepoint.com/html/label/for
[17] http://reference.sitepoint.com/html/core-attributes/id
[18] http://reference.sitepoint.com/html/label/
[19] http://reference.sitepoint.com/html/label/
[20] http://reference.sitepoint.com/html/label/
[21] http://reference.sitepoint.com/html/label/
[22] http://reference.sitepoint.com/html/textarea
[23] http://reference.sitepoint.com/html/select
[24] http://reference.sitepoint.com/html/label
[25] http://reference.sitepoint.com/html/input/value
[26] http://reference.sitepoint.com/html/input/alt
[27] http://reference.sitepoint.com/html/label/
[28] http://reference.sitepoint.com/html/label/
[29] http://reference.sitepoint.com/html/span
[30] http://reference.sitepoint.com/html/p
[31] http://reference.sitepoint.com/html/div
[32] http://reference.sitepoint.com/html/label/
[33] http://reference.sitepoint.com/html/legend
[34] http://reference.sitepoint.com/html/fieldset
[35] http://reference.sitepoint.com/html/fieldset
[36] http://reference.sitepoint.com/html/fieldset
[37] http://reference.sitepoint.com/html/fieldset
[38] http://reference.sitepoint.com/html/legend
[39] http://reference.sitepoint.com/html/legend
[40] http://reference.sitepoint.com/html/fieldset
[41] http://reference.sitepoint.com/html/legend
[42] http://reference.sitepoint.com/html/legend
[43] http://reference.sitepoint.com/html/fieldset
[44] http://reference.sitepoint.com/html/fieldset
[45] http://reference.sitepoint.com/html/legend
[46] http://reference.sitepoint.com/html/fieldset
[47] http://reference.sitepoint.com/html/legend
[48] http://i2.sitepoint.com/graphics/forms_unstyled-fields.png
[49] http://reference.sitepoint.com/html/legend
[50] http://reference.sitepoint.com/html/legend
[51] http://reference.sitepoint.com/html/legend
[52] http://reference.sitepoint.com/html/label/
[53] http://reference.sitepoint.com/html/legend
[54] http://reference.sitepoint.com/html/label/
[55] http://www.uxmatters.com/MT/archives/000107.php
[56] http://www.lukew.com/resources/articles/web_forms.html
[57] http://www.themaninblue.com/contact/
[58] https://www.linkedin.com/register
[59] http://reference.sitepoint.com/html/form
[60] http://reference.sitepoint.com/html/fieldset
[61] http://reference.sitepoint.com/html/label/
[62] http://reference.sitepoint.com/html/label/
[63] http://reference.sitepoint.com/html/span
[64] http://reference.sitepoint.com/html/div
[65] http://i2.sitepoint.com/graphics/forms_unstyled-no-lists.png
[66] http://i2.sitepoint.com/graphics/forms_unstyled-lists.png
[67] http://reference.sitepoint.com/html/fieldset
[68] http://reference.sitepoint.com/html/fieldset
[69] http://reference.sitepoint.com/html/fieldset
[70] http://reference.sitepoint.com/html/fieldset
[71] http://reference.sitepoint.com/html/fieldset
[72] http://reference.sitepoint.com/html/fieldset
[73] http://reference.sitepoint.com/html/input
[74] http://reference.sitepoint.com/html/fieldset
[75] http://reference.sitepoint.com/css/margin
[76] http://reference.sitepoint.com/html/fieldset
[77] http://reference.sitepoint.com/html/fieldset
[78] http://reference.sitepoint.com/css/padding
[79] http://reference.sitepoint.com/html/fieldset
[80] http://reference.sitepoint.com/css/width
[81] http://reference.sitepoint.com/css/padding
[82] http://reference.sitepoint.com/css/width
[83] http://reference.sitepoint.com/css/padding
[84] http://reference.sitepoint.com/css/padding
[85] http://reference.sitepoint.com/html/fieldset
[86] http://reference.sitepoint.com/html/label/
[87] http://reference.sitepoint.com/html/fieldset
[88] http://reference.sitepoint.com/html/legend
[89] http://reference.sitepoint.com/html/legend
[90] http://reference.sitepoint.com/css/font-weight
[91] http://reference.sitepoint.com/css/padding
[92] http://reference.sitepoint.com/html/fieldset
[93] http://reference.sitepoint.com/html/legend
[94] http://reference.sitepoint.com/css/margin-left
[95] http://reference.sitepoint.com/css/list-style
[96] http://reference.sitepoint.com/html/ol
[97] http://reference.sitepoint.com/html/fieldset
[98] http://reference.sitepoint.com/css/padding
[99] http://reference.sitepoint.com/css/padding
[100] http://reference.sitepoint.com/css/padding
[101] http://reference.sitepoint.com/css/padding-bottom
[102] http://reference.sitepoint.com/html/fieldset
[103] http://reference.sitepoint.com/css/border-style
[104] http://reference.sitepoint.com/html/label/
[105] http://reference.sitepoint.com/html/label/
[106] http://reference.sitepoint.com/css/float
[107] http://reference.sitepoint.com/html/label/
[108] http://reference.sitepoint.com/css/width
[109] http://reference.sitepoint.com/css/margin-right
[110] http://reference.sitepoint.com/html/label/
[111] http://reference.sitepoint.com/html/label/
[112] http://reference.sitepoint.com/css/width
[113] http://reference.sitepoint.com/html/label
[114] http://reference.sitepoint.com/html/label/
[115] http://reference.sitepoint.com/html/label/
[116] http://reference.sitepoint.com/css/background-color/
[117] http://reference.sitepoint.com/html/li
[118] http://reference.sitepoint.com/html/label/
[119] http://reference.sitepoint.com/html/label/
[120] http://reference.sitepoint.com/css/width
[121] http://reference.sitepoint.com/css/width
[122] http://reference.sitepoint.com/html/form
[123] http://reference.sitepoint.com/html/fieldset
[124] http://reference.sitepoint.com/html/fieldset
[125] http://reference.sitepoint.com/css/padding
[126] http://reference.sitepoint.com/html/fieldset
[127] http://reference.sitepoint.com/css/width
[128] http://reference.sitepoint.com/css/padding
[129] http://reference.sitepoint.com/html/fieldset
[130] http://reference.sitepoint.com/html/fieldset
[131] http://reference.sitepoint.com/html/fieldset
[132] http://reference.sitepoint.com/css/width
[133] http://reference.sitepoint.com/html/fieldset
[134] http://reference.sitepoint.com/html/fieldset
[135] http://reference.sitepoint.com/html/fieldset
[136] http://reference.sitepoint.com/css/padding
[137] http://reference.sitepoint.com/html/fieldset
[138] http://reference.sitepoint.com/html/input
[139] http://reference.sitepoint.com/html/label/
[140] http://reference.sitepoint.com/html/label/
[141] http://reference.sitepoint.com/html/fieldset
[142] http://reference.sitepoint.com/html/legend
[143] http://reference.sitepoint.com/html/fieldset
[144] http://reference.sitepoint.com/html/legend
[145] http://reference.sitepoint.com/html/legend
[146] http://reference.sitepoint.com/html/fieldset
[147] http://reference.sitepoint.com/html/fieldset
[148] http://reference.sitepoint.com/html/form
[149] http://reference.sitepoint.com/html/form
[150] http://reference.sitepoint.com/css/background-color
[151] http://reference.sitepoint.com/html/legend
[152] http://reference.sitepoint.com/html/fieldset
[153] http://reference.sitepoint.com/html/fieldset
[154] http://reference.sitepoint.com/css/background-color
[155] http://reference.sitepoint.com/html/fieldset
[156] http://reference.sitepoint.com/html/legend
[157] http://reference.sitepoint.com/html/fieldset
[158] http://i2.sitepoint.com/graphics/forms_legend-differences.png
[159] http://reference.sitepoint.com/html/fieldset
[160] http://reference.sitepoint.com/html/legend
[161] http://reference.sitepoint.com/html/fieldset
[162] http://reference.sitepoint.com/html/fieldset
[163] http://reference.sitepoint.com/css/background-color
[164] http://reference.sitepoint.com/html/fieldset
[165] http://reference.sitepoint.com/html/legend
[166] http://reference.sitepoint.com/html/legend
[167] http://reference.sitepoint.com/html/legend
[168] http://reference.sitepoint.com/html/fieldset
[169] http://reference.sitepoint.com/html/legend
[170] http://reference.sitepoint.com/html/legend
[171] http://reference.sitepoint.com/html/fieldset
[172] http://reference.sitepoint.com/html/legend
[173] http://reference.sitepoint.com/css/margin
[174] http://reference.sitepoint.com/css/padding
[175] http://reference.sitepoint.com/html/legend
[176] http://reference.sitepoint.com/html/legend
[177] http://reference.sitepoint/com/css/left
[178] http://reference.sitepoint.com/html/legend
[179] http://reference.sitepoint.com/html/label/
[180] http://reference.sitepoint.com/html/legend
[181] http://reference.sitepoint.com/html/fieldset
[182] http://reference.sitepoint.com/html/legend
[183] http://i2.sitepoint.com/graphics/forms_ie-weird.png
[184] http://reference.sitepoint.com/css/position
[185] http://reference.sitepoint.com/html/fieldset
[186] http://reference.sitepoint.com/html/legend
[187] http://reference.sitepoint.com/css/padding
[188] http://reference.sitepoint.com/css/padding
[189] http://reference.sitepoint.com/html/legend
[190] http://reference.sitepoint.com/html/label
[191] http://reference.sitepoint.com/css/padding
[192] http://reference.sitepoint.com/css/border
[193] http://reference.sitepoint.com/html/fieldset
[194] http://reference.sitepoint.com/html/fieldset
[195] http://reference.sitepoint.com/html/fieldset
[196] http://reference.sitepoint.com/html/fieldset
[197] http://reference.sitepoint.com/html/legend
[198] http://reference.sitepoint.com/html/fieldset
[199] http://reference.sitepoint.com/css/background-color
[200] http://reference.sitepoint.com/html/legend
[201] http://reference.sitepoint.com/html/legend
[202] http://reference.sitepoint.com/html/legend
[203] http://reference.sitepoint.com/html/legend
[204] http://reference.sitepoint.com/html/fieldset
[205] http://reference.sitepoint.com/html/fieldset
[206] http://reference.sitepoint.com/html/fieldset
[207] http://reference.sitepoint.com/css/background-image
[208] http://reference.sitepoint.com/html/fieldset
[209] http://reference.sitepoint.com/css/ on the submit /#l#/http://reference.sitepoint.com/html/fieldset
[210] http://reference.sitepoint.com/html/fieldset
[211] http://reference.sitepoint.com/html/fieldset
[212] http://reference.sitepoint.com/html/legend
[213] http://reference.sitepoint.com/html/fieldset
[214] http://reference.sitepoint.com/html/legend
[215] http://reference.sitepoint.com/html/fieldset
[216] http://reference.sitepoint.com/css/margin
[217] http://reference.sitepoint.com/html/fieldset
[218] http://reference.sitepoint.com/html/legend
[219] http://reference.sitepoint.com/html/fieldset
[220] http://reference.sitepoint.com/html/legend
[221] http://reference.sitepoint.com/html/fieldset
[222] http://reference.sitepoint.com/html/fieldset
[223] http://reference.sitepoint.com/css/margin
[224] http://reference.sitepoint.com/html/fieldset
[225] http://reference.sitepoint.com/html/fieldset
[226] http://reference.sitepoint.com/html/fieldset
[227] http://reference.sitepoint.com/html/fieldset
[228] http://reference.sitepoint.com/css/bottom-padding
[229] http://reference.sitepoint.com/html/form
[230] http://reference.sitepoint.com/html/fieldset
[231] http://reference.sitepoint.com/html/fieldset
[232] http://reference.sitepoint.com/css/border-style
[233] http://reference.sitepoint.com/html/fieldset
[234] http://reference.sitepoint.com/html/fieldset
[235] http://reference.sitepoint.com/html/fieldset
[236] http://reference.sitepoint.com/html/legend
[237] http://reference.sitepoint.com/html/fieldset
[238] http://reference.sitepoint.com/html/legend
[239] http://reference.sitepoint.com/html/fieldset
[240] http://reference.sitepoint.com/html/legend
[241] http://reference.sitepoint.com/html/fieldset
[242] http://reference.sitepoint.com/html/legend
[243] http://reference.sitepoint.com/html/span
[244] http://reference.sitepoint.com/html/legend
[245] http://reference.sitepoint.com/html/fieldset
[246] http://reference.sitepoint.com/html/span
[247] http://reference.sitepoint.com/html/fieldset
[248] http://reference.sitepoint.com/css/margin-top
[249] http://reference.sitepoint.com/css/font-size
[250] http://reference.sitepoint.com/html/legend
[251] http://reference.sitepoint.com/html/span
[252] http://reference.sitepoint.com/html/legend
[253] http://reference.sitepoint.com/html/span
[254] http://reference.sitepoint.com/html/fieldset
[255] http://reference.sitepoint.com/html/span
[256] http://reference.sitepoint/com/css/left
[257] http://reference.sitepoint.com/css/padding
[258] http://reference.sitepoint.com/html/span
[259] http://reference.sitepoint.com/css/font-size
[260] http://reference.sitepoint/com/css/left
[261] http://reference.sitepoint.com/html/span
[262] http://reference.sitepoint.com/css/margin-left
[263] http://reference.sitepoint.com/html/legend
[264] http://reference.sitepoint.com/css/margin
[265] http://reference.sitepoint.com/html/legend
[266] http://reference.sitepoint.com/html/fieldset
[267] http://reference.sitepoint.com/html/legend
[268] http://reference.sitepoint.com/css/padding
[269] http://reference.sitepoint.com/html/legend
[270] http://reference.sitepoint.com/html/span
[271] http://reference.sitepoint.com/html/fieldset
[272] http://reference.sitepoint.com/html/fieldset
[273] http://reference.sitepoint.com/html/fieldset
[274] http://reference.sitepoint.com/html/legend
[275] http://reference.sitepoint.com/css/padding
[276] http://reference.sitepoint.com/html/fieldset
[277] http://reference.sitepoint.com/html/fieldset
[278] http://reference.sitepoint.com/html/fieldset
[279] http://reference.sitepoint.com/css/background-color
[280] http://reference.sitepoint.com/html/fieldset
[281] http://reference.sitepoint.com/html/fieldset
[282] http://reference.sitepoint.com/css/background-color
[283] http://reference.sitepoint.com/css/background-color
[284] http://reference.sitepoint.com/css/background-color
[285] http://reference.sitepoint.com/html/fieldset
[286] http://reference.sitepoint.com/html/fieldset
[287] http://reference.sitepoint.com/html/fieldset
[288] http://reference.sitepoint.com/html/fieldset
[289] http://reference.sitepoint.com/html/fieldset
[290] http://reference.sitepoint.com/html/fieldset
[291] http://reference.sitepoint.com/css/background-color
[292] http://reference.sitepoint.com/html/fieldset
[293] http://reference.sitepoint.com/html/fieldset
[294] http://reference.sitepoint.com/html/fieldset
[295] http://reference.sitepoint.com/css/background-color
[296] http://reference.sitepoint.com/css/background-color
[297] http://reference.sitepoint.com/html/form
[298] http://reference.sitepoint.com/html/fieldset
[299] http://reference.sitepoint.com/html/fieldset
[300] http://reference.sitepoint.com/html/select
[301] http://reference.sitepoint.com/html/textarea
[302] http://reference.sitepoint.com/html/fieldset
[303] http://reference.sitepoint.com/html/fieldset
[304] http://reference.sitepoint.com/css/ form as a starting point, we can add some grouped elements inside the /#l#/http://reference.sitepoint.com/html/fieldset
[305] http://reference.sitepoint.com/html/label/
[306] http://reference.sitepoint.com/html/legend
[307] http://reference.sitepoint.com/html/fieldset
[308] http://reference.sitepoint.com/html/fieldset
[309] http://reference.sitepoint.com/html/label/
[310] http://reference.sitepoint.com/html/fieldset
[311] http://reference.sitepoint.com/css/background-color
[312] http://reference.sitepoint.com/css/background-image
[313] http://reference.sitepoint.com/css/border
[314] http://reference.sitepoint.com/css/margin-bottom
[315] http://reference.sitepoint.com/html/legend
[316] http://reference.sitepoint.com/html/label/
[317] http://reference.sitepoint.com/css/font-weight
[318] http://reference.sitepoint.com/html/legend
[319] http://reference.sitepoint.com/html/legend
[320] http://reference.sitepoint.com/css/width
[321] http://reference.sitepoint.com/html/form
[322] http://reference.sitepoint.com/html/legend
[323] http://reference.sitepoint.com/html/form
[324] http://reference.sitepoint.com/html/em
[325] http://reference.sitepoint.com/html/legend
[326] http://reference.sitepoint.com/css/width
[327] http://reference.sitepoint.com/html/legend
[328] http://reference.sitepoint.com/html/fieldset
[329] http://reference.sitepoint.com/html/label/
[330] http://reference.sitepoint.com/html/label/
[331] http://reference.sitepoint.com/html/label/
[332] http://reference.sitepoint.com/css/margin
[333] http://reference.sitepoint.com/css/margin
[334] http://reference.sitepoint.com/html/legend
[335] http://reference.sitepoint.com/html/fieldset
[336] http://reference.sitepoint.com/css/margin
[337] http://reference.sitepoint.com/css/margin
[338] http://reference.sitepoint.com/html/fieldset
[339] http://reference.sitepoint.com/css/padding
[340] http://reference.sitepoint.com/html/label/
[341] http://reference.sitepoint.com/css/width
[342] http://reference.sitepoint.com/html/legend
[343] http://reference.sitepoint.com/html/fieldset
[344] http://reference.sitepoint.com/html/fieldset
[345] http://reference.sitepoint.com/html/label/
[346] http://reference.sitepoint.com/html/label/
[347] http://reference.sitepoint.com/html/label/
[348] http://reference.sitepoint.com/html/em
[349] http://reference.sitepoint.com/html/label/
[350] http://reference.sitepoint.com/html/em
[351] http://reference.sitepoint.com/html/form
[352] http://i2.sitepoint.com/graphics/forms_required.png
[353] http://reference.sitepoint.com/html/label/
[354] http://reference.sitepoint.com/html/label/
[355] http://reference.sitepoint.com/html/img/alt
[356] http://reference.sitepoint.com/html/form
[357] http://reference.sitepoint.com/html/label/
[358] http://reference.sitepoint.com/html/em
[359] http://reference.sitepoint.com/html/em
[360] http://reference.sitepoint.com/html/label/
[361] http://i2.sitepoint.com/graphics/forms_required-stars.png
[362] http://reference.sitepoint.com/html/em
[363] http://reference.sitepoint.com/html/label/
[364] http://reference.sitepoint.com/html/em
[365] http://reference.sitepoint.com/html/label/
[366] http://reference.sitepoint.com/html/label/
[367] http://reference.sitepoint.com/html/label/
[368] http://reference.sitepoint.com/css/margin
[369] http://reference.sitepoint.com/html/em
[370] http://reference.sitepoint/com/css/left
[371] http://reference.sitepoint.com/html/em
[372] http://i2.sitepoint.com/graphics/forms_required-stars-aligned.png
[373] http://reference.sitepoint.com/html/label/
[374] http://reference.sitepoint.com/html/label/
[375] http://reference.sitepoint.com/html/label/
[376] http://i2.sitepoint.com/graphics/forms_required-text.png
[377] http://reference.sitepoint.com/html/form
[378] http://reference.sitepoint.com/html/label/
[379] http://reference.sitepoint.com/html/label/
[380] http://reference.sitepoint.com/css/width
[381] http://reference.sitepoint/com/css/left
[382] http://reference.sitepoint.com/css/width
[383] http://reference.sitepoint.com/css/width
[384] http://reference.sitepoint.com/html/label/
[385] http://reference.sitepoint.com/html/label/
[386] http://i2.sitepoint.com/graphics/forms_required-text-aligned.png
[387] http://reference.sitepoint.com/html/label/
[388] http://reference.sitepoint.com/html/form
[389] http://reference.sitepoint.com/html/label/
[390] http://reference.sitepoint.com/html/form
[391] http://reference.sitepoint.com/html/form
[392] http://i2.sitepoint.com/graphics/forms_required-stars-text.png
[393] http://www.sitepoint.com/books/cssdesign1/toc.php
[394] http://www.sitepoint.com/books/cssdesign1/
[395] http://www.sitepoint.com/books/cssdesign1/