Click on the headings to open them. They will open on this page. Open the following link for further information about these headings if required.
Your browser does not support these headings. To ensure that the contents remain accessible, they have been automatically opened so that all the information on the page is displayed.
However, to take advantage of the headings and to ensure that the layout and design of this site are displayed correctly, you are recommended to upgrade to a current version of one of the following standards compliant browsers:
- Internet Explorer (http://www.microsoft.com/ windows/ie/downloads/ default.mspx)
- Mozilla Firefox (http://www.mozilla.org/ products/firefox/)
- Opera (http://www.opera.com/download/)
Glossary links are included within this page. If a word appears as a link, clicking on this link will show the definition of the word in a 'pop-up window'. Select the following link for information about these glossary links if required.
- Select the links see the definitions in a pop-up window.
- NB. If you use pop-up window blocking software, you will need to deactivate it for pop-ups on this site to use the glossary links. Alternatively, all glossary definitions can be seen on the 'Glossary' page in the 'Resources' section.
Web forms are at the heart of online questionnaires which basically consist of text (with any associated multimedia) and form elements inserted into a web page. Forms make it possible for participants to enter information and send this information to the researcher for analysis.
This page will provide the knowledge required to produce a web form. It will introduce the different form elements available and cover the different options for how these elements function and appear.
Form tags mark off the beginning and end of a form. Controls within the form tags are effectively grouped together so that when a submit button is clicked the data in all the controls within the form is sent for processing. It is possible to include multiple forms on a page, but only one form can be submitted at any one time.
A typical form tag is as follows:
<form name="form1" action="sendForm.php"
ADD FORM CONTROLS HERE...
The 'name' attribute allows the form to be given a unique name. This is essential in allowing the information from the form to be referenced by scripts so that the contents can be accessed and manipulated.
The 'action' attribute specifies where the information should be posted to when the 'submit' button is pressed. This will be to a page which contains server-side processing functionalities to deal with the data. In the example above, the contents are posted to a page called sendForm.php, where it will be processed by a PHP script (for example, by being sent via email or sorted and transferred to a database).
where '?' separates the URL from the data, '=' separates variable names from the data, and '&' separates different items of data.
Though the 'get' method can be useful in allowing the form data to be bookmarked along with the URL (allowing a search to be bookmarked), in the majority of cases, the 'post' option will be used as this can deal with larger amounts of data and does not reveal the data in the location bar of the browser.
The majority of form controls that allow the user to input information are created using the input tag, with the type attribute specifying what type of control appears on the screen. Like an image tag, the input tag does not have a 'close' tag, and in order for it to meet the latest standards of XHTML, the close tag '/' must be included at the end. An example of an input tag for a text box is:
<input type="text" name="text box1"
The form controls that are not created using the input tag are textarea and select box controls. These are displayed through <textarea></textarea> and <select></select> tags respectively.
Each control can be given attributes and values to control aspects such as width and length, and whether or not the control is filled in or selected by default.
As with any other HTML element, the appearance of forms and form controls can also be customised using Cascading Style Sheets (CSS) to add design features. The examples below show a text input box with the default style, alongside one that has been customised via Style Sheets and has a blue border and yellow background (see the 'Introduction to CSS' section of this guide for more information).
The following table provides an example of how to insert the different types of control into a web page and outlines the different attributes and values that can be applied to each:
|Name / Example||Example HTML||Comments / Possible attributes and values|
||This produces a single-line text input box with a width of
15 characters and the name 'text box1', that can hold a maximum
of 20 characters.
It is possible for text to appear in the box by default by adding value="x, y or z" to the tag, e.g.
||This produces a single-line text input box in which any characters
input will display as asterisks or discs. (NB. This is a display
feature which does not add to the security of information submitted
by the form)
Possible attributes and values are the same as for text boxes.
||This produces square tags that display a tick when selected
and can allow multiple responses.
When the form is submitted the name and value of any checked boxes will be submitted.
Adding the attribute checked="checked" means that the box is selected by default.
||Circular tags that fill in when one option is selected.
Where a group of radio buttons are given the same name only one of the buttons can be selected at any one time.
As with Check boxes, adding the attribute checked to one of the buttons means that it is selected by default when the page loads.
||Works in the same way as the text box, but produces a multi-line
text input box with a width and height specified by the cols
and rows attributes.
The box can be empty by default or text can be added between the tags
Drop-down menu box
||An element which allows users to select options by clicking.
One option is displayed at a time, and only one can be selected.
In a similar way to Check boxes and radio buttons, adding the attribute selected="selected" to one of the options means that it is selected by default. It is a good idea to make the selected option an instruction to avoid measurement error if an option selected by default is submitted.
||List boxes are produced using the same tags as drop-down menu
boxes, but the attribute size="x"
is added where x is the number of options visible at any one
Adding the attribute multiple=multiple to the tag allows more than one option to be selected if the user holds down the control key whilst making selections (instruction on how to do this may be required or it may be preferable to use Check boxes which have a similar function).
Adding the attribute selected=selected to one or more of the options means that it is selected by default.
<input type="hidden" name="hidden1"
The 'name' attribute allows the field to be referenced by scripts so that the information (set using the 'value' attribute) can be written to or collected from the field when needed.
Examples of uses of the hidden form control include the following:
Collecting information from questionnaires that span multiple pages so that the information from earlier pages can be passed to later pages without it being repeatedly displayed on every page. Upon submission of the questionnaire on the final page, the data from a form on this page can be combined with one or more hidden elements containing the data from forms on previous pages. The data from multiple pages and forms can thus be submitted simultaneously. (There may be cases where it is desirable to submit information from each page separately to, for example, identify any key drop-out points).
Passing extra information about the submission alongside the data from the questionnaire. This may include information such as date and time of submission, approximate time taken to complete the questionnaire or individual questions, the page which contained the link the participant followed to reach the questionnaire, and information about the computer used by the participant such as the IP address or the browser used. These can provide possible routes to identifying and removing anomalous submissions (e.g. extremely rapid completion or multiple submissions) alongside providing information about the success of the forms of advertising used to elicit participation.
Passing information collected solely to enhance the effectiveness of data collection, management or processing. Examples may include the addition of a standard 'from' and 'subject' line to be added to emails containing data from particular questionnaires to facilitate automatic management of email, or, where appropriate, the inclusion of information about the version of a questionnaire completed.
See the 'Gathering information about participants' sections of this guide for further information about the use of hidden fields.
Buttons must be added as the final component of a working web form. It is through selecting these buttons that the participant is able to submit or reset a form, or perform some other action programmed by the developer.
The three standard types of button are illustrated in the following table:
|Name / Example||Example HTML||Comments / Possible attributes and values|
||The submit button automatically processes the information
in a form by sending it to the place and in the manner specified
by the form tag.
The text on a button can be changed by altering the value attribute.
||The reset button automatically returns all the form elements
within the same form as the button to their default state as
per when the document was opened. Use of a reset button must
be carefully considered with longer forms in particular, as
participants who accidentally press the reset button
As before the text on the button can be changed by altering the value attribute.
||This type of button has no default action and it must be associated
with a script to have an effect. The script will usually be
linked to an 'onclick' event which will carry out the action
set by the script when the button is pressed.
The following example shows how groups of radio buttons can be organised into grids for Likert scales or semantic differential questions:
The radio buttons in each row are grouped by giving them the same name, so that only one option can be selected for each row. The buttons in each group are then given a different value so that when the form is submitted, the names are sent along with the value of the selected button (or no value if none are selected). This works in exactly the same way as four unrelated groups of radio buttons in four separate questions.
It is important to ensure that a questionnaire is fully accessible to users of non-graphical browsers or users who are not using a mouse or other click-and-point device. To do this, all form elements should be clearly labelled.
This is done using the
tags as follows:
<p><label>1. What is your name?</label></p>
<p><input type="text" name="namebox" /></p>
It is also important to make an explicit connection between the
label and the control using the
for attribute. This
tells the user exactly which control the label refers to as follows:
<p><label for="name">1. What is your
<p><input type="text" id="name" name="namebox" /></p>
The text box is given an identifying attribute
which the label's
for attribute explicitly refers to
label for="name"). This ensures that there
will be no confusion in the use of the form for those using non-graphical
A second attribute which can be used to improve the accessibility
of a questionnaire for those using a keyboard or equivalent is the
tabindex. The tab key (or equivalent in, for example,
voice activated browsers) can be used to select each element in
a form in turn. The
tabindex explicitly determines
the order in which the elements are selected when the user tabs
through them, as follows:
<input tabindex="2" type="text"
<input tabindex="1" type="text" name="box2">
<input tabindex="3" type="submit" name="submit">
In this example, the second text box is selected first when the user presses the tab key. Pressing the key again selects the first box, and pressing it for the third time selects the submit button.