| The Form Objects palette, shown in Figure 39.1, contains all the elements you need to create a web form. Elements include buttons, labels, text and password fields, check boxes, radio buttons, pop-up menus, list boxes, hidden elements, a file browser, a key generator, and a fieldset creator. Each form element is actually an HTML element and serves as a means of transmitting information that is input by your users. Figure 39.1. The Form Objects palette includes objects for all form elements. 
To create a web form, follow these steps: 1. | Select the Form tab of the Objects palette to display the Form objects.
| 2. | Select the Form object and drag it into place in your document window. The box that encloses this Form tag will house all the elements of your form, so it's essential that you place this icon first. Any elements not placed within this box will not function as part of the form.
| 3. | Use the Form Inspector to name your form and provide essential information in the Action, Target, Encode, and Method fields. Use the Action field to indicate the URL of the script that will handle your form data when the Submit button is clicked. If the script that handles your form data returns a response web page, you can use the Target field to indicate what frame to display the content in when designing pages using HTML frames. The Encoding option indicates how the text is to be formatted when sent to the form-handling script. The Method field is usually set to POST for most forms and defines the method of delivery for the form data. Your web administrator or Internet Service Provider can give you all the specifics about what needs to be set in the Form Inspector.
| 4. | Click the icon of any form element you want in the Objects palette and then drag it into place within the box enclosing the Form tag. You may also position your cursor within the Form tag box and simply double-click form element icons in the Objects palette to place them.
| 5. | For each element, use the Form Inspector to provide any necessary details.
| 6. | Continue to add form elements until your form is complete (see Figure 39.2).
Figure 39.2. A completed form using a variety of form elements. 
| 7. | Be sure to include a Submit button so users can send their information to you after they've completed the form online. You may also choose to include a Reset button so users can clear all the fields in the form.
| 8. | Save your form and test it thoroughly in various browsers to ensure full functionality.
|
The Form Tag The Form tag is the HTML tag that encloses all form elements. When a user clicks the Submit button, all of the variable data inside the <form> and </form> tags is submitted. The form tag also contains the information to process the form in its action attribute. The action attribute can contain a simple email address (not recommended) or a URL for a CGI script, PHP script, or ASP page for example. Using the Form Inspector Through the Form Inspector, shown in Figure 39.3, you provide the values that enable your form to communicate with the CGI scripts and transfer your data where it needs to go: Name/ID: This setting may be used for later reference. It is particularly important when you're using multiple forms simultaneously, but you can leave it blank if it is your only form. Action: This setting refers to the location of the script that will handle the data sent by the form. All forms need an action to tell the browser what to do when the user clicks the Submit button. Type the filename and directory of this script, or link to it using point and shoot or browsing. A form cannot function without calling a proper action, so be sure to talk to your Internet service provider or server administrator about what kinds of scripts are available for your use and where they are located on the server. Target: If you're using frames, use this field to specify a target where the page returned by the web server will appear. Encode: If you require special encoding, enter or choose the encoding type in the Encode field. Multipart/form-data is the most common, but this field can be left blank for most CGI scripts. Method: Use this menu to choose a form method. Although both are correct, the Get and Post methods function in slightly different manners. Use the Post method if you are unsure of which one you should use because the majority of form handling scripts rely on this method to store posted data. The Post method is most often used because it does not restrict the amount of data that can be transferred. The Get method stores the posted data in a variable within the script and greatly restricts the amount of data that can be handled. Ask your Internet service provider (ISP) or web administrator which method is best for your particular needs. Inventory: This button leads you to a dialog box that enables you to take a quick peek at what's included in your form so far (see Figure 39.4). This convenient feature helps you troubleshoot as you go, without sifting through lengthy lines of source code. In addition, you can export a list of the form elements you've used, or the action string as it stands, for use elsewhere. This comes in handy for duplicating forms, building databases, and troubleshooting your own form. The Action String section shows you just what will be sent to the receiving CGI script or form handler. Figure 39.4. The Form Inventory dialog. 
Figure 39.3. The Form Inspector provides a place to edit the characteristics of a form. 
Creating Buttons Three types of button icons exist within the Form tab of the Objects palette, each with its own unique function: Submit: This button sends the data entered in the form to the CGI script to be processed. Reset: This button clears the form and returns it to the original default values. Button: This button can be set up to behave exactly like a submit or reset button, or you can customize its appearance by adding an image, formatted text, or other content to make it more intuitive to the user (see Figure 39.5). These generic buttons can also be attached to HREFs or JavaScript actions using the onClick command in the Actions palette. Figure 39.5. Examples of the Submit and Reset buttons, with an example of a customized button. 
To create a button: 1. | Select the Form tab of the Objects palette.
| 2. | Click and drag the desired button icon into position within the Form tag box on your page.
| 3. | Use the Button Inspector to specify the following details for your button:
- Select the button type: Using the radio buttons in the Inspector, you can specify a button as Submit, Reset, or Normal. Custom buttons should always be set to Normal.
- Provide a name for each button: This is strictly for your use when referring to the button and does not appear to the user on the form.
- Label the button: This appears as text on the button itself. Submit buttons are by default labeled Submit Query, and reset buttons are labeled Reset, but you can change either label simply by checking the Label box and typing a new label into the field, as shown in Figure 39.6.
Figure 39.6. The Submit Button Inspector. 
- Custom button text: Highlight the text on the button itself to change the label. You may adjust the font, size, and style of the text, just as you would in any regular text box, using GoLive's standard font tools.
- Custom button images: Drag the Image icon from the Basic tab of the Objects palette onto the top of the button to place an image there. Use the Inspector to select an image file and determine its dimensions, just as you would with any image element.
- Custom button value: Specify a value for your button (that is, an action or value to be passed to the CGI script, as suits the purpose of your form). For example, your custom button could say Click this button if you like pizza and the value to be sent to the CGI script would be likes pizza.
|
Figure 39.6 shows a Submit button set up in the Button Inspector. The Form Input Image Another user-friendly option for sending information is the form input image. Like a custom button, an input image enables you to place a clickable image on your page: 1. | Select the Form tab of the Objects palette.
| 2. | Click and drag the Form Input Image icon into position within the Form tag box on your page.
| 3. | In the Inspector, link to the desired graphic using the point-and-shoot lasso, browsing to the correct file, or typing the filename and path directly into the source field, as shown in Figure 39.7.
Figure 39.7. Images can also be used as buttons, shown here in the Form Input Image Inspector. 
| 4. | Specify details such as height and width, alignment, border size, and alternate text in the Inspector, as you would with any other image.
|
Labels and Text Fields Although the Form tab features multiple text elements, each performs a slightly different role, as shown in Figure 39.8. Labels serve as titles or indicators for other elements, but they may also be used to activate or deactivate their associated elements. Text fields enable users to input single lines of text, such as individual words, numbers, or phrases. Password fields resemble text fields, except that the entered text string is not visible, providing protection to the user. Text areas provide additional space for multiline text entries, such as paragraphs. Figure 39.8. Examples of a label, text field, password field, and text area. 
Labels The Label icon inserts a small text box that enables you to define the purpose of another element (check box, radio button, and so on) for your users. Although the text of a label may be edited and formatted much like a standard text box, the label holds a distinct advantage over the text box in that it can also control the element it defines. By clicking the label, a user can activate or deactivate its associated object. Test this feature in your browsers, though, because it is not supported on some. To create a label, follow these steps: 1. | Select the Form tab of the Objects palette.
| 2. | Click and drag the Label icon into position on your page, or simply double-click the icon in the Objects palette.
| 3. | Place your cursor in the content area of the label and enter a name for it.
| 4. | Select the name and format the text by adjusting the size, font, and/or style, as desired.
| 5. | To link the label with an element, first select the label and then either point and shoot to the appropriate form element, or  -click (on the Mac) or Alt-click (in Windows) the border of the label and drag it into the appropriate form element (see Figure 39.9).
Figure 39.9. A label is selected in the Form Label Inspector. 
|
Text Fields, Password Fields, and Text Areas Although created with two separate objects, the text field and the password field are nearly identical, except for the privacy feature of the password field. Both fields are intended for short, single lines of text, although the line length can be adjusted to suit longer strings of data. To create a text field, follow these steps: 1. | Select the Form tab of the Objects palette.
| 2. | Click and drag the text field or password field icon into position on your page, or simply double-click the proper icon in the Objects palette.
| 3. | Select the field in your document.
| 4. | In the Inspector, shown in Figure 39.10, enter a unique name to identify your field.
Figure 39.10. A standard text field shown in the Form Text Field Inspector. 
| 5. | In the Value text field (in Windows) or the Content text field (on the Mac), insert any default text for users to see (or leave this text field empty).
| 6. | In the Visible text field, enter the desired character length of your field. This setting refers to the number of characters that can be viewed in your new field.
| 7. | Enter a character limit in the Max text field to set the maximum number of characters your field will accept. If you leave this text field empty, the limit is determined by the web browser used to view the form.
| 8. | If your new field is a password field, enable the Is Password Field check box to indicate so. When this option is selected, the field displays bullets instead of displaying what's typed.
|
To create a text area, follow these steps: 1. | Select the Form tab of the Objects palette.
| 2. | Click and drag the Text Area icon into position on your page, or simply double-click its icon in the Objects palette.
| 3. | Select the Text Area element in your document window.
| 4. | In the Inspector, shown in Figure 39.11, enter a unique name to identify your text area.
Figure 39.11. A text area is defined and described in the Form Text Area Inspector. 
| 5. | In the Rows field, enter a number to determine the height for your text area. This setting determines the maximum number of rows visible in your text area.
| 6. | In the Columns field, enter a number to set the width of the text area. This setting determines the maximum number of characters visible across your text area.
| 7. | Choose a setting from the Wrap pop-up menu to control line breaks. Choose Default to use the default settings of the browser. Choose Off to keep text in a single line regardless of the Columns limit. Choose Virtual or Physical to wrap text within the Columns limit automatically. If you choose Physical, the text is submitted to the CGI script with returns where the lines break, whereas Virtual wraps the text on the web page but submits a single long string of text to the CGI script.
| 8. | In the Content field, insert any default text for users to see, or leave this field empty.
|
Check Boxes and Radio Buttons When you're presenting multiple-choice questions, from a simple Yes or No to those with many possible answers, check boxes and radio buttons help you elicit quick, clear responses from your viewers. Figure 39.12 shows examples of radio buttons and check boxes along with the HTML source code generated by GoLive. Figure 39.12. Examples of radio buttons and check boxes. 
Check boxes and radio buttons enable you to maintain better control over the data submitted by the form. Unlike text fields, where user responses may vary widely, you actually predetermine the possible answers in a listed format. From here, you can sort the information into categories based on responses, set up scripts to flag certain criteria and perform designated functions according to the choices your users make, and calculate statistical data with greater accuracy. All these benefits make check boxes and radio buttons excellent choices for certain parts of forms. Use the radio button any time answers are mutually exclusive, as in the Yes or No scenario or when you want to force users to choose the best answer. Check boxes allow for multiple responses to a single question. Use these anytime more than one answer may be equally valid. To create radio buttons, follow these steps: 1. | Select the Form tab of the Objects palette.
| 2. | Click and drag the Radio Button icon into position on your page, or simply double-click its icon in the Objects palette.
| 3. | Select the Radio Button element in your document window by clicking it.
| 4. | In the Inspector, type in the Group field the name of the group to which the selected radio button element belongs. The group name can be used, for example, to group all the buttons in response to a single question. In the likely event that several questions on your form make use of radio buttons, this ensures that only those from the same group are compared with one another. Choose a descriptive name for the group to which you want the selected button to belong and then type that name into the text field; alternatively, you can select an existing group name from the pop-up menu. After a group name has been entered, it becomes available as a choice in the pop-up menu.
| 5. | Type a value in the Value field for the selected button. The value for the radio button is a unique response that serves to identify it within the group. This value may be any web-friendly alphanumeric character or a string of characters (without spaces). Values such as A (for lettered multiple-choice questions), 1 (for numbered lists or for questions involving mathematical calculations), Yes (for Yes or No questions), and Always (for questions of preference or frequency) are common examples. When a viewer submits the form, this value gets passed to the CGI script and then is sent back to you as usable data.
| 6. | In the bottom section of the Inspector palette check the Selected box to indicate that this radio button should appear selected by default, as shown in Figure 39.13.
Figure 39.13. A selected radio button shown in the Form Radio Button Inspector. 
| 7. | Repeat these steps for each button in the group.
|
To create check boxes, follow these steps: 1. | Select the Form tab of the Objects palette.
| 2. | Click and drag the Check Box icon into position on your page, or simply double-click its icon in the Objects palette.
| 3. | Select the check box by clicking it in your document window, and in the Inspector palette enter a unique name to identify the check box (see Figure 39.14).
Figure 39.14. A selected check box is defined in the Form Check Box Inspector. 
| 4. | Assign the check box a value in the Value field. This value may be any web-friendly alphanumeric character, or string of characters, without spaces. Values such as A (for lettered multiple-choice questions), 1 (for numbered lists or for questions involving mathematical calculations), Yes (for Yes or No questions), and Always (for questions of preference or frequency) are common examples. When a viewer submits the form, this value gets passed to the CGI script and is then sent back to you as usable data.
| 5. | In the bottom section of the Inspector palette, enable the Selected box to indicate that this check box should appear selected by default.
| 6. | Repeat these steps for each check box in the group.
|
Pop-up Menus and List Boxes Both the pop-up menu and list box accomplish the same task; each displays a list with multiple items from which the user may choose, as shown in Figure 39.15. The only real difference lies in the appearance of the lists. In a pop-up menu, only one item appears by default. Users must click the menu to view the full list, and the selected item becomes the one displayed. By contrast, the list box shows multiple items in a scrolling list. Users may use the scrollbars to view list items beyond the scope of the box, and any selections become highlighted. A list box enables the user to select multiple items from the list as well, by holding the Shift key while clicking. Figure 39.15. A pop-up menu and a list box are shown here, with the source code. 
To create a pop-up menu or a list box, follow these steps: 1. | Select the Form tab of the Objects palette.
| 2. | Click and drag the Pop-up or List Box icon into position on your page, or simply double-click its icon in the Objects palette.
| 3. | Select the Pop-up or List Box element in your document by clicking it, and in the Inspector, enter a unique name to identify the item (see Figure 39.16).
Figure 39.16. A list box shown in the Form List Box Inspector. 
| 4. | In the Rows field, enter a number to determine the number of rows you want to be visible. In a list box menu, viewers see this number of rows when scrolling through the menu.
| 5. | Enable the Multiple Selection check box to allow your users to select more than one item, if desired. If you select only one row to display and disable the Multiple Selection check box, your element will be a pop-up menu. Any other settings revert it to a list box.
| 6. | The Label/Value list box contains three entries by default, labeled First, Second, and Third with respective values of 1, 2, and 3. Select an item from the Label/Value list box and edit it to your specifications. Click Duplicate to make an additional copy of the currently selected item. Click New to add a new option.
|
Setting Up a File Browser Insert a file browser form element when you want to provide a means for users to send you files, similar to the way you send attachments with email. The file browser element contains a field with a Browse button that enables the user to either type in the path name to the file they want to send or click on the browse button to navigate to the file's location on their hard drives. When the form is submitted by clicking the Submit button, the file that appears in the file browser field is uploaded as well. In the example shown in Figure 39.17, the user is prompted to send electronic artwork for a label to be ordered. In this example, the user is sending a JPEG file named label.jpg. Figure 39.17. A file browser can be used to permit a user to upload a file to the web server. Here, a site visitor uses the form to submit electronic artwork. 
To set up a file browser, follow these steps: 1. | Select the Form tab of the Objects palette.
| 2. | Click and drag the File Browser icon into position on your page, or simply double-click its icon in the Objects palette.
| 3. | Select the File Browser element in your document window and, in the Inspector (shown in Figure 39.18), enter a unique name to identify the file browser.
Figure 39.18. Set the options for the file browser form element in the Inspector palette. 
| 4. | In the Visible field, enter the number of characters that will be visible in the file browser text field, much like a text field.
|
Creating Hidden and Disabled Form Elements Sometimes you may want to keep elements of a form hidden from view entirely or activate them only when certain criteria are met. Hidden elements may include data or behind-the-scenes instructions not meant for the eyes of your users. An email address is often included in a hidden field to specify which address the form data is to be sent to if the CGI script has a variable for it, such as recipient, as shown in Figure 39.19. Figure 39.19. Hidden form elements appear as a tiny H icon. 
Let's say you have a website that asks users to join your mailing list. In addition, let's say your site has three departmentsappliances, furniture, and linens. In each of the departments you can provide an identical HTML form that enables users to join your mailing list, but each form has a unique hidden field indicating what department users were in when they filled out the form. In this example, the hidden field would be named department, and the value of the field would be appliances, furniture, or linens depending on which form users submit. In either case, the form would be submitted to the same script, which would gather the information in one place, with the department field indicating where users were on your website when they filled out the form. You could then use this information to customize marketing materials to suit users' interests. When a form is submitted, the hidden data is submitted as well, along with the users' input. Disabled elements are regular elements that appear dimmed in the browser until a script activates them, based on a predesignated event or some condition being met. For instance, you could keep a Submit button dimmed until all required fields are filled. Legends, labels, text fields, password fields, text areas, submit buttons, reset buttons, check boxes, and radio buttons may be temporarily disabled in this way. Follow these steps to create a hidden element: 1. | Select the Form tab of the Objects palette.
| 2. | Click and drag the Hidden icon into position on your page, or simply double-click its icon in the Objects palette.
| 3. | Select the Hidden element in your document window and, in the Inspector (shown in Figure 39.20), enter a unique name to identify the Hidden element.
Figure 39.20. A hidden form element shown in the Form Hidden Inspector. 
| 4. | Assign a value to this hidden element. This will be carried by the CGI script.
|
To disable an element, follow these steps: 1. | Select the element you want to deactivate in your document window.
| 2. | Check the Disabled check box in the Inspector, as shown in Figure 39.21.
Figure 39.21. The Submit button set to Disabled in the Input Button Inspector. 
| 3. | If you are familiar with writing scripts using scripting languages such as JavaScript or VBScript, you can write a script to enable the item based on logical conditions and attach the script to the page or to another button.
|
Creating Read-Only Form Elements Any text form element may be set to read-only status. Simply select the element in your document window, and check the Read-Only box in the Inspector. These elements will not be transmitted when the form is sent, and they cannot be edited or otherwise manipulated by the user. |
