This site is at beta test stage! Comments are welcome. Contributions are sought and will be published with acknowledgement.


home page

quick overview


flow chart

site index

contact us

site use


contribute now!


©Liddy Nevile



Accessible Forms


When feedback or information is required from users, the <form> tag should surround all that is to be completed and returned. Where this contains sub-sections, these should be specified as <fieldsets>, so users can jump from information about addresses, eg, to information about products. All <input> areas are enclosed in forms. Forms are submitted one at a time so the author of the form should think about what is to be submitted and whether it belongs together or is quite separate.

Forms can return the information to a computer or to an email address. The information is sent in a format that makes it easy for computers to work on the information but a small program is required if the information is to be collected and used sensibly by the computer to which it is sent. Alternatively, the server can send the information to an email address.

Most web servers have suitable programs for this work and forms can be a very efficient way to gather information.

For collecting and sending information to a computer, one needs code like this:


For collecting and sending information to an email address, one uses code like this:


What is received if information is sent to an email address or otherwise is shown in the examples below.


Buttons should always be inside forms. They should be carefully labelled, e.g.:

with code:

<button type="button" onClick="doThis"()>Click for fun</button>

with code:

<button type="submit" name="type" value="find_out_more">Click for more info</button>

with code:

<button type="reset"> <img src="images/clear.gif" height="15" width="20"></button>


These are 'chunks' of fields. Chunking fields makes it easier to users to navigate to the fields of interest to them. A fieldset should be labelled and for this to work in IE4, it needs to happen immediately after the <fieldset> tag. The label can be formatted using a style.

the following example:

name and address ... all the buttons etc

is achieved using the code:

<form name="form2" method="post" action="">
<fieldset><legend>name and address</legend> ... all the buttons etc </fieldset>


This can be in a range of formats:









submit or


If the author wants a certain response typed in particular circumstances, this should be indicated with the <kbd> tag. For instance:

If you think this is about one of the characters listed below, type already covered; in the text box provided. For accessibility, it is important to label controls such as the SUBMIT button.

has code:

<p>If you think this is about one of the characters listed below, type <kbd>already covered</kbd> in the text box provided.</p>

Buttons should all be clearly labelled. This is done by wrapping a label around the button, e.g.:

where the code looks like this:

<label>Name:<input type="text" name="personal_name"></label>


If a text input space is needed that can accept carriage-returns within it, textarea should be used:

has code

<textarea rows="4" cols="6" name="whatever">Add your thoughts here.</textarea>

A label for a textarea must be placed before or after the textarea.


example of using form to send to computer and to email .... and inserting info into a spreadsheet.

(not yet available)

Last updated: 8 March 2002