Building a standards-based form

Most web sites will require a form or two. Purchases, weather requests, contact forms, and even “Guess the number of dust bunnies under David’s desk” contests. In the past, forms were set up with the miracle table and that worked just fine. After all, they looked pretty. What more could we want?

How about an accessible form that can be navigated with a keyboard instead of a mouse? How about a form that can be used by the blind? How about a form that allows people to purchase stuff on their cell phones? How about all of this and more in a format that is sooo much easier to build and maintain, not to mention faster download times?

Does this sound impossible? Miraculous? The answer, once again is semantic coding. Let’s go back to the beginning of the HTML history books and look at some simple tags and how they should be used properly.

A form can include one to many inputs. On larger forms, these inputs can be grouped into similar subjects, such as personal information, address information, credit card information, etc. Somehow, we need to label the inputs to give users an idea of what they should tell us. These basic demands are the building blocks of an accessible form.

The Wrapper

Forms use a <fieldset></fieldset> tag to group similar inputs. The entire set of inputs can be grouped inside one fieldset and sub groups can be nested within the fieldset, creating one big set of fieldsets. Think of it as a box inside a box inside a box… Or, the form could have one or more fieldsets that are not nested within each other. It all comes down to the subject matter of the inputs.

Here’s a good example of nested fieldsets

flow of information in a form with nested fieldsets

Here is an example of non-nested fieldsets

flow of information in a  form with individual fieldsets

Look at your information and decide if there should be one or multiple fieldsets. Visually, there is a border around the fieldset by default. This border can be removed with style sheets. Avoid using background colors, Internet Explorer will not show them correctly.

Fieldsets have a convenient <legend></legend> tag that goes directly after the opening <fieldset> tag. The legend tag is used for adding a short descriptive header to the fieldset. The default styling features a square box around the text. The border can be removed with the style sheet.


<fieldset>
<legend>Describe the Form</legend>
</fieldset>

The Inputs and Labels

To make a form comply with accessibility standards, each input needs a label. Conveniently, there is a label tag. When a visitor sees a form with the label tag,A form isn’t of much use if there are no input fields. These are very easy to work with.

There is a <label></label> tag to give a label to each input.

These are really cool. The label could go anywhere on the page and it would still be associated with the input field. If someone were to click on the label, it activates the input field, this makes it much easier for someone with limited mobility to activate a check box or radio button. To do this, we add a for=”xxx” attribute to the label and the input gets an id=”xxx”. This tells the label to look for the input with the same value.

<label for=”name”>Enter your Name</label>

<input type=”text” id=”name” size=”15”>

Let’s put together a simple form


<form action=”” class=””>

<fieldset>
<legend>Join our mailing list</legend>
<label for=”name”>Your Name<label>
<input type=”text” size=”25” id=”name”/>

<br />
<label for=”email”>Your E-Mail Address</label>
<input type=”text” size=”25” id=”email” />

<input type=”submit”/>
</fieldset>
</form>

Pretty simple, huh? The <br /> tag will keep the fields from running together. Style sheets can give the form the look desired.

Visit www.picment.com and www.stuffandnonsense.co.uk for more information.