OK, you’ve seen how to make your website accessible by using a div based layout? No? Get yourself over to Alistapart to learn how to loose the tables!

So you want to know how to make your input forms accessible. For the beginner, input forms are quite hard to make accessible, that is, not using tables but still getting the same effect.

This website and my new website which is still in production both use accessible forms - so how is it done?

First you need the HTML. In these examples we will have 3 fields, Name, Email and Message (you can easily add more fields by following the convention). The form will also have submit and reset buttons (naturally). Therefore, the HTML looks like this:

<div id="contactform">
<form action="contact.php" method="post">
<div>
	<label class="flabel" for="name">Name</label>
	<input type="text" id="name" name="name" size="35" />
</div>
<div>
	<label class="flabel" for="email">Email</label>
	<input type="text" id="email" name="email" size="35" />
</div>
<div>
	<label class="flabel" for="message">Message</label>
	<textarea id="message" name="message" rows="12" cols="55">
	</textarea>
</div>
<div class="indent">
	<input type="submit" value="Send" />
	<input type="reset" value="Reset" />
</div>
</form>
</div>

So what are we doing above? I’ll take you through it…

Firstly we place the form in a container, don’t worry about this at the moment. We then open the form, if you are lost at this stage - you probably want to do a tutorial on HTML forms. The form is posting to contact.php - change this to whatever your script is.

Next we have an opening <div> which holds the form field. We then declare a label for the form field and after that we put the input element. If we don’t have a label for the field (i.e the submit/reset buttons) then we use <div class=”indent”> to indent the buttons to the desired position. Simple! The hard part is the CSS:

#contactform div
{
	margin-bottom: 0.5em;
}
#contactform .indent
{
	margin:10px 0px 10px 95px;
}
#contactform .flabel
{
	padding:2px 10px 2px 0px;
	text-align:right;
	float: left;
	width: 80px;
}
#contactform .formerror
{
	border:1px solid #800000;
}

Thats the CSS you need - as you can see not too hard to understand. The first declaration gives each <div> a bottom margin of 0.5em - this will allow for text re-sizing.

The next declaration for class “indent” gives it a left margin of 95px - this value will change depending on the width of the form label.

Next we have the form label style - which has padding, a text-align right attribute (which you can delete if you prefer left-aligned labels) and a width of 80px. The labels are also floated to the left, so that you get a column table effect.

I have also declared an “formerror” class - this can be attached to input fields if they have been left blank. To use this you would need a script to post the form, check the values then show the form again with <input class=”formerror”…. put in place if the input data was invalid (or non-existant when required).

If done correctly your form should look something like this:

Contact James Crooke!