Lab 2 - Web Scripting

This is the 2nd laboratory session. In this session you will learn about web forms, implemented in HTML.

One - Functionality of a web form

Activity

Bring this page up in a web browser to see how a web form works.

Use the form below to identify the different ways of entering information into a form. The name of each type is written in italics

Here is a text field:

Here is a text field which looks like a password:

Here is a large text area, type several lines - notice the scroll bars:

Here is a checkbox:

Here are some radio buttons:

value 1
value 2

Note how you can only select a single value from the radio buttons.

Here is a list box:

Most forms have a button so here is a button (that doesn't do anything):

Two - Creating a form

Activity

Start a new HTML page called sampleform.html using an appropriate editor.

Set up a head and body section as normal (so it looks like the following):

<html>
<head>
<title>ITB Lab 7</title>
</head>
<body>

</body>
</html>

To add a form elements to a page, the entire form must be wrapped in a pair of <form></form> tags.

Any form elements placed outside a form tag may not display and will certainly not function correctly (although this actually depends on the browser).

Activity

In the body of your page add the <form> tags:

<body>
<form name="example" method="post" action="">


</form>
</body>

Each form must have a distinct name specified using the name attribute. The method attribute indicates how the information in the page will be transmitted:

method="get"

or

method="post"

Activity

Do a search using Google for HTML. Examine the URL of the page that is generated. It should be something like:

http://www.google.com/search?hl=en&ie=UTF-8&oe=UTF-8&q=html&btnG=Google+Search

The form data is transmitted to the 'next' page visibly through the URL. Although this is a complex search string, you should be able to see the country language code, the language encoding and the search term buried after the page URL.

GET encoding is handled automatically by the browser and normally wraps the data items in this style:

URL?attribute=value

& attribute=value & etc.

The attributes are generated by the names used within the form - so a hypothetical search for a female student with KUid K00990099 could be formed into:

http://myexample.com?KUid=00990099&gender=female

A GET encoded URL can be bookmarked (although there is no guarantee that the page generated will be the same next time).

POST encoding 'hides' the parameters in the HTTP protocol (the transmission that occurs between the browser client and the web server). The data is not visible to the user and creates a URL that if bookmarked may request the page without the 'hidden' data.

This will be covered in more detail in a lecture.

The action attribute can indicate where the data should be sent (which is typically the 'next' page which processes the data to produce some output, i.e the Google results page.

Leave the action attribute blank for the moment.

Three - Adding "input" elements to the form

Input fields are added to the form using the <input type="type"> tag.

An example to enter a first name would be:

Please enter date:<input type="text" name="entereddate"> <br />

The type of input device is indicated using the type attribute (other types examples are password, checkbox and radio). Each form element must have a distinct name (in this example the text field is given the name "entereddate").

Other attributes can also be set, such as size, default values, no of rows etc. (See Chapter 9 of HTML & XHTML by Musciano for a table which shows which attributes can be used with which element type).

To make each form element appear on a new line use a break tag at the end of every form line: <br />

Activity

Add a Name field to your form so that it will look like this:

Name:

Radio buttons are added using "radio" as the type parameter to the type attribute. The following example would display two

Is it Red<input type="radio" name="colour" value="Red"> <br />

Is it Blue<input type="radio" name="colour" value="Blue" checked > <br />

This would give

Is it Red

Is it Blue

Note how there are several Radio elements sharing the same name - the browser uses this information to determine that only one from each group of radio boxes can be selected. The returned value (i.e. the value of the box that has been selected) does not have to match the accompanying text (see the value attribute which is a string indicating the colour).

The "checked" keyword next to the "Blue" radio box indicates that this would be the default initial value.

Activity

Add a Gender field with the choices Male and Female. Use sensible names and make one of them a default value by inserting the checked keyword.

Four - Adding a select box

A select box offers a drop down list from which options can be chosen - example:

Age:

Here is the code to produce this effect:

<select name="ageselect" size="1">
<option value="1">10-17</option>
<option value="2">18-23</option>
<option value="3">24-50</option>
<option value="4">51-80</option>
<option value="5">81+</option>
</select>

The select box is indicated by the <select></select> tags. Note how the select box must have a distinct name. size="1" indicates how many of the options will be visible on screen at a time.

The available options are indicated by <option></option> tags. The value attribute indicates the value that will be returned if the item is selected (again note how the displayed text can be different).

If no value attribute is specified the text value between the <option></option> pair is returned as a string.

Activity

Add an annual income field that will display the values "Under 15000", "Between 15000 and 20000", "Between 20001 and 24000" and "Greater than 24001". Choose sensible name and return values (which can be strings)

Five - Adding a Button

There are standard buttons available for web forms, such as reset (which sets all the form elements back to their initial state), and submit (which causes the form elements to be processed in some way).

<input type="submit" name="Submit" value="my lable">

The type of the button and name are indicated as normal, value is the text to be displayed on the front of the button.

The action that will be performed when the submit button is selected is often indicated at the top of the form in the action attribute of the form tag:

<form name="example" method="post" action="some action indicated here">

Responses to buttons are programmed using client side scripting (typically with Javascript) or with a server side script (in a language such as PHP).

Activity

Add a submit button at the end of the form

Six - Processing the form information

We will be processing the form using PHP and either _GET or _POST to pull the values forward to the response page.

Remember that this requires TWO pages - one HTML page (that may have some PHP in it, but may not) and one PHP response page.

The response page should be the one named in the top part of the form in the form element

Remember that to get this working on the university system you will have o upload it to the student web server.

Activity

- Try to create a PHP response page that retrieves and prints the values out

References

Most of the work in this exercise is discussed in detail in HTML & XHTML by Musciano (O'Reilly). Any decent HTML book will cover this material in chapters on Forms and Form creation. Use Google to find on-line tutorials on Forms and HTML.

The W3C has pages indicating the correct tags and valid form attributes.