Exercise 5 - WWW forms

In the following exercises you will make a www form that can be used for surveying TV watching habits. Different properties of the forms will be tested so you should think of every field: Could it be done in a better way? Lecture 8 gives some ideas and hints.

Copy this HTML code and use it as a base for your form page. The elements that are defined in the exercises belong inside the form elemet. Note that the following is already defined:

The programme that processes the data from the form is defined in the action attribute. You will use the same programme in the assignment!
The data from the form is sent by the post method.

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
<title>Example form</title>
</head>
<body>
<h1></h1>
<form action="http://appro.mit.jyu.fi/cgi-bin/laheta/laheta.cgi" 
  method="post">

</form>
</body>
</html>

Create six single lined text fields (text) for asking the user's
- name
- address
- town
- postal code (Maximum length of five characters)
- phone number
- e-mail
Use the label element as a title for the fields and connect label and the field!
Save and validate the form page before continuing.
Use radiobutton for asking the gender of the user (radio). The options are for example:
- Won't tell
- Male
- Female
Use the browser to check if the button works. If you are able to select more than one button at a time check the values of the name attribute!
Ask the age of the user using a radiobutton (radio). The options are for example:
- < 20 years
- 20 - 30 years
- 30 - 40 years
- 40 - 50 years
- 50 - 60 years
- > 60 years
Are there other possibilities for asking the age? What are they and how do they work from the user's point of view?
Ask the marital status using a checkbox (checkbox). The options are for example:
- single
- married
- widow
- separated
Are there other possibilities for asking the marital status? What kind of problems the checkbox brings?
Set one element from the checkbox as a default (checked).
Ask the language skills by a checkbox (checkbox). The options are for example:
- Finnish
- Swedish
- English
- German
- Russian
- French
- Other
Ask the education by using a select box (select). For options use for example:
- elementary school or common school
- senior high
- vocational school
- university
Then put a submit button on the form (submit) and test its function. If the form works as it is supposed to, you will after submitting the form see a page that thanks for ordering and lists the names and values of all the submitted fields.
For asking the times the user watches TV use multiple select box (multiple) (select). The options are for example:
- small hours (1-6)
- morning (6-10)
- forenoon (10-12)
- afternoon (12-17)
- evening (17-21)
- night (21-01)
Set one of the options as a default (selected).
Ask the favorite programme by a select box (select). For separating the programmes on different channels use the optgroup element. Use different browsers to see how optgroup works. Use for example the following options:
- TV1
  - Jeeves and Wooster
  - Frasier
  - Avara luonto
- TV2
  - Keski-Suomen uutiset
  - Teletubbies
  - Pikku Kakkonen
- MTV3
  - The bold and the Beautiful
  - ER
  - Napakymppi
Put a multiple lined text field to the end (textarea) for comments on the enquiry.
Try the form and make sure all the values of the fields appear correctly on the thanks page. The data from the form is also sent to you by e-mail so check your inbox between the tasks.
Group the questions using the fieldset element and set titles for the groups using the legend element. Put the personal details to a distinct group, for instance.
Now you will edit the the function of the programme that processes the data by using the following properties of hidden fields (hidden). Try the form after every change you make. More spesific instructions are available in the cgi instructions.
- For the e-mail address where the data is sent set your own address (name="lomake_email" value="oma_sahköposti@palvelin.fi").
- Write a title for the thanks page (lomake_title).
- Write the heading (h1 element) for the thanks page (lomake_h1).
- Write a text for the first p element of the page (lomake_p_alku).
- Carefully check that the definitions above work and take a look at the source of the thanks page.
- For the stylesheet in use on the thanks page, set the css file you made last time (lomake_stylesheet).
- Try changing the thanks page to another page but reverse the definition right after (lomake_URL).
- Change the value of the name attribute of the email field to lomake_lahettaja (sender of the form). Also change the value of the name attribute of the ja nimi field (nimi = name) to lahettajan_nimi (name of the sender).
  This means that when the user fills these fields the information is shown in the Form field of the e-mail and the data from the form is also sent to the user.
Validate your form.
Check the accessibility by Bobby.

Additional exercises

Define a different tabulation order for the fields by the tabindex attribute and use different browsers to see how it works.
Define accesskeys to the titles of the fields using the accesskey property. Again test the function in different browsers.
Format the appearance of the form using the stylesheet and look at the appearance in different browsers.

http://appro.mit.jyu.fi/2001/syksy/tietoverkot/demot/demo5/index.html