Open/close
all![[Skip instructions]](../generic/trans.gif){kind=small}
![[i]](../generic/instructions.gif){kind=small}
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/)
CLOSEGlossary 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.
- Use of the glossary links is JavaScript dependent. If JavaScript is disabled, it will be necessary to open the 'Glossary' page to view the definitions. Opening this page in a new window may allow you to refer more easily to the definitions while you navigate the site.
Introduction
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.
Learning
activity: Web forms
The following is a questionnaire about internet use. It is an example of a web form containing some of the most common form elements.
![[?]](../generic/questionwh.gif){kind=small}
Complete the web form and submit your answers which will open
a new window with an automated response (they will be dealt
with client side and will not be sent away from your computer).
Examine the action of the different form elements, then complete
the tasks that follow.
Task
1: The basics
A. Check your knowledge of the names of different form
elements by matching the names to the examples below.
There is a text-only alternative below the activity.
B. Consider the following questions about the web form,
before reading the answers. You can select the following
link to open
the form in a pop-up window for easier examination.
1. What is the difference between the action of radio buttons and check boxes? Which have the same actions as the select box?
2. Are there any maximums to the length of the text that can be entered into the text boxes and textarea? What happens when the text reaches the end of the boxes?
Answers
1. The radio buttons work together as a group. It is only possible to activate one option at a time. However, multiple Check box options can be chosen simultaneously.
The radio buttons are closest to the select box in that only one option can be chosen. It is, however, possible to set a select box so that multiple selections can be chosen by holding down the control button (see section below).
2. The second text box has been set with a maximum character length of 3 characters. If no maximum character length is set (as is the case with the first text box), text can be entered beyond the width of the box. Maximum character lengths can also be set for textareas. If no maximum is set, the scroll bar is automatically activated once the end of the box is reached.
Task
2: Examining the HTML
A shortened version of the HTML behind the web form is reproduced below. For each HTML element, the number of options has been reduced to save space.
Examine the HTML underlying the web form and consider how
it is rendered in the browser. Try to establish what the
functions of the different parts of the HTML are. You can
select the following link to open
the form in a pop-up window for easier comparison between
the form and its HTML.
When you have studied the document, turn on 'help' by selecting the question mark icon. This will allow you to hold your mouse over different sections of the document to see explanations. There is a text-only alternative below.
Text-only
alternative
Examine
the HTML underlying the web form and consider how it
is rendered in the browser. Try to establish what the
functions of the different parts of the HTML are. You
can select the following link to open
the form in a pop-up window for easier comparison
between the form and its HTML.
When you have studied the document, select 'Explanation' at the bottom of this section to see explanations of the different sections of the document.
<form name="form1" action=""
method="post">
<p> 1. What is your name?</p>
<p><input type="text" name="namebox"
/></p>
<p>2. How old are you?</p>
<p><input name="agebox" type="text"
size="5" maxlength="3" /> years</p>
<p>3. How often do you use the internet? </p>
<p><input type="radio" value="Everyday"
name="often" /> Everyday<br />
<input type="radio" value="2-3 days"
name="often" />
2-3 days per week<br />
<input type="radio" value="4-5 days"
name="often" />
4-5 days per week</p>
<p>4. Which of the following do you regularly
use the internet for?<br />
(You can select as many options as you like. If you
would like to remove a selection you have made, click
on it again to deselect it).</p>
<p><input type="Check box" value="Email"
name="email" />E mail<br />
<input type="Check box" value="Finding
info" name="FI" />Finding information
about things to buy<br />
<input type="Check box" value="Purchases"
name="purchases" />Making purchases</p>
<p>5. How would you rate your skill as an internet
user?</p>
<p><select name="levelSelect">
<option selected="selected">Select an
option</option>
<option>-------------------</option>
<option value="VA">Very advanced</option>
<option value="A">Advanced</option>
</select></p>
<p>6. What, in your opinion, are the three main
advantages of the internet?</p>
<textarea name="advantages" rows="5"
cols="50"></textarea>
<p><input type="button" name="Submit"
value="Submit" onclick="openResponse();"></p>
</form>
Explanation
| Section of code | Explanation |
|---|---|
<form name="form1" action=""
method="post"> |
Tag to open the form, which is given a unique name to enable any scripts to refer to the form(s) in a page, and the elements within. The action and method attributes control how and where the information is sent when the form is submitted (see section below). |
<p><input type="text"
name="namebox" /></p> |
Text for question 1 within paragraph tags. See 'Ensuring web forms are accessible' below for information on using labels for form elements |
<p><input type="text"
name="namebox" /></p> |
Input tag which places a text box (type="text")
on the page of the default size and without a
maximum number of characters. The name allows
the box and its contents to be accessed by any
scripts to validate or process the form.
|
<p>2. How old are you?</p> |
Text for question 2 within paragraph tags. |
<p><input name="agebox"
type="text" size="5" maxlength="3"
/> years</p> |
Input tag for a text box (type="text")
with a 5-character width and the maximum number
of characters set to 3. The close tag (' />')
ensures that the input tag meets the latest standards
of XHTML which state that all tags should be closed.
|
<p>3. How often do you use the internet?</p> |
Text for question 3 within paragraph tags. |
<p><input type="radio"
value="Everyday" name="often"
/> Everyday<br /> |
Input tags for three radio buttons (type="radio").
The fact that they are given the same name (name="often")
means that they operate as a group whereby only
one option can be selected at any one time. This
name means that scripts can access the tags to
check which of the buttons with the same name
has been selected. The value of the selected button
can then be extracted.
|
<p>4. Which of the following do
you regularly use the internet for?<br /> |
Text for question 4 within paragraph tags. |
<p><input type="Check box"
value="Email" name="email"
/>E mail<br /> |
Input tags for three Check boxes (type="Check box").
The names act as a reference to each Check box
and mean that scripts can access them to check
whether they have been checked. The values of
any checked boxes can then be extracted.
|
<p>5. How would you rate your skill
as an internet user?</p> |
Text for question 5 within paragraph tags. |
<p><select name="levelSelect"> |
Select tags which create a select box with a
unique name to allow it to be referenced. Each
choice is placed within <option></option>
tags which are given a value so that the value
of the selected option can be extracted. The first
two options are not intended to be selected -
the first acts as an instruction and the second
separates this from the genuine options. Inserting
'selected' after the first option means that this
option is selected by default and appears in the
select box when the form is loaded.
|
<p>6. What, in your opinion, are
the three main advantages of the internet?</p> |
Text for question 6 within paragraph tags. |
<textarea name="advantages"
rows="5" cols="50"></textarea> |
Textarea tags which create a text input area, given a unique name with the 'name' attribute. The 'rows' attribute specifies the number of lines in the box, and 'cols' specifies its width. |
<p><input type="button"
name="Submit" value="Submit"
onclick="openResponse();"></p> |
Input tag for a button (type="button"),
which has no default action and which must be
associated with a script to have an effect. It
is used with this form because it is processed
using a piece of JavaScript code connected to
the 'onclick' attribute (activated
when the user clicks on the button). The value
attribute sets the text on the button. For most
forms, a submit button can be used (type="submit")
which inserts a button with a default action of
processing the form by sending the information
to the place and in the manner specified by the
form tag.
|
</form> |
The 'close form' tag which ends the form. |
The
form tags
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"
method="post">
ADD FORM CONTROLS HERE...
</form>
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).
The 'method' attribute specifies how the information in the form should be sent. The two values are 'post' or 'get'. The difference is that in the case of the 'post' method, the information is sent separately, while the 'get' method attaches the information to the end of the URL of the page that will process the information. An example of the 'get' method from a search engine in which the user has searched for the keywords 'JavaScript' and 'validation' and selected options to see pages only in English and from the UK, might be:
http://www.searchengine.com?keywords=JavaScript+validation&lang=En&src=UK
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.
Form
controls for input
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 |
|---|---|---|
| Text box |
<input type="text" name="text box1"
size="15" maxlength="20" /> |
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. |
| Password box |
<input name="password1" type="password"
size="15" maxlength="10" /> |
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. |
| Check
box Yes No Maybe |
<input type="Check box" name="c1"
value="Yes"> |
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. |
| Radio button Yes No Maybe |
<input type="radio" name="r1"
value="Yes" / > Yes <br /> |
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. |
| Text area |
<textarea name="textarea1" cols="10"
rows="5">Text can be added between the tags</textarea>
|
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 |
| Select boxes Drop-down menu box |
<select name="select1"> <option selected="selected">Choose
an option</option> <option>-------</option>
<option>Option 1</option> <option>Option 2</option>
<option>Option 3</option>
|
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. |
| Select boxes List box (size="5") (size="1") |
<select name="select2" size="5"
multiple="multiple"> |
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
time. 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. |
Hidden
form fields
Hidden form elements are form controls that are not displayed on the page (though they are visible in the HTML source for the page). They are useful for storing and passing information from page to page which is not necessary or desirable to display. They can be thought of as text boxes with content that can be set by the developer via HTML or JavaScript rather than being completed by the user. The basic syntax for creating hidden form fields is as follows:
<input type="hidden" name="hidden1"
value="value set via HTML or JavaScript" />
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
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 |
|---|---|---|
| Submit button |
<input type="submit" name="Submit1"
value="Submit form" /> |
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. |
| Reset button |
<input type="reset" name="reset1"
value="Reset form" /> |
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. |
| Standard button |
<input type="button" name="buttton1"
value="Perform an action" onclick="perfActn();
/> |
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 example shown would cause a JavaScript function called 'perfActn' to be activated when the button is clicked (this may, for example, be written to check that all required fields are completed before sending the information to the server (see the 'Form validation' section of this guide for further information). |
Using
tables to organise controls into grids
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.
The table is then styled using HTML or CSS (See the 'Introduction to HTML 2' / 'Introduction to CSS' sections of this technical guide).
Ensuring
web forms are accessible
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 <label></label>
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
name?</label></p>
<p><input type="text" id="name" name="namebox"
/></p>
The text box is given an identifying attribute id="name"
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
browsers.
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"
name="box1">
<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.
Learning
activity: Review
The HTML from the example form in the introductory learning
activity is shown in the text box below. Add to or amend the
HTML to make the 8 changes outlined below.
You can use the 'view page' link to open the text box contents as a new HTML document. When you are satisfied with your changes, select the 'suggested answer' link to compare your HTML with a model.
The HTML can be copied from the text box, pasted into a text file, and saved as an HTML file for use as a template.
Changes
- Resize the 'what is your name' answer box to 30 characters.
- Add a 'What is your email address?' question. Include a text box for the answer with a width of 30 characters and a maximum length of 50 characters.
- Add a 'less than 2-3 days per week' option to question 3.
- Add a 'None' option for question 4. Make this option selected by default.
- Add 'average' and 'basic' options to question 5, giving the options suitable value names.
- Change the select box to a list box in which all the options are visible and multiple selections are possible.
- Resize the textarea for question 6 to 60 columns x 7 rows.
- Add a reset button.
- Add appropriate labels to the text box and textarea controls.