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.

• Insert Form inserts a form in the document. Check out the source code to see what is happening.
• Insert Text Field inserts a text field in a form. Text fields accept any type of text, alphabetic, or numberic entries. The entered text can be displayed as a single line, as multiple lines, or a s bullets or asterisks.
• Insert Button inserts a text button in a form. Buttons perform tasks when clicked, such as submitting or resetting forms. You can add a custom name or label for a button, or use one of the predefined labels--Submit or Reset.
• Insert Checkbox inserts a checkbox in form. Checkboxes allow multiple responses in a single group of options, a user can select as many options as apply.
• Insert Radio Button inserts a radio button in a form. Radio buttons represent exclusive choices. Selecting a button within a group deselects all others in the group, for example a user can select Yes or No.
• Insert Lists/Menus allows you to create user choices in a list. The List option displays the option values in a scrolling list and allows users to select multiple options in the list. The Menu option displays the option values in a drop-down list and allows users to select only a single choice.

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:

Place the cursor where you want the form to be. In the objects panel's forms category, select the Insert Form Icon. In the document, click the form outline to select the form, if it isn't already selected. In the Property inspector's Form Name field, type a unique name to label the form. 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 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