Managing HTML Forms

The Micro Webserver comes with a form managing utility program file called FormBuilder.exe. You can use one of the sample templates to create your forms or you can design your own from scratch. The Form Builder application must be run from a Windows 95 or Windows NT 4.x operating system.

The Form Builder application is a tool that lets you create HTML forms for the Micro Webserver that contain various screen elements (buttons, boxes, tables, graphics, text fields etc.) that people can fill out and submit complete with links to other HTML pages. You can then open the database files created by these forms with your browser.

Note The Micro Webserver does not support any other scripting language (such as CGI or Perl) for creating forms. If you need pages with input fields, you must create the forms using Form Builder.

When you create a form using the Form Builder application, several program types are created. For example, if you create a form that you save as SAMPLE, the following files are created:

sample.swz - The form document that the Form Builder Application uses.
sample.html - A sample link to the Add new record page. If the user wants to link to the form from somewhere else this serves as a sample.
sample.sht - A parsed HTML file which will let the you add an entry. A form publisher normally exposes this to the network users.
Sampleindex.sht - A parsed HTML file which lets you browse all existing entires. It is in a bug report type of form. Only the system administrator has access to this.
Sample.fdb - The database file which stores all the entries into the form's fields.
Sampleadmin.sht - Allows the administor to view and delete records.

General Tips for Using Form Builder

The process for creating forms is as follows:

Run the Form Builder application.
Select each element that you want to add to your form using the appropriate tabs.
Preview the affect of each step by clicking the Preview button on each tab.
Reorder the elements and add page breaks between them using the Created Controls tab.
Preview the finalized form by clicking the Preview button on the Created Controls tab.
Save the form.
FTP the form to the server of choice using the FTP button.
As users enter data to your form, browse the database file using your Web browser.

Starting the Form Builder

Browse the Micro Webserver Home Page as described in the section, "Browsing the Server". Select the productivity tools icon and select the Form Builder icon. You can also run the Form Builder by clicking the Form Builder icon from the Cisco Micro Webserver program group accessed through the Start menu. The Form Builder main window appears:

You now can either open an existing form or create a new one.

Opening an Existing Form

Select the File menu and click Open. The Open dialog appears:

Select the existing form file (with a .swz extension) from the list and click Open or double-click the desired file name. The Form Builder tabs appear:

Step through each tab and change the data to reflect your application as described in the section, "Creating a New HTML Form".
Select the File menu and choose Save As... The Save As dialog appears.
Enter a unique, valid file name in the File name field.
Click Save to save your new file.

Creating a New HTML Form

Select the File menu and choose New. The Form Builder tabs appear:

Enter the heading that you want to appear at the top of the form in the Heading field.
Enter a background image file name in the Background Image field. This file must be a .GIF or .JPG file. You can also browse to locate this file by clicking Browse.
Enter a label that you want to display with the Submit button in the Submit Button Label field.
Enter a label that you want to display with the Reset button in the Reset Button Label field. You can preview the effect of this tab, at any time, by clicking Preview.

Setting Heading Colors, Fonts and Background Colors

From the Form Settings tab of the Form Builder dialog, click Advanced. The Advanced Form Options dialog appears:

Select a foreground color for the heading by clicking the Foreground radio button and clicking Colors.... The Color dialog appears:

Choose a Basic color to apply and click OK, or Click Define Custom Colors to set your own color. The Color (Custom Color) dialog appears. Select a color from the matrix and click Add to Custom Colors. The colors are added to the custom colors buttons on the left of the dialog. In the future you can select these colors to apply to foreground text and backgrounds. When you have added all of the colors you may want, click the color you want to apply to the heading text and click OK.

Choose the Background radio button and follow the same procedure to select the background color for your page.
Click OK. You can preview the effect of this tab, at any time, by clicking Preview.

Defining Paragraphs and Text Controls

Select the Text Controls tab. The Text Controls tab appears:

Enter a description to identify the paragraph you want in the Descriptor field.
If you want this to be an active hotspot link, check the Link To check box and enter the URL that you want to link to in the Link To field.
Enter the text that you want for this paragraph in the large input field on the bottom of the dialog.
Click Advanced to set paragraph fonts, alignments and colors. The Advanced Text Options dialog appears:

Select the Font you want to apply from the Font drop-down list.
Select the color to apply to the text by clicking the Colors button and selecting a color.
Choose an alignment to apply to this paragraph from the Alignment drop-down list.
Click OK to apply these attributes to the selected paragraph. The Text Controls tab appears.
Click Add to add this paragraph to the list of available paragraphs.
Enter as many paragraphs as you want for this form, each time using a different descriptor in the Descriptor field and clicking Add after each paragraph. In the future you can select these paragraphs from the Available Paragraph drop-down list. You can preview the effect of this tab, at any time, by clicking Preview.

Defining Text Input Fields

You can define the text input fields with specific labels, lengths, and password protection using the Text Input tab:

Select the Text Input tab. The Text Input tab appears:

Enter a description that will help you to identify it in the future in the Descriptor field.
Enter a label that you want to display on the form with the input field in the Label field.
Enter the maximum character length of the field in the Max length field.
Select a group to associate the text control with from the Group drop-down list.
Select a key field that you want to list on the index page from the Key Field drop-down list.
Check the Password Data Type check box if you want password protection for this field.
Click Add to add this input field to the Available Input Fields drop-down list.
Repeat steps 1 through 6 for as many input fields as you need. Each time changing the Descriptor and Label fields and clicking Add. This will add these items to the Available Input Fields drop-down list for future selection. You can preview the effect of this tab, at any time, by clicking Preview.

Adding Comment Input Fields

You can add comment input fields to your forms using the Comment Box tab:

Select the Comment Box tab. The Comment Box tab appears:

Enter a name that will help you identify the comment field in the future in the Descriptor field.
Enter the number of columns you want for the block in the Number of Columns field.
Enter the number of rows you want for the block in the Number of Rows field.
Click Add to add this comment input field to the Available Comments drop-down list.

Adding Images

Select the Images tab. The Images tab appears:

Enter the name of the image file (.GIF or .JPG), with the full path name, in the File Name edit box. You can also browse to select this file by clicking Browse.
Select an alignment from the Alignment drop-down list.
Enter a description that will help you to identify this image in the Descriptor field.
If you want this image to link to a specific URL, check the Link To check box and enter the URL in the Link To field.
Click Add to add this image to your Available Images drop-down list.

Deleting Images

Select the Images tab. The Images tab appears:

Select the name of the image that you want to delete from the Available Images drop-down list.
Click Delete. The image is deleted from the Available Images drop-down list.

Adding Check Boxes

Select the Check Box tab. The Check Box tab appears:

Enter the name of the check box in the Item field.
Check the Check State check box if you want the default state to be checked.
Enter a description that will help you to remember the function of this check box in the Descriptor field.
Click the >>> button to add this check box to the Item List. In the future, you can just select this check box from the Item List.
Click the Add button to add this check box to the Available Check drop-down list.

Removing a Check Box

Select the Check Box tab. The Check Box tab appears:

Select a check box from the Available Check drop-down list.
Click Delete. The check box is deleted from the list.

Adding Radio Buttons

Select the Radio Buttons tab. The Radio Buttons tab appears:

Enter the name of the radio button in the Item field.
Click the >>> button to add the radio button to the list. The radio button appears in the Item List table.
Click Add. The list is added to the Available Radio Buttons drop-down list.
Repeat steps 1 through 4 for as many radio buttons as you want.

Deleting a Radio Button

Select the Radio Buttons tab. The Radio buttons tab appears:

Select the radio button you want to delete from the Available Radio Buttons drop-down list.
Click Delete. The radio button is removed from the list.

Creating Lists

Select the List Box tab. The List Box tab appears:

Enter a description for the entire list in the Descriptor field.
Enter the list item text in the Item field.
Click the >>> button to add the text to the list. The text appears in the Item List table.
Select whether you want the list numbered or bulleted by clicking the appropriate radio button in the Appearance group.

Note The state (numbered or unnumbered) that the radio buttons in the Appearance group are in at the time you click the Add button determines whether the list is numbered or bulleted.

Click Add. The list is added to the Available List Boxes drop-down list.
Repeat steps 1 through 6 for as many lists as you want.

Deleting Lists

Select the List Box tab. The List Box tab appears:

Select the list that you want to delete from the Available List Boxes drop-down list.
Click Delete button. The list is deleted from the Available List Boxes drop-down list.

Adding Drop-Down Lists (Choice Boxes)

Select the Choice Box tab. The Choice Box tab appears:

Enter a description for your drop-down list in the Descriptor field.
Enter the text that you want for the first item in the drop-down list in the Item field.
Click the >>> button.
Enter the subsequent text for your list in the Item field and click the >>> button for each item you want in the list. If you make a mistake or want to change an item, select the item and click Remove.
When you have the list the way you want it, click Add. The list is added to the Available Choice drop-down list.

Removing a Drop-Down List (Choice Box)

Select the Choice Box tab. The Choice Box tab appears:

Select the list you want to remove from the Available Choice drop-down list.
Click Delete. The item is removed from the list.

Adding Tables

Select the Table tab. The Table tab appears:

Enter a description that will help you identify the table in the Descriptor field.
Enter text that you want to appear in the columns and rows. You must fill in continuous blocks of columns and rows in order for the text to appear in the table.
Click Add. The table is added to the list of tables in the Available Tables drop-down list.

Removing a Table

Select the Table tab. The Table tab appears:

Select the table that you want to delete from the Available Tables drop-down list.
Click Delete. The table is removed from the list.

Building the Forms

After you have added (or edited) all of the elements that you want in your form, select the Created Controls tab. The Created Controls tab appears:

All of the descriptors that you have added appear in the Control Order list. You can move them up or down using the Move Up and Move Down buttons. You can also add a <BREAK> tag forcing a new line by clicking the Add Break button. You can remove a <BREAK> tag by clicking the Remove Break button. When the order and breaks are as you want them, click Preview to view the form in your browser.
Save your form by clicking Save (or Save As) from the File menu.

Transferring the Form to the Server

After you have completed the form, you must transfer the form to the server:

With the form open (displaying in the main window), click the FTP button. The File Tranfer Utility appears:
All files that must be transferred to the server are automatically selected.
Click Connect. Follow the instructions in the section, "Transferring Files" to log into the server and transfer the form files to the server.