HTML forms provide a way in which an organisation can collect structured feedback from the users of its website. They can range from simple suggestion or problem reporting forms to complex user feedback surveys.
However they are used, there are a number of elements that must be implemented correctly to ensure accessibility to as wide a range of users as possible.
Use each checklist to ensure that your web pages comply with these guidelines
6.5.1 Checklist and summary: Core guidance
Checklist
Summary
If constructed correctly forms can add value to a website and be of value to the organisation itself. For this reason it is important to ensure that the correct elements are used and that forms are designed with the user in mind.
6.5.2 Implementation
A form is constructed in HTML 4.01. It allows a user to set the values of the form elements on the page by clicking on pre-selected options or inputting text into designated fields. The contents of the form elements can then be submitted to a URL, specified in the form element markup, for processing.
This completed information can either be sent directly to a Web manager’s email address or, more usually, to the organisation’s hosting server where it is typically stored until it is outputted according to some pre-arranged timetable. The collected information can then be analysed using applications such as spreadsheets or databases.
If form submissions are to be collected by the organisation’s web hosting service, it is important to liaise with your server administrator to ensure that they are willing to take form submissions, and for a suitable server-side CGI script or ASP to be put in place.
Many HTML elements go into the construction of an HTML form. The following are the basic elements that are commonly used.
6.5.2.1 Form
The form element is the container for an HTML form.
A form can be sent directly to a webserver for processing by adding the URL of the resource that is to perform the processing.
<form action=""http://www.domainname.gov.uk/cgi-bin/postit.pl"" method=""post"">
. . . form contents . . .
</form>
The action attribute can also be used to trigger a client-side email user agent to send the submitted form contents directly to an email address. <form action="mailto:webmaster@department.gov.uk" method="post">
. . . form contents . . .
</form>
There are a number of cautions concerning the latter approach. First, some early browsers do not support mailto in form actions. Second, the approach contains the inherent assumption that the user has a properly configured email client installed on the computer from which they are submitting the HTML form.
6.5.2.2 Input elements
There are a number of methods by which forms can allow users to input data. Each is specified using a variation of the input element markup, and each has a number of additional attributes and values that can be added.
Text
Creates a single-line text input box.
<input type="text" name="firstname">
Checkbox
Creates an on/off button box that can be toggled (ticked and unticked) by the user. Only the value of boxes that have been selected will be included with the submitted form data. <input type="checkbox" name="internet" value="car">
Radio
Works in a similar way as ‘checkbox’ except that when several buttons share the same control name (eg name=”sex”) they are mutually exclusive. When one is switched on, all others with the same name are switched off. <input type="radio" name="sex" value="Male">
<input type="radio" name="sex" value="Female">
Both ‘checkbox’ and ‘radio’ can be selected by default by including the ‘checked’ attribute (which does not take a value).
Submitbr /> When activated, a ‘submit’ button sends the contents of the form to the URL specified on the form element. Any value added to the ‘value’ attribute will be rendered as a text label on the button.
<input type="submit" value="Send form">
Although it is possible, authors should not use graphic buttons for the submission of forms.
Reset
A ‘reset’ button resets all controls in the form, clearing the user input and returning controls to their initial values.
<input type="reset"> value="Reset form">
6.5.2.3 Select control element
This control offers the user a pull-down menu option from which to choose one option.
<select name="age">
<option>18-40</option>
<option>41-65</option>
<option>65 upwards</option>
</select>
When used with the size attribute, the select control renders as a multi-select scrolling list that displays the number of entries that is specified as the value of the size attribute.
6.5.2.4 Textarea
This element creates a multi-line input control, allowing users to type in and view larger amounts of data. The author specifies the geometry of the area by including the ‘rows’ and ‘cols’ attributes. <textarea name="furtherdetails" rows="6" cols="50">
</textarea>
6.5.2.5 Tabindex
This attribute and value can be added to any form element. It controls the order of input for users who do not wish to or who cannot use pointing devices such as a mouse. In the example given in section 6.5.3 each tag has been given a ‘tabindex’ value, help to ensure that fields are completed in the correct order. This has no controlling effect on anyone using a mouse to complete the form.
See section 2.4.4 UK government accesskeys standard.
6.5.3 Example
The following example illustrates a very basic feedback form that uses some of the elements discussed in the previous section. <form action="http://www.domainname.gov.uk/cgi-bin/postit.pl" method="post"><p>
First name : <input tabindex="1" type="text" name="firstname"><br>
Last name : <input tabindex="2" type="text" name="lastname"><br>
email : <input tabindex="3" type="text" name="email"><br></p>
<p>Which of the following do you own:<br>
<input tabindex="6" type="checkbox" name="possession" value="car">Car
<input tabindex="7" type="checkbox" name="possession" value="house">House
<input tabindex="8" type="checkbox" name="possession" value="boat">Boat</p>
<p>What sex are you?:<br>
<input tabindex="4" type="radio" name="sex" value="Male"> Male<br>
<input tabindex="5" type="radio" name="sex" value="Female"> Female</p>
<p>Age : <select tabindex="9" name="age">
<option>1-10</option>
<option>11-20</option>
<option>21-30</option>
<option>31-40</option>
<option>41-50</option>
<option>51-60</option>
</select></p>
<p>
<textarea tabindex="10" name="furtherdetails" rows="6" cols="50">
Add further details within this box:
</textarea></p>
<p>
<input tabindex="11" type="submit" value="Send">
<input tabindex="12" type="reset" value= "Reset form and start again">
</p>
</form>
There is no validation of the form content on this example form. The form could be submitted without any of the fields being completed.
An author may wish to add client-side scripting to validate the form contents before it is submitted. For example, scripting could be used to ensure that a minimum of fields has been completed before submission, or that only numerical values are added to a telephone number input field. Technically this can be accomplished by including the JavaScript in the page, and having it triggered by an onClick event on the form submit button.
A web browser like this would render this form:
Further, more detailed, instructions on constructing and implementing forms can be found in the W3C HTML 4 .01 specification.
HTML 4.01 specification from W3C [External link]
Important:
If you collect personal data via forms the Data Protection Act applies. See section 1.10.2.