Exploring online research methods - Incorporating TRI-ORM

Web forms

[Skip instructions]

[i] 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:

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.

  1. Select the links see the definitions in a pop-up window.
  2. 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.
  3. 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.

Open/close headingIntroduction

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.

 

Close heading CLOSE

Open/close headingLearning 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.

[?] 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.

 

years

3. How often do you use the internet?

everyday
2-3 days per week
4-5 days per week
6-7 days per week
less than once a week

4. Which of the following do you regularly use the internet for?
(You can select as many options as you like. If you would like to remove a selection you have made, select it again to deselect it).

E mail
Finding information about things to buy
Making purchases
Entertainment
Finding general information
Educational courses
Downloading music
Discussion boards
Real-time chat

5. How would you rate your skill as an internet user?

 

 

 

Open/close headingTask 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.

Open/close headingText-only alternative

[?]A. Check your knowledge of the names of different form elements by matching the names (1-5) to the examples (a-e) below. Then select 'Answers' to check.

Form elements

1. Text box

2. Textarea

3. Select box

4. Check boxes

5. Radio buttons

Examples

a.

b.

E mail
Finding information about things to buy
Making purchases

c.

d.

e.

everyday
2-3 days per week
4-5 days per week

 

Open/close headingAnswers

1=c
2=d
3=a
4=b
5=e

 

Close heading CLOSE

 

Close heading CLOSE

 

[?] 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?

Open/close headingAnswers

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.

 

Close heading CLOSE

 

Close heading CLOSE

Open/close headingTask 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.

 

Open/close headingText-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>

 

Open/close headingExplanation
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 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>
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 />
(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>
Text for question 4 within paragraph tags.
<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>
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">
<option selected="selected">Select an option</option>
<option>-------------------</option>
<option value="VA">Very advanced</option>
<option value="A">Advanced</option>
</select></p>
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.

 

Close heading CLOSE

 

Close heading CLOSE

 

Close heading CLOSE

 

Close heading CLOSE

Open/close headingThe 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.

 

Close heading CLOSE

Open/close headingForm 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">
Yes <br />
<input type="Check box" name="c2" value="No">
No<br />
<input type="Check box" name="c3" value="Maybe" checked="checked" />
Maybe
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 />
<input type="radio" name="r1" value="No" /> No <br />
<input name="r1" type="radio" value="Maybe" checked="checked" />
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>
</select>
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">
<option selected="selected">Choose an option</option>
<option selected="selected">-------</option> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option>
</select>
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.

 

Close heading CLOSE

Open/close headingHidden 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.

 

Close heading CLOSE

Open/close headingButtons

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

 

Close heading CLOSE

Open/close headingUsing 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:

Complete the following statement by choosing the number that most closely matches your opinion for each row:

The internet is:

  1 2 3 4 5  
boring interesting
difficult easy
risky safe
useless useful

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

 

Close heading CLOSE

Open/close headingEnsuring 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.

 

Close heading CLOSE

Open/close headingLearning 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

  1. Resize the 'what is your name'  answer box to 30 characters.
  2. 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.
  3. Add a 'less than 2-3 days per week' option to question 3.
  4. Add a 'None' option for question 4. Make this option selected by default.
  5. Add 'average' and 'basic' options to question 5, giving the options suitable value names.
  6. Change the select box to a list box in which all the options are visible and multiple selections are possible.
  7. Resize the textarea for question 6 to 60 columns x 7 rows.
  8. Add a reset button.
  9. Add appropriate labels to the text box and textarea controls.

View Page | Reset text box | Suggested answer

[i] The links will open in a new window, which you should close to return to this page.

 

 

Close heading CLOSE

  © 2004-2010  All rights reserved    |    Maintained by ReStore    |    About this website    |    Disclaimer    |    Copyright    |    Citation policy    |    Contact us