Customer Street CSS

For a long time, since I started taking a very active interest in Web Standards and learning CSS I have always queried the methods by which forms, such as contact forms, should be correctly marked up and displayed. Since I can remember building my first web site, there have been disagreements as to the correct semantic approach to mark-up when it comes to forms of all types.

Is A Form A Table?

Most commonly forms are marked up in tables and I’ll admit that this is the one use I have for tables that don’t directly indicate tabular data, most likely because it’s the first method I used to code a form and I’ve just never got out of the habit. But building my own personal site that contains comments and other various forms I started to question whether this was semantically correct because a form is not really a table of data.

Is a form a list of fields?

This is probably just about the closest semantic method for creating a form, such as a contact form, because you are looking at a list of input fields so naturally you’d think it was a list? Obviously to switch from tables to proper HTML the easiest way would simply be to stick it in a number of paragraph or division tags, but looking at semantics a form would not naturally fit into either of these.

The great thing about lists is, as soon as you turn off their margins and padding (using the Universal Selector) you can do anything with them. Navigation lists can so easily be created in just CSS by using a ul and an li tag. Forms, I believe should use the same mark-up. This gives you such a wide scope in CSS that you can do with them and they will then look better.

But no, a form should be a fieldset!

Yes, the fieldset. Not many people know of this tag, and it is even less widely used. Web Standards state that a form element should contain some form of block-level element for the input fields to sit in, so this could be a div, or a p, or any other block-level element. But the most semantic is the fieldset that sits nicely around your form and you can apply a legend to it, which can also be styled, giving you a very nice looking form. This article is a nice little guide to the kinds of things that fieldsets can achieve. It may look like a long way to go about things, and there are obvious browser inconsistencies, but it’s not too tricky, very functional and most importantly semantic.

When couple with some nice CSS you can create a really nice form with a legend that does everything you want, or need it to do

0

after 0 Votes