Let's Make Forms!

Click HERE for a sample form. Try it (!):

Open a new file in Dreamweaver. Save it as form1.htm.

Write the following. This is my first form.

From the Insert menu, choose Form. This tells Dreamweaver that you would like to begin a form. You should see a thin, red, dotted-line box on the screen. If not, go to the View men, to Visual Aids, to Invisible Elements. Look down at the Properties box. It should look like this:

You can name the form whatever you want. For now, leave it as is. You may also leave the rest of the information, but the following must be pasted (or typed!) into Action:

http://cuip.uchicago.edu/cgi-bin/CGI-Perl-cookbook/FormHandler/FormHandler.pl

Next,experiment with form objects. Make sure the cursor remains inside the red dotted line box that appeared when you inserted the Form. Begin by choosing a text field. (From the Insert menu, choose Form Objects, text field. Then type your name next to it. Note that the order of the form object with text does not matter. For example:

Add a Textarea. From the Insert menu, choose Form Objects, textarea. For example:

Add a List/Menu item. From the Insert menu, choose Form Objects, List/Menu. For example:

Finally (for now), add some buttons. From the Insert menu, choose Form Objects, button. The button name will default to submit. The label will also default to submit. The action will default to Submit form. Next, add a reset button. From the Insert menu, choose Form Objects, button. This time, change the button name to reset, and change the action to Reset form. The label will change automatically.

Save your form.

Now for the fun part. Place your cursor in front of the submit button. Click the code view button in Dreamweaver. Yikes! You should see the following code:

<input type="submit" name="Submit" value="Submit">
<input name="Reset" type="reset" id="Reset" value="Reset">

Right above this text, add the following:

<input type="hidden" name="recipient" value="youremailaddress@yourserviceprovider">
<input type="hidden" name="subject" value="Forms Practice">

You must add your own email address for the value in the first line. You also can change the value in the second line to fit the form you are making (e.g., "Activity 1 Response").

Finally, you must insert a text field somewhere in the document with a value of "noemail@cuip.uchicago.edu" or "youremailaddress@yourserviceprovider". The script that we are using requires an email address in order for the form to be sent.

To do this, choose Insert, Form Objects, Text Field. The following will appear in the Properties Box:

Since the script requires an email address, you need an initial value. The WIT 2002 site, for example, uses: noemail@cuip.uchicago.edu for the initial value. You also need to change the text field to email. The property box should look as follows:

You can add a note to the web page saying that your email address is optional. Or, if it is your students using the form, then you may tell them that their work will not be graded if no address is entered. It depends on how you plan to use the form.

Save the file. Upload it into your server space.

The contents of the Web Institute for Teachers website are Copyright 1999-2003, University of Chicago. No one may print, copy, or otherwise reproduce these materials without the express written permission of the Director of the Web Institute for Teachers.

The current time is September 05, 2008, 4:54 pm, CDT. This page was last updated at 10:10 am 2003n July 30, 2003. It has had 375970 visitors.

Please use the Feedback button to tell us how you like this page.