Forms

Back to Index

Documents that allow and encourage feedback and interaction are increasingly important parts of web documents. Forms are a good example of this evolution.

Forms use the tags <Form>, <Input>, <Textarea>, <Select> and <Option>.

In the examples below you will see what effect different <input type=...> have. "Text", "Submit Value", "Reset Value", "Radio" and "Checkbox" are types of input. Another type of form allows users to select from a pop-up list of options using the <select> tag.

You can use your Document Source function in the View menu to look at the source of this HTML document

Make a feedback form by typing the following in your word processor.

<html>

<head>

<title> Feedback </title>

</head>

<body>

<h2> Please take a little time to complete this form </h2>

<hr>

<Form Method="Post">

Your Full Name: <INPUT TYPE="text" NAME="name" MAXLENGTH=50 >

<BR>

Postal Address: <TEXTAREA NAME="postal" ROWS=3 COLS=50 > </TEXTAREA>

<BR>

Email Address: <INPUT TYPE="text" NAME="email" MAXLENGTH=50 > <BR>

Any Comments:

<TEXTAREA NAME="Any Comments" ROWS=3 COLS=50 > </TEXTAREA> <BR>

<hr>

<select name="feedback">

<option selected> No more HTML!

<option> Include me in the current HTML course

<option> Include me in the next HTML course

<option> Include me in next semester's HTML course

<option> No more HTML for me!

</select><p>

<hr>

<INPUT TYPE=submit value="Submit feedback now"<p>

<INPUT TYPE=reset value="Reset this form"<p>

</FORM>

<address> user.name@mq.edu.au</address>

</body>

</html>

Save it as a text file "Forms.htm" in the directory "Forms" and open it with your browser.

Forms like this are used to collect the information that is typed in. To do this a another program on the server is made use of. This is called the "Common Gateway Interface" or "CGI". It is the cgi that allows for interaction or two way communication.

Have a look at the other example "webq.html" in the "Forms" directory.

This uses radio buttons where turning one on turns the other(s) off

<INPUT TYPE="radio" NAME="Question2" VALUE="yes"> Yes

<INPUT TYPE="radio" NAME="Question2" VALUE="no"> No

It also uses checkboxes which can be checked in any combination

<INPUT TYPE="checkbox" NAME="Question3"

VALUE="Amiga"> Amiga

<INPUT TYPE="checkbox" NAME="Question3"

VALUE="MacOS"> MacOS

<INPUT TYPE="checkbox" NAME="Question3" VALUE="UNIX"> UNIX

<INPUT TYPE="checkbox" NAME="Question3" VALUE="Win95"> Win95


Look at these examples of Forms

  1. Form 1
  2. Form 2
Return to top of page