One of the many interesting features in Drupal is the ease of changing fields in entities. The strength of admin/structure/types, admin/config/people/accounts/fields and related functionalities like Field collections make it possible for well-informed endusers to change forms easily. There are many different field types and many field types have multiple widgets to change the input and presentational behavior of these fields. And to add more even more complexity, fields can be arranged into fieldsets with multiple widgets.
This post addresses one possible way of handling this complexity.

Not surprisingly each field and widget comes with its own markup/html structure. When building a website with many different forms gathering many different types of data getting the grips on styling these forms can be amazingly difficult. If you target a too detailed ID or class in your css adding a field, changing the widget, or even changing the language, may break your styling.

The Drupal Form API provides most of the information about the markup produced by different fields and widgets but for non-programmers (like me...) reading the Form API is very difficult to say the least. I've therefore spent some time pondering this issue and eventually built a css component that is geared towards styling forms in a more or less generic manner. I hope other Drupal themers can use this and possibly expand the approach.

My aim was to deliver vertically aligned forms. Form usability is a much debated subject in itself but vertical alignment of the focus for input (start of a text field, a checkbox, a list of radio buttons etc) is generally perceived as a best practice. Also labels, inputs and help information should be presented close to each other. After some experimenting I've decided to default on the following visual structure:

1. labels, inputs, (links to) help text and required info are displayed inline
2. labels are text-aligned right to attach them to the input more easily.
3. all "required" info is displayed right after the label
4. links to help texts are displayed before the inputs/check boxes etc.

The css is based on faux absolute positioning, a technique that is very useful when the visual ordering of elements should be irrelevant from the order in which they appear in the markup. See http://www.alistapart.com/articles/fauxabsolutepositioning/ for more details on this technique.

Attached to this post are two assets:

1. The first asset is a schema (in LibreOffice calc) containing the relevant classes in the markup that different fields and widgets produce.
2. The second asset is a css file containing the code that is needed to position the form elements.

The markup schema.

The schema describes the classes used for some different types of fields and different widgets. The schema is not complete (yet) but contains often used fields and widgets. The elements we want aligned visually are:

1. labels (displayed as bold in the schema): these are the parts of the markup that should be displayed in the left part of the form with text-align right.
2. form-required (displayed as red in the schema): we want the asterisks (or any non-default symbol) to be displayed right next to the label.
3. descriptions (displayed in grey in the schema): I wanted to vertically align icons representing descriptions to avoid visual clutter as much as possible.
4. inputs (displayed as italic in the schema): these can be anything from a simple text field up to field collections with nested fields; they should start at a pre-defined position horizontally and take up as much space as is necessary.

In the schema I have also designated two common classes: form-wrapper (olive) and form-item (light cyan). Since these classes are common in almost all fields and widgets they are perfect candidates for generic css statements.

The ccs file

As noted the css file is based on faux absolute positioning but a combination of floated and absolute positioning would by possible too, the choice merely being a personal matter. With faux some 400 lines of code are necessary to do almost all positioning of the form elements. The visual styling of a form is done in the project theme.
I provide the css merely as a starter you can adept to your own taste.