Internet Programming I

Forms and functions

Assignment 3

Due: October 3, 2006

Ordinary html documents display information on a web page. This page can be downloaded from a server somewhere, or it can reside on the local computer. In either case, it will be displayed by the browser on the local computer. This works very well for web pages that are just used to supply information, and that includes a great many. However, in some cases, the server needs to collect information from the user and then send back some results.

This is done in html using forms. Chances are you have already used some forms when buying items on the Internet or even registering for classes. After a form is filled out by the user, it can be submitted to the server to be processed. We will learn how to do this in a later assignment. For now we will use these forms to collect data and do something with it. The following is an example of an html page containing a form.

1. Use JCreator to make a web page with this form. Type it in and see what it looks like in a browser. Note that nothing happens when you click on the button.

The most important tags in a form are input tags. They have all their information in a single tag and do not have closing tags. (When there is no closing tag, a slash is added to the end of the tag.) The different pieces inside are called attributes. The ones that we will need are name, type, value, and size. The values of attributes are always enclosed by quotation marks.

2. A text field is a box that can either be used to collect data from the user or display something. As its name indicates, it contains text. Text consists of characters, such as letters, numbers or punctuation marks. Even though the numbers look like normal numbers, they are actually codes for numbers. For example, 0 has the code 48, 1 has the code 49, and 2 has the code 50. (Also A has the code 65, B – 66, C – 67, etc.)

When creating forms, give text fields names that will help you remember what they are to be used for. A text field has the type, "text". The value attribute is used to place some initial text in the box. We can leave that empty. If you leave out the size, it will automatically make the box 20 characters long.

It is helpful to label text fields in some way. This can be done by placing titles before or after the <input> tag. You can also add other information to let users know what they are expected to do with the form.

3. Buttons have similar attributes. As before, the type attribute says that it is a button, while the value attribute defines what will be displayed on the button. The size will be whatever is required to display the value.

4. If you click on the button here, nothing will happen. In order to make something occur, we have to provide a program for the button. This can be done with a Javascript function. In the previous Date example the functions month, date, and year were already defined. When there isn’t a built-in function, it has to be written by the programmer.

5. In order to be able to use a function, a button has to have another attribute called an event handler. This one is onClick. It is used to define what function will be run when the button is clicked. So the line for the button becomes

Writing the function, calculateTax (), is the next job.

6. What we have to do is to get the price from its box, multiply this number by the sales tax, and then place the result in the box for the tax. The first problem is to get the price. It is in the box with the rather long name of document.taxForm.price. We want the value stored there. But the value is a string of characters, not a number. To make it into a number, we can use the built in eval function. eval (document.taxForm.price.value) is the number that corresponds to the characters entered into the box. Placing the result into the tax box is done similarly, with document.taxForm.tax.value = tax. This latter says that the value of the tax should be stored in the tax box in the form named taxForm. Altogether then we have the following html document.

<html>
<head>
       <title>Form Example</title>
<script language="Javascript">
       
</script>

</head>
<body>
<form name = "taxForm">
       <input name="price" type="text" value="" size = "10" /> Price < br />
       <input name="tax" type="text" value="" size = "10" />Tax
       <p><input type="button" value="Calculate Tax" onClick="calculateTax ()" /></p>
</form>
</body>
</html>

Type this html document in and then open it in a browser. Test it with several different values for the price, such as 10, 20, and 30.

7. Now create another web page with a form that can be used to do some calculation. You can go from Fahrenheit to Celsius, from miles to kilometers, from a value in dollars to one in euros, etc. You should change names so that they are meaningful for the new calculation. For example, if you are changing miles into kilometers, you could call the form conversionForm and the function calculateKilometers.

8. Zip up your new web page and send it to me.