Experimental Form Layout Ideas using CSS

Most of the class selector names refer to how fieldsets are positioned relative to each other
All forms use a single .css file, excepting the experimental fieldsets dealing with backgrounds and borders.
Most forms below, imbed inputs within labels except the submit input type. Accessibility.
Not addressed are comments, instructions, or hints.
Based on the work of The Man in Blue. Here are colected his various form layouts using css instead of tables, with the added fun of access keys, textareas and dynamic borders.
ToDo list: integrate the above mentioned "comments, etc.", missing form elements such as checkboxes and textareas, and add dynamic element borders.
Don't forget htmlentities, if you have to use an action form attribute and you're using php_self with it, as in action="<?php echo htmlentities($_SERVER['PHP_SELF'])?>".

The Unstyled Form

Well, not really. We have set some element type selectors that apply to most form classes

Name Title First name Last name Billing name same?

Address Street City State Postcode User hints or notes Country

Comment Message

Payment details

Credit card American Express Mastercard Visa Blockbuster Card

Card number Expiry date

Vertical Form

There's no real positional styling going on in this form, it's merely padding, margin and width. Inputs are nested in labels. All the text fields have been given a standard width to make them look neat, and the fieldsets have been given the same width + padding. It does look a bit stark on this page, but would be ideal for a left-column login or search box.

Note also, the first label in each fieldset has been given a class of "first". This is because if you place any margin on the legend element, it screws up in Mozilla (pushes the legend out of the top of the fieldset). Padding-top of the fieldset doesn't work in IE. So, I need to add margin or padding top to the first element inside the fieldset, and first-child selectors don't work in IE :o]

And here is some surrounding text ... And here is some surrounding text ... And here is some surrounding text ... And here is some surrounding text ... And here is some surrounding text ...

Name Title First name Last name Billing name same?

Address Street City State Postcode User hints or notes Country

Comment Message

Payment details

Credit card American Express Mastercard Visa Blockbuster Card

Card number Expiry date

And here is some surrounding text ... And here is some surrounding text ... And here is some surrounding text ... And here is some surrounding text ... And here is some surrounding text ...

Columnar Fieldsets Form

This template is just a small evolution from the previous vertical template. Using the same styles for the fieldsets, they are now floated left, so that they appear next to each other, in columns. This condenses the display of the fieldsets, meaning you don't have to scroll, and also offers a nice left to right guide to completion (if you happen to be living in a left-to-right reading society). For some reason it doesn't work correctly in Opera. But, it degrades to the plain old vertical form, so it doesn't hurt that much.

Name Title First name Last name Billing name same?

Address Street City State Postcode User hints or notes Country

Comment Message

Payment details

Credit card American Express Mastercard Visa Blockbuster Card

Card number Expiry date

Horizontal Form

Here I've made each fieldset extend the full width of the page. The main styling that's going on is the positioning of the form elements within the fieldsets. Because each element is contained inside a label tag, you can just float labels left, give them a bit of margin, and they line up horizontally (moving to the next line if there's not enough width).

Because I'm using floats, this form will look funky in some browsers unless you hack around with the code. Below is the form that uses clearing divs to make the fieldsets expand to fit the elements within.

Name Title First name Last name Billing name same?

Address Street City State Postcode User hints or notes Country

Comment Message

Payment details

Credit card American Express Mastercard Visa Blockbuster Card

Card number Expiry date

The Horizontal Form (hacked)

This form contains a clearing div hack to counteract float behaviour in some browsers.

Name Title First name Last name Billing name same?

Address Street City State Postcode User hints or notes Country

Comment Message

Payment details

Credit card American Express Mastercard Visa Blockbuster Card

Card number Expiry date

Margin Form

This form pseudo-replicates the lining-up-to-margins form style that was first posited by Eric Meyer (shown here). However, that version relied on extra mark-up to produce its effect. Here, the same code is used as in the previous templates, but each form input is display as a block-level element, positioned relatively, moved up a bit, and moved right a bit (using the CSS properties top and left). This means they all appear the same distance from the left, lining up neatly. You'll need a bit of negative margin-top on the label elements to fill in the space that's left by the relatively positioned elements.

Because I'm using floats, this form will look funky in some browsers unless you hack around with the code. Here's a page that uses clearing divs to make the fieldsets expand to fit the elements within.

(Edit dwb) For the sake of being able to add helpful notes for the users, labels that were floated are now simply display:block. Nested inputs revert back to inline, and these plus spans (notes) are positioned absolutely to the right.

Name Title a few notes on select First name a few notes on first name Last name a few notes on last name Billing name same?

Address Street City State Postcode User hints or notes Country

Comment Message

Payment details

Credit card American Express Mastercard Visa Blockbuster Card

Card number Expiry date

2 Column Fieldsets

This form is notable different from those above, because it does NOT nest the inputs in the labels. It also uses the <br /> hack to break the float of labels, and the overhead of a dummy label for submit input types. So we still have to compromise a bit, as some of the layout remains embedded in the markup.

Fieldset Styles

The biggest problem presented when styling a fieldset and its associated elements is the legend tag. In IE and Opera, the legend expands the height of the fieldset, and not its border, effectively extending the content area outside the border. If you place a background colour on the fieldset it looks like someone didn't colour within the lines.

Alternatively, if you wish to remove the borders and just have a background colour, Mozilla positions the legend half in and half out of the content area – it now looks like someone couldn't write inside the box. It's easy enough to move the legend inside the box for IE and Opera; just add some padding to the fieldset.

The only way to get cross-browser consistency is to remove the legend tag and replace it with a heading tag (or whatever other semantic element you think fits). It styles great, but you've just thrown accessibility out the window – there's no link between the fieldset's title and the fieldset, blind users won't be able to make the association easily. Your choice.

An IE/Opera Hack for Fieldset Backgrounds

This hack is only useful where fieldset and parent background need to be different colors. It uses relative positioning on the fieldset and absolute on the legends, in concert with negative padding on the legend, but IE doesn't margin or pad nested fieldsets appropriately as can be seen below.

The Simply Coloured Fieldset

The Fieldset with no Borders

The Fieldset with H3s

Security by Freedom Communications | validate xhtml, css