Forms: Advanced Topics

The Text Box Form Element

When you create a Text Box you can specify various properties for it in the Text Box Properties dialog window. They are:

• Name: The name of the Text Box. This name will be referred to in and CGI Script that needs to access the data from the Text Box.
  
  
• Value: Pre-entered text that will be displayed in the Text Box when your Form is loaded.
  
  
• Width In Characters: How wide the Text Box will appear on the screen.
  
  
• Maximum Characters: The number entered here determines how many characters a user can type into the Text Box. If the number is "8", for example, no more than 8 characters will be allowed in the Text Box.
  
  
• Password Field: If this option is selected, users will see only the asterisk ("*") character when the type in the Text Box, even though the actual characters they type will be the ones used when the Form is processed. This feature exists to help protect passwords from being spotted by someone looking over the user's shoulder!
  
  
• See also Scrolling Text Box, which uses the same dialog window.

The Scrolling Text Box

The various properties for a Scrolling Text Box are:

• Name: The name of the Scrolling Text Box. This name will be referred to in and CGI Script that needs to access the data from the Scrolling Text Box.
  
  
• Value: Pre-entered text that will be displayed in the Scrolling Text Box when your Form is loaded.
  
  
• Width In Characters: How wide the Scrolling Text Box will appear on the screen.
  
  
• Maximum Characters: The number entered here determines how many characters a user can type into the Text Box. If the number is "200", for example, no more than 200 characters will be allowed in the Scrolling Text Box.
  
  
• Number Of Lines: How high the box is - or how many rows of text will be visible.
  
  

IMPORTANT NOTE: To make your Scrolling Text Box use WORD WRAP so that users can comfortably type in text without the text appearing as one long line, follow these steps:

• On the Text Box Properties dialog, click 'Advanced...'.

• The 'HTML Extensions' dialog will appear. Click 'Add'.

• In the 'Set Attribute' window that appears, enter "WRAP" as the attribute Name and "TRUE" as the attribute Value. Click 'OK' on all windows and when typed in, the text entered into your Scrolling Text Box will now wrap to a new line when it reaches the edge of the box.
  
  

Radio Buttons

Radio Buttons allow your visitors to easily select one option from several you have listed. Each option has its own Radio Button, and the option the user selects will be sent to be processed when the Form Submit button is pressed.

All the Radio Buttons offering options on a certain subject must share the same Name, but their Value is different according to the option they represent. For example, the following two Radio Buttons:

Boy Girl

These buttons share the same Name ("MaleFemale") but each has a different Value ("Male" & "Female"). Since they share the same Name they are considered by the browser as part of a group, and when one is selected the others in the group will be unselected.

The properties available for you to set in the Radio Button dialog window are:

• Name: The name of the Radio Button. This name will be referred to in the CGI Script that needs to know which option a user selected. The Name is shared across similar options.
  
  
• Value: A pre-entered value that's returned to the Script when this particular Radio Button is selected. The Value can be entirely different from the option that show on the screen next to the Radio Button.
  
  
• Checked: If set for a Radio Button, that button becomes the "default" Radio Button and will appear as selected when the form first displays.

The List Box (Drop-Down Menu)

List Boxes let you present a pre-formatted list of items for a user to choose from. A simple list box is shown below:

The List Box Properties are as follows:

• Name: The unique Name of your List Box.

• Choice: Each option in your List Box is a "Choice", what you enter here will show up in the List Box when it's displayed on your Form.

• Value: The Value of each Choice is optional. If it exists it will be sent to the processing Script, if not, the text contained in Choice will be sent.

Here are step-by-step instructions for setting up a List Box like that shown above:

• Insert a Form in your page and with the cursor inside of the Form outline, click the List Box Tool on the Form Tools Toolbar.

• The Drop Down Menu Properties dialog will appear. Enter "listbox" as this List Box's Name.

• Under 'Choice:', enter "First Selection".

• Under 'Value:' for this Choice, enter "s1" (Usually the Value field is not used, since when it's missing the text for the Choice is sent for processing instead).

• Click the 'Add' button to add this Choice to the List Box. The list of current Choices appears at the left of the Drop Down Menu Properties dialog.

Repeat these steps for each Choice to be listed in your List Box. Note that in addition to the 'Add' button, there is also a 'Change' and 'Delete' button. Use the 'Delete' button to delete a Choice from the List Box, and the 'Change' button to save changes you've made to a Choice.

Note that checking the 'Selected' check box on the Drop Down Menu Properties dialog for any given Choice will cause that Choice to be displayed as selected by default when the Form is first displayed.

Allowing Multiple Selections From A List Box

By specifying the number of lines displayed in a List Box as greater than one, and by checking the 'Allow Multiple Selections' check box on the Drop Down Menu Properties dialog, you can allow your users to select multiple Choices from a list box. An example is shown below:

To select more than one Choice from this List Box, the user just has to hold down his or her CTRL key when he or she clicks on each Choice. Be sure to include instructions to this effect if you allow multiple selections.

The Check Box

Check Boxes allow your visitors to easily select multiple options out of several you have listed. Each option has its own Check Box, and options the user selects (showing as "checked") will be sent to be processed when the Form Submit button is pressed.

Unlike Radio Buttons, each Check Box must have a unique Name For example, the following two Check Boxes:

Boy Girl

None, either, or both of these options can be chosen by the user, whereas with Radio Buttons one option must be selected.

The properties available for you to set in the Check Box dialog window are:

• Name: The name of the Check Box. This name will be referred to in the CGI Script that needs to know whether this option was selected or not.
  
  
• Value: A pre-entered value that's returned to the Script when this particular Check Box is selected. The Value can be entirely different from the option that show on the screen next to the Check Box.
  
  
• Checked: If set for a Check Box, causes the box to be checked by "default" when the form first displays.

The Push Button Element

When you select the Push Button Tool from the Form Tools toolbar, the Push Button Properties dialog will appear.

For non-image push buttons, you only need a Name and a Value for your Push Button. The Value property will be the text that's displayed on your Push Button when the Form is shown to a user.

CGI Scripts

Steady there... this all makes sense and can be fairly easy with a little research, though a minimal knowledge of programming helps.

Once you create a Form, you need a way of processing the information that a visitor to your site enters into the Form. Most Forms are processed using CGI (Common Gateway Interface) Scripts. CGI Scripts are actually small (though powerful) computer programs. Using Scripts, your Forms are processed as follows:

• A visitor enters data into a Form you've created on your Web page, then presses the 'Submit' button.

• The visitor's browser sends the Form data (and the name of the Script to run) to the server you specify - usually the same server you have your Web page on.

• The Web server software then executes (runs) the Script and passes the data to the Script using the Common Gateway Interface [more on this in a minute].

• The Script processes the data, returns it (or other data) to the server software, and terminates itself (stops running).

• Finally, the server software returns the data to the visitor's browser. Usually the data takes the form of an HTML page.

Because Scripts are really programs, you need to write them in a programming language. Many Scripts are written in PERL, but you can also use most other languages - depending on what the server software you're using supports.

If you're not into programming, fortunately there are also several programs available with built-in, pre-made Scripts that just "plug in" to your server for processing Forms.

Click here for a list of sites where you can acquire ready made Scripts to use with common Form tasks.

The Form Properties Dialog

Use the Form Properties Dialog as follows:

• The Action Field: Accompanies every Form and tells the browser what action to take when the Form Submit button is pressed. It usually consists of a URL pointing to a CGI Script on a Web server. For example:
  • http://server.com/cgi-bin/script.exe
  
  
  ... would cause the browser to request that a Script name "Script.EXE" on the Web server "server.com" be executed to process the data from the current Form.

• The Method Field: This field instructs the browser what format to send the Form data in. The most common Method is the POST Method.

• Hidden Fields List: Sometimes you need to include data with a Form that the user never sees. Hidden Fields allow you to do just that. The list of information you create here will not be seen by the user, but will be included with the Form data when it's sent to the CGI Script. Each Hidden Field must have a Name and an optional corresponding Value.

Acquiring Pre-written CGI Scripts

The best resource for locating Scripts of all types, not to mention learning more about Scripts, is Matt's Script Archive and the accompanying CGI Resource Index. Links to both appear below.

• The CGI Resource Index

• Matt's Script Archive

Good luck on your scripting!