Fancy Form Design Using CSS Article

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 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 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 the label elements to the left and give them an explicit width:

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

We also apply a little bit of margin-right to each label, so that the text of the label can never push right up next to the form element. We must define an explicit width 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 width that is smaller than the longest label, 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, 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 to the list item.

Figure 11: li containing floated label does not expand to match label 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 must then be set to 100%, because floated elements try to contract to the smallest width possible. Setting the width 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 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 — it won’t expand to encompass the floated list items. So, we have to float the fieldset. This is the main reason that we removed the padding from fieldset earlier — when we set its width to 100%, any padding 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. Since it’s the last fieldset in the form, and because it doesn’t need as much special CSS styling as the other fieldsets, 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 back to auto, the final submit fieldset becomes a normal block element that clears all the other floats. This means the form will grow to encompass all the fieldset elements, and we’re back in the normal flow of the document.

None of the elements in the submit fieldset are floated, but we want the button to line up with all of the other form elements. To achieve this outcome, we apply padding to the fieldset 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 labels to the right is a breeze; simply set the text alignment on the label 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 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 and legend Styles

It’s actually fairly rare to see a fieldset 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 elements don’t fit into a lot of page designs. legend 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 elements using CSS.

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