Accessible Forms

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:

sdf

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

sdf

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

Buttons

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>

Fieldsets

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:

is achieved using the code:

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

Input

This can be in a range of formats:

button

checkbox

file

hidden

image

password

radio

reset

submit or

type your story in here text.

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.:

Name:

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:

Examples

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

Navigation

Accessible Forms

Forms

Buttons

Fieldsets

Input

Examples