CREATING FORMS
...........................................................................

Forms allow you to interact with or gather information from visitors to your site. You can have visitors take a survey, sign a guest book, or provide feedback on your site.

Forms have two parts: HTML source code describing the form (fields, labels & buttons) and a script or application to process the information submitted (CGI script). You must be sure that the server that your site is located has this CGI script available. (The cs. server at Rice does).

 

1. Process:Visitor completes form and submits it to a Web server for processing

2. CGI script processes the form
3. A new HTML document is created and sent to the visitor

You can use Dreamweaver to create a variety of form objects such as text fields, password fields, radio buttons, checkboxes, pop-up menus, or "clickable" images (such as a Submit button).

CGI Scripts

CGI Scripts (Common Gateway Interface) are scripts used to send information between a server and a processing script.

Form Objects

Form input types are called form objects. You can insert form objects by using the Objects panel;s Forms category, or by choosing Insert>Form and Insert>Form Objects.

Creating a Form

A form contains properties that are invisible to the user. The properties specify ow the form will be processed. A form consists of three basic parts:

  1. form tags, which include the URL of the CGI script that will process the form, and the method in which the data will be sent to a server
  2. form fields, which include text fields, menus, checkboxes, or radio buttons
  3. Submit button, which sends the data to the CGI script on the server.

To add a form to a document:

  1. Place the cursor where you want the form to be. In the objects panel's forms category, select the Insert Form Icon.
  2. In the document, click the form outline to select the form, if it isn't already selected.
  3. In the Property inspector's Form Name field, type a unique name to label the form.
  4. In the Action field, specify the path to the URL where the processing script or application that will process the form information resides. Type the following:
    http://riceinfo.rice.edu/cgi-bin/yamform?yourlogin@girltech.cs.rice.edu
  5. In the Method pop-up menu, choose POST.

Hidden Values: Creates the e-mail for your form.

YOUR TURN

Open the comment.htm file on the U drive in Dreamweaver to create a comment form for your website.

If you are at home, then open this link: comment.htm, view the source, select it, and paste it into the code view of Dreamweaver.

Change each item to suit your need.

Additional Resources

Rice University has a special program you can use to create forms for your website. It's called "yamform". Yamform, which stands for "Yet Another Mail Form", is a forms-handling program for use with World Wide Web forms. Further information on using "yamform" can be found at this link.

http://riceinfo.rice.edu/sw/yamform/

Click here to go to a sample page of "yamform" code, ready to copy-and-paste. Change the e-mail address to yours, and it will mail the results to you.

yamformcode.htm

Extra Bonus: At Rice, there is also a special companion to the "yamform", called "printform". It allows you to create a form which accepts input, then returns a form to the user's browser in HTML format, ready for printing. You would only want to use this where you have a situation that requires the submission of a printed form. You can find more details at

http://riceinfo.rice.edu/sw/printform/

Today's lesson uses this form.


These pages were made through TeacherTECH, the teacher professional development component of GirlTECH, which is sponsored by the Center for Excellence and Equity in Education (CEEE) with support from the National Science Foundation through EOT-PACI, RGK Foundation, the Verizon Foundation, Rice University, and HiPerSoft.

Copyright © June 2002 by