forms : 

getting information from the user

Forms are a way to transmit information from the web page to the server. For example, if you want to collect the name and email address from people at your web site, you would use a form to do this.

The form uses different input types (e.g. check boxes and pull down menus), to collect the information. When the user "submits" the form, that information is transferred to the server, where it is processed by a "CGI" program. This program may put the form data into a database, mail it to the site webmaster, or otherwise deal with the information.

Form elements are inserted into the web page via the Forms sub-palette of the Insert palette. You must first insert the Form itself using the icon in the left hand corner of the Forms palette. You will see a dashed red line that indicates the boundary of the form. Each form element (text entry field, buttons, etc.) must be inserted within the red form outline.

Each form element has a name and a value.

• name: The name assigned to the form element, for example "phone"
• value: The contents of the form element, for example "310.555.1212".

Some form elements also have a displayed name, for example the items in a list. For example, if you have a list of states, the user sees names like California and Colorado. But the value of those items in the list will be set to CA and CO respectively.

different ways for entering data

Refer to pages 168-171 of Elements of Web Design for more details about each form element

handling the contents of the form

As described above, a form transfers its information to a CGI program running on the server. The form has to specify the name and location of CGI program it will use. To do this, you need to put a special instruction in the form that points to the CGI program. In the Form Property Inspector, set the method to POST, and set the Action to:

http://mdpx.artcenter.edu/cgi-bin/pvaform.pl

The pvaform.pl CGI is a program on the MDP experimental server that will receive your form, and then create a new HTML page that displays the contents of your form. This CGI program, while not useful for any real application, allows you to see if your form is correct: if you named your fields properly, and if the values are correct.

in Dreamweaver

1. Select the Forms option of the Object palette
2. Click on the left icon, which will create the form (you'll see this as a dashed red line)
3. In the property inspector for the form, set the method to POST
4. For the this class, set the Action to http://mdpx.artcenter.edu/cgi-bin/pvaform.pl
   
   In the "real world" you would talk to your technical director, web master, programmer, or ISP for the correct CGI program to put in your form. It would typically be on the same server as your web page, and might look like this: /cgi-bin/process_form.pl
   
5. Inside the red dashed form box, add any form elements you want from the palette
6. For each element you add, give it an appropriate name, so the server knows what the element is for. DO NOT use the default names.
7. Set the default value(s) of the form element where appropriate
8. Be sure you include a button of the SUBMIT type
9. It is also traditional to include a button of the RESET type, which will allow the user to clear the form
10. Upload your file to the server and test

sources and info

To properly use forms on your website, you must use a CGI program on the web server. Your ISP may provide standard CGI programs or you may have a member of your development team who can set up a CGI program. As an alternative, there are many free forms handling CGI programs available for free on the Internet. Here are some links:

Matt's Script Archive for lots of free scripts. Check out FormMail.pl in particular.

http://www.worldwidemart.com/scripts/

Another of Matt Wright's sites:

http://www.cgi-resources.com/

WebMonkey article on using free CGI scripts.

http://hotwired.lycos.com/webmonkey/99/26/index4a.html?tw=programming

software to process a form and send the results to the webmaster as email

FormMail.pl is a very popular free CGI program for processing forms, as noted above. It receives the contents of the form, formats it, and then sends it to a specified email address. The program relies on hidden fields to specify where the contents of the form are emailed, as well as other configurations including the subject of the email, the return email address, etc.

Here is a form set up for using FormMail.pl with many of the normally hidden fields "exposed" so you can see how it works (note: due to security restrictions, no email will be sent and this example actually uses pvaform.pl to show what how you set up the form). If this were set up to work for real, the Action of the form would typically be set to (the case of the letters is important!):

/cgi-bin/FormMail.pl

A few companies offer free forms handling. You simply configure your form in the right way, and use a form handling CGI program on their server (rather than the server where your page resides). This is beneficial when your server doesn't have CGI capability. A good example of this service is: Response-O-Matic who can be found at:

http://www.response-o-matic.com/

The only downside to this free service is that after the user submits their form, they see an advertisement.

This service (like most automatic form CGI programs such as FormMail.pl) use hidden fields to specify how the form will work. In fact, Response-O-Matic.com uses FormMail.pl with minor modifications.

The Action of the form should be set to:

http://www.response-o-matic.com/cgi-bin/rom.pl

Fill in this form, and you will see how it works.

Create a page that has a form similar to the forms_example.html example:

• The fields should have different names and values than the example
• You must include each of the 6 different form elements as outlined in the week 14 notes
• Include a submit and reset button
• The form should be formatted in a table.
• Use /cgi-bin/pvaform.pl for the POST method of the form
• Do not copy the HTML from the example page - you will not get credit if you do this.

Optionally, make your form assignment with hidden fields and set the POST URL to make it work with response-o-matic.

Due at end of class or week 14

all materials on this web site © copyright 2003, Philip van Allen