Web Development for Business

Lab 2 - how to create Forms in HTML

In this session you will learn about web forms, implemented in HTML

One - Functionality of a web form

Activity - Use the form below to to try out the different ways of entering information into a form. Make a note of the names of each one as you will use in your Web Applications. The type of each 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/or the way that you can change the shape of the box (drag in the corner)

Here is some checkboxs:

Here are some radio buttons:



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

Here is a list box/drop down box:

Two - Creating a form

Start a new HTML page called sampleform.html using Notepad++ (Windows) or TextWrangler (Mac)

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

<!DOCTYPE html>

<html>
<head>
<title>Form exercises</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 (depends on the browser).

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, so you either write

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

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. our PHP response 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">

The type of input device is indicated using the type attribute (types can be values such as password, checkbox or radio). Each form element must have a unique 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).

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

Name:

Radio buttons are added using "radio" in the type field. The following example would display two buttons

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

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

This would give

Is it Red

Is it Blue

Important: Note how the two Radio elements MUST have 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 be the same as the text in the form (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 whole select box has a name at the top ageselect. 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.

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

Activity - To your form 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 names and values to be returned

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="Text on the button">

The type of the button and name are a submit button, 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">

You will learn how to program responses to buttons in the next class.

Activity - Add a submit button at the end of the form

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.