Using Interactive Forms

HTML Forms allow you to interact with visitors to your site. You can get information from them, process it, and send information back based on what the visitor enters. Forms can be used for guest books, Web page-based email, order forms, information requests - and much more.

The data sent from most Forms is processed on a server by a CGI Script. Click here to learn some basics about scripts. If you don't plan to program your own Scripts, you can also acquire pre-written Scripts for nearly every Form processing task there is. Click here for a partial list of sites that offer pre-written Scripts.

For this tutorial, let's create a real life example that doesn't use a Script so you can see how to set up a Form and get an idea of where to go from there:

Creating Your First Form

We want to create a Form to allow visitors to leave their email address so they can receive a notification when our Web site is updated. The information they enter will be emailed to us from the Form. We'll also provide a place in the same Form where visitors can enter comments about our site.

These 'places' where users can enter data are called Form Elements. There are several Form Elements available in HTML. Examples of each are shown below:

For our Form we'll use two Text Boxes, one Scrolling Text Box, and one Push Button. The step-by-step instructions for creating the Form follow:

Step 1: Create a new Web page with a white background.

• Type "Enter Your Name & Email Address If You'd Like To Notified When This Site is Updated.", then press the 'Enter' key twice.

• Select 'Show Form Tools' from the WebExpress 'View' menu. The Forms Toolbar will appear as reproduced below. Here is an explanation of each tool:

The Forms Toolbar

From left to right: Insert Form Tool: Used to insert a Form at the current cursor position on a Web page. When you click this button, a dotted box will be drawn on your Web page. This box represents your Form, and everything inside of it is considered part of the Form. Clear Form Tool: Use this tool to shrink the form to the current cursor position, vertically. If there is nothing inside of the Form, this button will delete the Form from the page. Text Box Tool: Inserts a Text Box or Scrolling Text Box at the current cursor position. Check Box Tool: Inserts a Check Box at the current cursor position. Radio Button Tool: Inserts a Radio Button at the current cursor position. List Box Tool: Inserts a List Box at the current cursor position. Push Button Tool: Inserts a Push Button at the current cursor position.

Step 2: Click the Insert Form Tool on the Forms Toolbar. The outline of the Form will appear on your page as shown below:

Step 3: Make sure the cursor is flashing inside of the Form outline, then select 'Form Properties' from the WebExpress 'Edit' menu.

The Form Properties dialog window will appear. In this dialog you'll enter information about how your form should be processed.

The 'Action:' field you see here should contain the action the browser is to take when your Form's Submit button is pressed. The 'Method' field tells the browser how the Form data is to be sent (usually using the POST method).

Normally in the 'Action:' field of this dialog you'd enter a URL to a CGI Script on your server, but for our purposes we'll use a simple mailto: tag.

• In the 'Action:' text box, enter "mailto:[your email address]", replacing the words "your email address" with your actual email address, of course.

• In the 'Method' text box, enter the word "POST"

• Click 'OK'.

Step 4: Now we'll create the input Elements where a visitor can enter the data we want. Remember, we'll have to give each Element a Name as we create it.

Still keeping the cursor inside of the Form outline:

• Type the text "Your Name: ". This will be the prompt that appears in front of the first Element we insert.

• Press 'Shift + Enter' to create a new line, then click the Text Box Tool once.

• A Text Box Properties dialog window will appear asking you to Name the new Text Box. Enter "VisitorsName" (no spaces are allowed in Element Names!) as the new Text Box's Name and click 'Okay'.

• When the Text Box Dialog window disappears, press your 'Enter' key to create a new paragraph within the Form.

• Now type "Email Address: ", press 'Shift + Enter', click the Text Box Tool again, name this Text Box "VisitorsEmail", click 'Okay', and hit 'Enter' again.

• Type "Your Comment: " on the current line.

• Press 'Shift + Enter'.

• Click the Text Box Tool again. In the Text Box Properties window name this Text Box "VisitorsComment".
  • Also in the Text Box Properties window, change the 'Number Of Lines' field to "4". This will make the Text Box higher and allow the user to enter multiple lines of text into it.
    
    
  • Change the 'Width In Characters' field to "30". This will make the Text Box wider on the screen.
    
    
  • To turn Word Wrap on in your Scrolling Text Box (much more comfortable for users to type into) see the Advanced Section by clicking here.
    
    
  • Click 'OK', and hit 'Enter' again to create a new paragraph.

• Finally, on the Form Tools toolbar, click on the Push Button Tool. In the Push Button Dialog window that appears enter "PushButton" as the button's name, and "Send Me!" as the button's Value. Click 'OK'.

You should now have the following Form on your Web page:

Now save the page with the Form on it, then use the WebExpress 'View' menu to load and display the page in your browser. Enter information into the Form and press the 'Send It!' button. After a possible warning message from your browser (it may warn of the security hazard created by sending Forms in the clear via email), the Form contents will be emailed to you by your browser!

When the email arrives, you see that the data entered into the Form appears all on one line and encoded, and each bit of data has its name in front of it. A CGI Script could format the data in a more readable format.

Note: This should be enough to get you started, though it is by no means an exhaustive tutorial! Look up other resources and examples, the more you see the more the logic behind Forms will become clear.