back to the Agenda | Assignment #6

Making Pages Interactive



Many pages on the web have buttons to click, textboxes for fill, menus to choose from. This functionality can be written using either HTML forms or Java Applets. If HTML is used, a separate language (like Java Script) must be used to process the information in the form. Below you will find examples of each type of form element. Looking at the source will give you the code for creating that element.

Inputting Text

This is a textfield named nickname, 35 characters wide (the default is 20), and is filled initially with the warning,"Do NOT enter your nickname". We will learn in JavaScript how to process information entered in forms.

This is a password field. When you type in it, it shows bullets rather than the letters you typed. Notice in the code that it has a maxlength property that will not allow yot to type more than 5 characters.

This input space is called a text area. You can specify the visible size by using rows= and cols=. You would generally want the text typed into the box to wrap. Be sure to use the /textarea tag.

Making Choices

Programming for the Internet
C++1
C++2
Java 1
Java 2

Above is a selection construct called "radio buttons". Click on one of the selections and a dot appears before it. If you click on another one, the dot disappears from the first. This insures that only one choice can be made. If you want one of the choices to be the default, checked is added within the input tag. If you wanted to ask a question that has more than one answer, you would use the check box construct below.

Programming for the Internet
C++1
C++2
Java 1
Java 2


Notice when you click on one of the boxes, the check remains. You can remove it my clicking on it again.

To create a drop-down menu, you use the the "select" type. Like the textarea above, you have both a begin and /end tag. Each option has a value and the one to be displayed has the word "selected" included in the option tag.



Clicking Buttons

Finally, you can place buttons on your page. They can be used to submit the information on the page or reset the page (return the form to its original state). The first button below will create a message and the second will reset the form. Notice that they are in a table to allow you to organize/space them. If you are making a more complicated form, using a table will keep all the different components of the form in a grid, regardless of the size of the browser window.


Assignment 6

For this assignment, choose a topic from your special interests mentioned on your page 2 or 3, and create a questionaire or survey. Use at least three of the special input elements from forms. There should be places to enter text, choices and a reset button. Save this page as a6.htm and link it to your third page by putting a link on an invitation to take the survey.