CSS for a complex web form

I just spent some time styling a complex(?) web form with CSS. Some basic requirements:

  • Any number of input elements on each form line
  • The first label on each line to be a fixed width – like a column
  • Able to indicate required/optional/readonly fields
  • Able to move things around fairly easily – particularly after a few months of not touching the code (and in my opinion counting td/tr and cell spanning is not easy)
Complex Form Example

Steps to achieve this result:

  1. First enclose each form line with a div (class=row).
  2. Add an indicator to the first label element on each row (class=first).
  3. Enclose the relevant pairs – label and input/select/etc – with a span (class=optional/readonly/required).
  4. Add CSS to suit the requirements.

So, it took a bit longer than it should have…

The label element does not have a width property unless you float it.

When floating the ‘first’ label, the text changed vertical alignment relative to the other labels in the line. I could fix it by applying a margin to the ‘first’ label, but when I changed font-size (or the text size via the browser) the alignment was out again.

The problem seemed to be caused by floating the label for for a font-size smaller than height of the input box. The simple fix seems to be in adding a line-height to all labels.

You can see the result (HTML + CSS) of this excursion here.

Facebooktwitterredditpinterestlinkedinmailby feather

Leave a Reply

Your email address will not be published. Required fields are marked *