forms
     <Site Index
 
Forms are one way to make your web page dynamic. They allow the user to input information and to send/receive feedback from the web site. Forms can be used for all sorts of purposes.
  • Guestbooks Feedback about the web site
  • Orders if the web site sells goods or services
  • Memberships or information about accounts
Examples of forms on this site - all are fully working and you can input into them and get a response!
  • Feedback Form example from an old web site - not working now
  • Request for help a typical help request form Fully working
  • Test Form - a simple test form to illustrate validation and required fields
  • Membership request - this is not enabled, but is designed to inteface with a MySQL database of software being developed
  • Guestbook Form - this one is provided externally by Guestbook.com - don't try to add to it as LSW no longer operates!

The form itself will be made in Dreamweaver but the interactive part needs to be handled by a script.

From Dreamweaver 'Help'

When a visitor enters information into a website form and clicks the submit button, the information is sent to the server where a server-side script or application processes it. The server responds by sending requested information back to the user, or performing some action based on the forms contents. Typically, the information is processed by a Common Gateway Interface (GGI) script, ColdFusion page, JavaServer Page (JSP), or Active Server Page (ASP). Note that you can’t collect form data without using a server-side script or application to process the data.


Making the form in Dreamweaver - Stage 1 Making the form in the editor

(1) Open the Forms option on the Insert Bar (Dreamweaver 4 - open Options Panel/Forms)

  • First you make an HTML page containing the layout of the form.
  • The Insert Bar (Options Panel) has a Forms tab containing all the form elements you need as you as you design your page


(2) Insert the blank form onto your HTML page.

Click on the Form icon.
Set the form attributes in Property Inspector

  • Method - this controls how entered information is sent to server - select POST
    Default uses the browser's default setting to send the form data to the server. The default is the GET method.
  • Action - this specifies where the form data will be sent. This is usually the URL of a script on the server
    eg "http://www.learnsouthwest.co.uk/cgi-bin/FormMail.pl"

 

(3) Insert the elements you need to make up your form.

  • A single line text field - user enters info (name etc) into it. By default this is single line, but can be altered to multi line in the Property Inspector. Here you can also set the width of the box.

 

  • A multi line text area. This is a text field where the user can enter several lines of text. Default is multi-line. You set the number of lines and width of box in Property Inspector. It can be altered to single line.

 

  • A check box. The user ticks the box as in the example below. The initial state can be checked or unchecked, as in the example below. It inserts a tick when selected by user. In the Property Inspector you will need to insert what you want the box to return when selected. Do this by entering information in the 'Checked Value' box. The user can select more than one box.

 

How did you hear of us?

On the Internet From a friend From a magazine Other

 

 

 

A radio button is the same as a check box, except that a black button is inserted when selected by user. Format in the same way as for a check box.

The user can select only one button.

On the Internet From a friend From a magazine Other

  • A radio group allows the insertion of a number of options involving buttons for the user to select. The labels and values to be returned when the form is submitted are inserted using the Property Inspector.

 

  • A jump menu is a List/Menu that creates a menu that opens by jumping up or down to reveal options. You cannot set height with a menu. The values that will be returned for the menu are set in the Property Inspector in 'List Values'.

 

  • A list menu is generally used where the options are open to see in a multi-line box.

Making the form in Dreamweaver - Stage 2 Making the form work interactively

 

For the form to work the computer must know where to send the form to be processed.

This will be done by using a script
These are usually written in another language, commonly Perl. Scripts can be written! - or obtained free from a number of sources! The script will need to be customised and then placed on the server, usually in a folder called cgi-bin

  • The form is selected and the destination typed into the Property Inspector in action

    eg "http://www.learnsouthwest.co.uk/cgi-bin/FormMail.pl"

 

Action Buttons

Buttons are used to initiate action. Use the Button icon on the Forms bar.

The two essential buttons are a Submit and a Reset button


Submit sends the form for processing.

Reset starts off again with a blank form.

You can personalise the text on the button by filling in the 'Label' in the Property Inspector

You can only have one Submit button per form.

If however you place another button outside the form and assign a behaviour to it, the user can be redirected to a particular page once they have finished.

 

(3) Hidden Fields - these are used to specify other actions. You can have several of these.

  • e-mail target - admin@learnsouthwest.co.uk" - this tells the form where to send the results
  • Subject line of e-mail - Suggestions and Comments"

You can see these set out below , but only if you look at this page in an editor