You are here: The Mobile Web home > Usable Design - Basic Interactivity

Basic Interactivity

Basic interactivity can be developed using the HTML forms module. Forms enable you to elicit information from your users. It also introduces you to another aspect of web development: simple scripts.

It is important for you to understand the rudimentary issues of form development to complete your understanding of Web coding.

 

Online Forms

What do you know?
In your Learning Journal write down when you have used an online form and any frustrations you encountered.

 

Building Forms

To create a form you need to know about 2 major components:

• the structure of the form - the organisation of the data you are collecting, and
• how the data will be processed.

Your text discusses a processing script called CGI (Common Gateway Interface) which takes information and processes the information collected into a format that you can use. While CGI's are very powerful, they require scripts to be placed on the web server and are beyond the resources of this unit. You will focus on building forms that collect and send data via email. However, the CGI discussion will be reffered to at the end of this topic.

Organising information
Whether you are using email processing or CGI, before you can build your form, you need to have some idea of what information you are going to collect and how this an be organised.

Your text, Castro, demonstates this very clearly in the first few figures of the chapter. Read Figures 16.1 - 16.4 to understand the following terminology:

• Label
• Name
• Value.

Activity: Organising Data

Part of a form
A form has three parts:

• The form tag <form> which includes either the email address where the information is to be sent or the URL of the CGI script that will process the form.
• The form elements - for example text boxes, radio buttons, pull down menus, and
• The submit button which sends information to the designated place.

View the form in the activity to identify the parts listed above.

Activity: Parts of a Form

Creating a simple form

Use the following scenario to create your first form:

Create an online form that enables you to order a new bed online. Collect the following information from your users:

Personal details:
name, address include city, postcode and state, customer password.

Bed details:
Timber - Mahogany, Maple, Pine, Bamboo
Size - King, Queen, King Single, Single
Extras - footboard, storage drawers, casters, squeak proofing.

To work through this scenario, please read your Castro text, Chapter 16, pp. 269-278 and 282-285 and create an (X)HTML file.

Activity: Compare code

Styling your form
Use your knowledge of style sheets to format your form so that users will find it easy to fill in. Use an external style sheet.

To help you get started use the emailform.html as this code already has some structural tags included to enable styling.

Use your Castro text, Chapter 14, if you need to refresh your memory.

Activity: Forms with style

Other form elements
Castro text also provides guidance on how to use a range of other features in a form including:

• Allowing visitors to upload files p. 279
• Use of hidden fields p. 280-281
• Using an image to submit data p. 286.

Work through these pages if you think these features would be useful to your forms.

Organising form elements
Forms can be a difficult element for users to figure out how to use on a site. There are a number of inbuilt coding practices that can help your users out.

Castro, Chapter 16, pp. 287-292 describes how some of these can be used:

• Use of <fieldset> and <legend> elements to group like information (p.287)
• Formally labelling parts using <label> element (p. 288)
• Setting the table order of a form to make the different entries easily selectable without using a mouse (p. 289)
• Adding Keyboard shortcuts (p. 290).

The use of the tab order and other grouping of like information are particularly important to help users readily submit data you are collecting.

Activity: Tab Order & Shortcuts

Building Usable Forms

Creating forms that are easy for people to use is always a challenge. There has been a great deal of research on how to go about creating user friendly forms.

Reading 18, Chapter 13, pp. 111-n129 is a chapter called Screen-based controls (Widgets). While this general relevance to all screen based controls, many of these are found in forms used in web pages.

Some of the issues include:

• Distinguish between required and optional data entry fields,
• Detect errors automatically,
• Minimise user data entry (important),
• Label data dentry fields clearly,
• Put labels close to data entry fields,
• Label pushbuttons clearly,
• Label data entry fields consistently,
• Allow users to see their entered data,
• Use a minimum of two radio buttons,
• Use checkboxes to enable multiple selections,
• Provide auto tabbing functionality,
• Do not make user entered codes case sensitive,
• Ensure that double clicking will not cause problems,
• Drop down lists can impact on user performance - use with caution.

Activity: Usable Form

CGI Scripts

As indicated earlier, CGI scripts provide a more sophisticated means for processing data collected by a form.

Castro, Chapter 16, pp. 263-268 provides a comprehensive introduction to this topic. If you are interested in CGI functionality, your text explains:

• what CGI scripts are and how they can be used;
• security issues associated with CGI's;
• how to prepare a script.

Castro also provides resources for CGI:

• a range of sites where you can download free scripts;
• scripts for download.

Putting it into practice

Top of page ^

© CDU | Last Updated April 5, 2006 | Authorised by: Head of School | CRICOS Provider No: 00300K