Page 1 of 3 In this tutorial we will look at how we can build and lay out accessible forms. In particular, we will focus on the label element. We will see how the label can be used to not only increase the focus area of any form element but at the same time be utilised to give our form layouts a little more structure than a simple stacking of form elements in a single column. You can open formlabel.html to read the code as you work through the file. This page is available in the downloads from the link at the foot of this page.
To begin, we lay out our form in a containing element. In this tutorial I am using a wrapper div to contain the form and within the form I have set a fieldset, as can be seen in Listing 1:
<div id="wrapper">
<form action="" method="post" name="DataCollection" id="DataCollection">
<fieldset>
<fieldset>
</fieldset>
</fieldset>
</form>
</div>
Listing 1: The basic structure of the containing elements
The form we build in this tutorial will have two distinct columns. One column will reside within the fieldset, the other will reside outside the fieldset. We will begin by building the left hand column of our form; this column will contain five elements. It will contain four form fields, specifically the: Name, Company, Email and Telephone fields followed by a submit button. We can add these fields into our nested fieldset now:
<form action="" method="post" name="DataCollection" id="DataCollection">
<fieldset>
<fieldset>
<label for="name">
Name <input name="name" type="text" id="name" tabindex="1" />
</label>
<label for="company">
Company <input name="company" type="text" id="company" tabindex="2" />
</label>
<label for="email">
Email <input name="email" type="text" id="email" tabindex="3" />
</label>
<label for="telno">
Telephone <input name="telno" type="text" id="telno" tabindex="4" />
</label>
<input name="Submit" type="submit" class="button" tabindex="6" value="Submit" />
</fieldset>
</fieldset>
</form>
Listing 2: Adding the form fields for the left column
Let's look at one of those form inputs in a little more detail:
<label for="name">
Name <input name="name" type="text" id="name" tabindex="1" />
</label>
Listing 3: The name input in detail
The input portion of the code in Listing 3 — the middle line — is likely somewhat familiar to you. The document we are building the form in is an xhtml transitional document so we are using both the id and the name attributes to provide backward compatibility to html 4.01 through the name attribute. The type of element — in this case text — is declared and I have added a tabindex attribute. This is an important accessibility feature as it allows the form elements to be navigated in a logical order by keyboard users.
What you might not have seen before is the label element. The label element does not have to wrap around the form element as shown in Listing 3, it can be placed elsewhere on your page. The key factor here is the for attribute of the label tag. It is the for attribute that allows the label to become associated with any given form element.
Further reading can be found at the W3C on labels. The label element does more than just associate a form element with its label, as we shall see a little later in this tutorial.
Image 1: The left hand column
As you can see I have styled the form elements with CSS, this really has very little importance as the form elements could have been styled in any way that took our fancy. At least, with the exception of the rule below in Listing 4:
#wrapper input {
background-color: #CADDCF;
color: #414F4B;
border: 1px solid #4C5854;
margin: 0;
width: 150px;
display: block;
}
Listing 4: Using display block
The only real property and values worthy of discussion here is the bottom one; display: block;. As you can see from the descendant selector in Listing 4, we have mapped down to the input element. When display block is declared then the element it is declared on — in this case the input element — has to be displayed on its own line in the browser window. This forces our inputs below the label element and allows the label to sit above the inputs. This can be clearly seen in Image 1.
While allowing labels to sit in adjacent cells using tables to lay out a form worked fine, this is not so in CSS form layouts. Our forms can be presented much neater when using a CSS layout by setting the label to show above the form, you can of course set the label to the side if you wish, but my personal preference is to see the label above the form element.
Finally, provide a tabindex number for each of the inputs we created using the following example.
Keywords
form, accessibility, label, onfocus, focus, fieldset, form label, form labels
