Page 1 | 2 | 3 | 4 | 5 | 6

CSS Form Design
In this article we will explore form design without tables. We will rely on CSS to control the layout of our form, as in the example below, and we will include a number of techniques to improve the accessibility of the form. First we will look at the overall structure of a form.

Form Structure
Forms follow a basic structure. This is

The input fields are the ways we collect information from a user. These include text form fields, select lists, checkboxes and radio buttons as well as text areas. Previously we would have controlled this layout using table cells, oft producing ungainly code and forms which fail accessibility tests. Usually a form will have several sections and in our design we will group our input fields, logically, using the <fieldset> tag, but first....

The Form Tag
The form tag must include a number of attributes. These are

1. Action
   The action attribute is a call to a program which will process or do something with the form, i.e. insert the contents into a database, send the details to you in an email, retrieve information from a database. The action attribute cannot be blank. For display purposes, in this example we will use action="#", as we are not calling any program.
2. Method
   The method attribute specifies the HTTP method used to send the form. Acceptable values for the attribute are "get" or "post". As a general rule, if you're modifying a database or running a mail program the 'post' method should be used. We will use this method in our example.
3. Enctype
   The enctype attribute specifies the content type used to encode the form for submission. Unless we are attaching a file to our form, like a user adding their CV, do we need to specify the content type. In that case we would add the attribute and value enctype="multipart/form-data". In our example we are not attaching a file so the default value will be used. We don't therefore need to specify the attribute.
4. ID
   The ID attribute distinguishes the form so it can be referred to from elsewhere, i.e. a script or stylesheet. In our example, we will also use the name attribute, as we may wish to use some common designs against a range of forms.

Our opening form now looks like this

Remember for XHTML to keep your tags in lowercase, this includes the values for the method and enctype attributes in forms. Values must also be encased in quotes. You should use double quotes to encase values. If you use none or a single quote you may have display problems in retrieving data from a database to display back to a user to edit.

The <fieldset> tag
The fieldset tag is used to provide a logical grouping to form elements. In a form we may have several sections, for example, a recruitment form might include sections for Personal Information, Education, Employment History, Interests, and References. We would surround each of these sections with a fieldset tag. We would also like to give each of these sections a heading to tell a user about the input fields that follow in a group. We do this with the legend tag, so our form begins to take shape

And the code:

By adding the title attribute to the legend tag we give more information to the user, for example when they roll the mouse over the legend it displays the title. We could now introduce some styling to the fieldset and legend tags to improve the visual display. Move your mouse over the legend in the example below.

And the style code:

We are now ready to add input fields for the user to enter their information

The Input Tag
The input tag can have a number of attributes, the most important of which is the type attribute. Acceptable values include

1. text
2. password
3. checkbox
4. radio
5. submit
6. reset
7. file
8. hidden
9. image
10. button

If we wish to apply styling to input tags we need to be careful as the style will be applied to all input tags, regardless of type. So for example if you wanted to specify a width for your text input, this width would also be applied to your checkboxes and your submit button, as in the following example.

Would display input fields as

Although you can specify the type in your CSS it is not recognised in Internet Explorer so you might also need to include a class, i.e. style the different types individually as the following doesn't work in IE.

This would give you an alternative style on input tags, such as the submit button.

Giving us a form like

Access
We are going to include in our input elements some features which will improve the accessibility of the form and satisfy priority 3 accessibility checkpoints. We are going to properly label all the elements in our form, we're going to create a logical tab index through the form, and we are going to add an access key. Lets look at the first field in our form. We are asking the user to enter their first name. The "First Name" is essentially the name or label we use for the form field beside it, however we need to associate the two explicitly in our code. We will do this with the <label> tag.

There are a few things to notice here

1. The syntax for the label. We say this is a label for, the for value equals the ID value of the input element
2. We have included an access key in the label. When a user presses alt and the letter u, the cursor will enter the form field associated with the label, in this case the first field of our form
3. The label tag has a closing tag. The input tag doesn't so we need to close it with space and the backslash /
4. We have given our input field a tabindex and set the value to "1". If we were navigating our form using the tab key, focus will jump to how we have indexed the form fields. For example if we gave form field ten a tabindex of 2 when we pressed tab from field one focus will jump straight to field ten.
5. We have added a title attribute to the form field. This provides more information for text readers also if you move your mouse over the field the value of the title attribute is displayed to the user
6. Visual cues are useful for users. In this example, if we wanted to make this field a mandatory one we prefix our text with the * symbol, universally recognised as the marker for mandatory fields.
7. We can style the labels

Let's look at the style we applied to our label.

As we are using the float attribute in our labels we need to ensure each label starts on a new row to preserve our layout, so we apply styling to the <br /> tag as above.

Without using any tables this would give us an ordered form like the following:

Style Class
If we introduce other form field types into our form we may need to create individual style classes to control the layout. Lets first look at the textarea tag. We might prefer the label for a textarea tag to appear above the textarea. This can give more room for the field to occupy in the form and improve display.

And the style

To call the style the class is added to the label attributes as in

Putting it all together we get the following code. Notice how the id's of the form field elements are generic. This makes it easier to use a form as a template. There is less to change when reusing the code.

And here is the style

Click here to open the completed form in another window. From there use the view source menu option to grab the code. Later we will discuss nesting fieldsets to manage the display of checkboxes within our form, and explore moving form data from one page to the next so that a user isn't presented with one huge form.

Until then.............

Mark O'Connor 25th September, 2006

Page 1 | 2 | 3 | 4 | 5 | 6