Creating the Visible Form

Alas, Composer includes no tools for making forms. But HTML Assistant Pro 2000 provides easy-to-use tools for creating the form.

Although the data processing aspects of forms can be tricky, creating the form itself in HTML Assistant Pro is a snap. The next several pages show several different ways you can quickly produce any type of form you desire .

Building a Fast, Easy Form with a Template

HTML Assistant Pro includes a form template you can use to create a new form in a snap. Based on your selections in a simple dialog box, HTML Assistant Pro builds a basic form for you. You can start your page in HTML Assistant Pro, create the form, and then finish the page in Composer, or you can switch from Composer to HTML Assistant Pro to add the form and then jump back to Composer when your form has been added.

Composer cannot give you a WYSIWYG view of your form. To preview your form, you must view the page in a browser. In Composer, the form fields are indicated with yellow tag icons, like all HTML tags that Composer does not recognize.

1. Open HTML Assistant Pro by clicking the Windows Start button and choosing Programs, HTML Assistant Pro 2000, Pro 2000 (see Figure 28.2).

   Figure 28.2. Step 1: Open HTML Assistant Pro 2000.

   

2. Choose File, Open to open a page.

3. Browse to and select a page you've been working on in Composer (see Figure 28.3).

   Figure 28.3. Step 3: Choose a file to add a form to.

   

4. Look carefully at the Body section of the HTML, and locate the spot in the page where you'll want to insert the form (see Figure 28.4).

   Figure 28.4. Step 4: Find the area within the page where you want to add a form.

   

5. Click at that spot and choose Special, Form Components, Form from the menu bar (see Figure 28.5).

   Figure 28.5. Step 5: Choose Special, Form Components, Form.

   

6. Click the Create a Form Template button (see Figure 28.6).

   Figure 28.6. Step 6: Click Create a Form Template.

   

7. Check the check boxes next to any form "data input" types you want to include (see Figure 28.7). (If you don't quite recognize what these items are yet, just don't worry about it. They're covered later in this chapter, in the section "Adding Form Fields.") When finished, click OK.

   Figure 28.7. Step 7: Check the check boxes for the form fields to include.

   

8. To view the results, click the Preview button (the button with an eye icon on the far right sidesee Figure 28.8).

   Figure 28.8. Step 8: Preview in Netscape to see your form.

   

Example: Edit Your Form Labels in Composer

The form added by HTML Assistant Pro has boilerplate text all over it, stuff like "Option 1" and "Text Goes Here." Obviously, you want to change these labels, or captions , to text that means something to you and your visitors .

You can do this right in HTML Assistant, if you're comfortable rooting around in HTML. But because you'll do most of your other authoring in Composer, you might as well switch over and do the work there:

1. Open Composer, and open in Composer the file you added a form to.

2. Composer displays its tag icons where the form fields are; the other text, before and after each tag, is the boilerplate text you can replace (see Figure 28.9).

   Figure 28.9. Composer displays your form's labels, plus tag icons representing the form fields.

   

   

   The labels that begin with the word Option are the individual options on a drop-down list.

3. Highlight any block of text.

4. Type its replacement.

In the boilerplate form field labels on your HTML Assistant-built form, watch for the word can , as in "Text can be displayed here." That word tips you off that the label in that case is not required. You can replace the text containing can , but you might also erase it altogether.

Adding Form Fields

Besides providing a template for making forms, HTML Assistant offers the Form Assistant toolbar (see Figure 28.10), from which you can quickly create forms containing precisely the fields you require.

Figure 28.10. Use the Form Assistant toolbar to add individual fields to a form.

To display the Form Assistant toolbar, choose Special, Form Tool Bar from the HTML Assistant Pro menu bar.

To add fields, you click buttons on the Form Assistant toolbar:

Text Box

Radio Button

Check Box

Selection List

Submit Button

Reset Button

1. Open the page file in HTML Assistant Pro.

2. Choose Special, Form Tool Bar to display the Form Assistant toolbar.

3. Examine the HTML code carefully, to locate the section where your form is located. The form code begins with the tag <FORM...> and ends with the tag </FORM> .

4. Examining the form field tags already in place, locate and click in the spot where you want to add a new field (see Figure 28.11).

   Figure 28.11. Step 4: Choose the spot in the code where you will add a new form field.

   

5. Press Enter to start a new line on which to add the field.

6. On the Form Assistant toolbar, click the button for the form field you want to add.

Customizing Fields

When adding form fields, you can customize their appearance or action. For example, when adding a text box, you can choose to make it a multiline text box rather than the default single-line text box, to give your visitors room to type longer input.

To choose options for a form field while creating it, don't click the button for the field on the Form Assistant toolbar. Instead, right-click the button. An options dialog box (different for each form field) appears (see Figure 28.12). Choose your options and then click the Apply Tags button in the dialog box.

Figure 28.12. Right-click a button on the Form Assistant toolbar to see options for customizing that field.

Again, the exact options you see vary, depending on the type of field you double-clicked. Most options are self-explanatory. You can expand these dialog boxes by clicking the Advanced check box you see in each dialog box (see Figure 28.13).

Figure 28.13. Click the Advanced check box to see advanced options for a form field.

One option you see in most dialog boxes for customizing form fields is Variable Name. This name , which does not appear in your page, is used by the CGI programmer to determine what happens to the data the visitor will type there.

For example, the variable name for a text box intended to collect the visitor's first name could be FIRSTNAME. Choosing these variables enables you to communicate more effectively with your CGI programmer, giving you the ability to tell him or her exactly what you want done with each piece of input collected.

However, you'll see two important options, especially when you've clicked the Advanced check box that might not be so self-explanatory:

• Value In one-line and scrolling text boxes, this is an optional, default form entry you offer your visitors to save them time. For example, if you predict that most visitors will probably make a particular entry in a text box, you can make that entry appear to be pre-entered on the form. The visitor can always change that entry, but if the initial value is what he would have chosen or typed anyway, he can skip that field. Some Web authors also use the Initial Value field to display within the form an instruction for using the form ("Type your address here").

• Mark as Preselected In lists, check boxes, and radio buttons, you can specify that a particular field or list item is automatically selected so that visitors who would have made the same selection can skip the field.