eScience Lectures Notes : .

Slide 1 : 1/1: COMP1710 : Laboratory 4

COMP1710: Laboratory 4

Tables and Forms

Objectives

In this lab, you will add a HTML table to your Xanga page, with some associated style, and then produce a nicely formatted HTML form.

Tasks

Task 1: Review Tables and Forms

Access the online lecture notes on HTML tables and forms.

It is time to start thinking more seriously about your goals for your Xanga page. So, to get you started, read about scope creep.

Task 2: Create a table

Add a table to your Xanga page, by adding HTML to your Xanga "look and feel" section. Its structure should looks like this:

Make sure you enter data related to the subject of the table (GAC). The first row and the first column should be filled with header cells. There can be as many Goal or Audience or Content rows as you like, but there should be at least two rows of each (you can leave one empty if you have nothing to put in the row).

Task 3: Style the table

Have a look at the description of CSS for Tables, by the W3c.

Style your table with CSS that will change and improve the look and feel of the table.

The minimum requirements are the following.

• The Caption should be set at the bottom of the table, in italics
• The borders of the cells should be visible
• The Header cells should have a different background colour from the other cells
• The table should be horizontally centred on the page (do not use the old, deprecated <CENTER> html tag).
• There should be 10% margin on both sides.
• Note that the first two columns are not very large: they leave room for the third one.
• Make at least one more change / improvement in the look of the table.

Task 4: Create a form

Have a look at Basic Forms by Ross Shannon

Create a page with a form that should ask for some feedback about a product of your choice.

The minimum form fields to be filled by the user of the form will be

• Personal Name and Family Name (2 text fields)
• A mark between 1 and 5 of what they think of the quality of the product (one possible mark selected at a time, of course). The mark three should be selected by default. (they have to tick their choice).
• A selection of different quality of the product. The user should have the ability to indicate none, one or more comments on the products quality from a list of 5 options.
• A selection of places where the user has been able to get information from the product (multiple selection possible). It should looks like something like this :
• A text area (4 to 6 lines) where the user will be able to enter some general feedback about the product.
• A hidden field that will code the IDnumber of  the product

The table should of course come with the usual Submit and Erase all buttons.

You will test your form with a mailto action, to yourself. Make sure that everything is working when you test it. Once its working perfectly, paste in a copy of the contents of the e-mail into an event on your Xanga page for today's lab

Since you now know how to use CSS, make the form attractive (hint: you could have the components in a table).

Note:

<form action="mailto:u1234567@anu.edu.au" method="post" ENCTYPE="text/plain">

works well to send by mail. In this case, you need the enctype attribute to make sure that all the fields will be put into the same text, otherwise, only the first field appears in your mail. (Replace u1234567 by your own ANU e-mail address.)

By the way:

<form action=http://escience.anu.edu.au/lecture/comp1710/HTML2/form.cgi method=post>

is enough to send to any CGI script.

<form action=http://escience.anu.edu.au/lecture/comp1710/HTML2/form.cgi method=post enctype=application/x-www-form-urlencoded>

will work too, but there is no need to specify the enctype for a script type submission

Task 5: Update your learning journal/events

This task is most easily done in parallel with the other tasks.

Your learning journal talks about your thoughts about what you've learnt.

Please don't forget to create an event for today's lab which gives a brief description of what you've done.