Form Controls
Form controls are the individual boxes and buttons used by Web site visitors to enter data. Each form control has editable properties and values that change its appearance and functionality.
Table 6-3 displays the controls you will use in the Pizza Theater Web site:
Table 6-3
Labels
Some Publisher form controls do not include text to prompt the Web user for specific kinds of data entry. In these cases, it is appropriate to use a text box, placed close to the form control, as a label.
A guide can help align labels and form controls so they display in a professional-looking manner on the Web page. The following steps create guides to help align labels and form controls:
Creating Guides
Drag from the horizontal ruler to create a guide at approximately the 260 pixels measurement on the vertical ruler
Drag from the vertical ruler to create a guide at approximately the 192 pixels measurement on the horizontal ruler
Creating Labels
The first items in the feedback Web page form are text boxes, which will serve as labels for the form control text boxes. The following steps create a label and then copy it six times on the form:
Click the Text Box button on the Objects toolbar and then drag a text box, beginning at the intersection of the guides, down and right to create a text box approximately 125 pixels wide and 25 pixels high
Click in the text box and then click the Font Size box on the Formatting toolbar. Type 10 as the new font size
Press CTRL+C to copy the label (Figure 6-40).
Press CTRL+V to paste a copy of the label. Drag the copy below the original so that it snaps to the guide (Figure 6-41).
Repeat Step 2 to create a total of seven labels, positioning them below each other (Figure 6-42).
If necessary, select all seven text boxes. On the Arrange menu, point to Align or Distribute, and then click Distribute Vertically
Completing the Labels
To complete the labels, you will enter text in each of the text boxes as shown in the following steps:
Click inside the first text box and type NAME: to enter the text
One at a time, select each of the remaining text boxes. Type the new label for each (Figure 6-43).
Textbox Controls
The Pizza Theater Web form contains seven textbox form controls to collect information from customers, as follows:
Inserting Textbox Form Controls
Click the Form Control button on the Objects toolbar to display the Form Control menu (Figure 6-44)
Click Textbox to place a textbox form control in the publication
Drag the middle-right handle of the textbox form control to create a box that is approximately 200 pixels wide
Drag the textbox form control to the right of the name label
Press CTRL+C to copy the control (Figure 6-45).
Press CTRL+V six times to create a total of seven textbox form controls, dragging each copy to the right of a label
Resize the textbox form controls to approximate the data they will contain from the user. You do not have to be exact
Align and distribute the controls as necessary (Figure 6-46)
Textbox Form Control Properties
Each form control has a set of properties or attributes that change the appearance and functionality of the form control. Textbox form control properties include default text, the number of characters or width, the ability to hide information with asterisks, and a return data label.
Editing Textbox Form Control Properties
Double-click the textbox form control located to the right of the name label to display the Text Box Properties dialog box
Select the text in the ‘Return data with this label’ box, and then type name to replace the text (Figure 6-47).
Click the OK button to close the dialog box
Repeat Steps 1 and 2 for the other textbox form controls. Use the return data labels listed in Table 6–3 on page PUB 419. Allow only 2 characters for the state, 10 characters for the zip code, and 14 characters for the telephone
Text Area Form Controls
A text area form control allows users to enter multiple lines of text.
Editing Textbox Form Control Properties
Inserting a Text Area Form Control
Click the Form Control button on the Objects toolbar, and then click Text Area
Drag the Text Area form control to a location below the telephone label and form control as shown in Figure 6-48.
Resize the text area to approximately 275 x 75 pixels
Inserting a Text Area Form Control
Editing Text Area Form Control Properties
Double-click the text area form control to display the Text Area Properties dialog box
In the Default text box, type Enter other comments here as the new text
Select the text in the ‘Return data with this label’ box and then type comments to replace the text (Figure 6-49).
Click the OK button to close the dialog box
Creating Another Label
Click the Text Box button on the Objects toolbar
At a location to the right of the other form controls, and near the horizontal guide, drag a check box approximately 125 x 50 pixels
In the text box, type Please send me information on: to complete the label (Figure 6-50)
Inserting Checkbox Form Controls
Publisher provides checkbox form controls to allow users to submit yes and no response without having to type words into a text box.
With no other object selected on the page, click the Form Control button on the Objects toolbar and then click Checkbox to insert a checkbox form control in the publication
Drag the checkbox form control to a location below the instruction label
Click to select the text beside the check box
Type Private Parties to replace the text (Figure 6-51).
Repeat Steps 1 and 2 to create two more checkbox form controls with the words Catering and Movies
Position the checkbox form controls below each other. Align and distribute as necessary (Figure 6-52).
Editing Checkbox Form Control Properties
Checkbox form control properties include the ability to display the check box as selected or not selected, a return data label, and a checkbox value.
Select the Private Parties checkbox form control. Double-click the small check box to display the Checkbox Properties dialog box
Select the text in the ‘Return data with this label’ box, and then type parties to replace the text (Figure 6-53).
Click the OK button to close the dialog box
Repeat Steps 1 and 2 for the other checkbox form controls. Use the return data labels listed in Table 6–3 on page PUB 419 and the value, Yes, for each of the controls
Inserting the Option Button Form Controls
Publisher provides option button form controls to allow users to make one choice from a group of options.
Click the Form Control button on the Objects toolbar, and then click Option Button
When the Option Button form control is inserted in the publication, drag it to the right of the e-mail textbox form control, aligned under the Movies check box
Click the label text and then type Returning customer to replace the text (Figure 6-54)
Create another option button form control just below the first one. Use the words New customer as the label (Figure 6-55).
Option Button Form Controls
Option button form control properties include the ability to display the option button as selected or not selected, a return data label, and an option button value.
Editing Option Button Form Control Properties
Select the Returning customer option button form control. Double-click the circular option button to display the Option Button Properties dialog box
Select the text in the ‘Return data with this label’ box, and then type customer_type to replace the text
Select the text in the Option button value box, and then type returning to replace the text (Figure 6-56).
Click the OK button to close the dialog box
Editing Option Button Form Control Properties
Select the New customer option button form control. Double-click the circular option button to display the Option Button Properties dialog box
Click the ‘Return data with this label’ box arrow, and then click customer_type in the list
Select the text in the Option button value box, and then type new to replace the text (Figure 6-57).
Click the OK button to close the dialog box
Inserting a List Box Form Control
Click the Form Control button on the Objects toolbar, and then click List Box to create a list box on the page
Drag the list box form control to a location right of the text area
Drag the lower-center handle until the list box form control displays only Item One to create a drop-down list (Figure 6-58).
Editing List Box Form Control Properties
Double-click the list box to display the List Box Properties dialog box
Select the text in the ‘Return data with this label’ box, and then type media_type to replace the text
In the Appearance area, select Item One (Figure 6-59).
Click the Modify button to display the Add/Modify List Box Item dialog box
In the Item box, type How did you hear about Pizza Theater? to replace the text (Figure 6-60).
Click to remove the check mark in the ‘Item value is same as item text’ check box
Select the text in the Item value box if necessary, and then type none to replace the text (Figure 6-61).
Click the OK button to close the Add/Modify List Box Item dialog box
In the Appearance area, select Item Two and then click the Modify button to display the Add/Modify List Box Item dialog box
In the Item box, type on the radio to replace the text. Do not change the Item value box (Figure 6-62).
Repeat Step 4 to modify Item Three using the words, in the newspaper, in the item box
In the List Box Properties dialog box, click the Add button to add additional items with the words, from a friend, on the Web, and other (Figure 6-63).
Click the OK button to close the List Box Properties dialog box (Figure 6-64).
Inserting Submit Form Controls
A submit form control creates a Submit button, which is clicked by the user to submit the data that has been entered.
Click the Form Control button on the Objects toolbar, and then click Submit to display the Command Button Properties dialog box.
If necessary, click the Submit option button to select it (Figure 6-65).
Click the OK button to place the control on the page
Drag to reposition the Submit button to a location below the text area (Figure 6-66).
Click the Form Control button on the Objects toolbar, and then click Submit to display the Command Button Properties dialog box.
Click the Reset option button to select it (Figure 6-67).
Click the OK button to place the control on the page
Drag to reposition the Reset button to a location below the list box (Figure 6-68).
Editing Form Properties
Form properties include specifying the data retrieval method and entering data retrieval information, as follows:
Double-click the Submit button to display the Command Button Properties dialog box
Click the Form Properties button to display the Form Properties dialog box
Select the ‘Send data to me in e-mail’ option button
Select the text in the ‘Send data to this e-mail address’ box, and then type theboss@pizzatheater.biz to replace the text (Figure 6-69).
Click the OK button to close the Form Properties dialog box.
Click the OK button to close the Command Button Properties dialog box
