Lesson 3

Work with Form Objects

 

OBJECTIVE:
In this lesson, you will add form objects to the form on the feedback page

Sample Solution

Insert Single-Line Text Fields

  1. Place the insertion point in the first cell under the header, then type 'First Name'
  2. Press Tab, then click the Text Field button (on the Insert panel)
  3. Click the No label tag option button (in the Style section), type 'first_name'  in the ID text  box, then click OK
    [TIP:  You can also type the textfield name in the Text Field name:  text box (in the Property Inspector)]
  4. Type '40' in the Char width text box (in the Property Inspector)--this specifies that 40 characters will be visible inside this text field when displayed in a browser
  5. Type '100' in the Max chars text box (in the Property Inspector)--this specifies that a user can type no more than 100 characters in this field
  6. Click the Single line option button (in the Property Inspector)
  7. Repeat steps 1 through 6 to create another lable and single-line text field under the First Name label and text field, using Last Name  for the label and last_name for the text field
  8. Repeat Steps 1 through 6 to create another lable and single-line text field under the Last Name label and text field, using 'Email' for the label and 'email' for the TextField name
  9. Apply the paragraph_text style to the three new labels in the first column
    [TIP:  Another way to apply styles to the text in a table is to apply the style to a selected cell, rather than selected text in a cell--you can also apply a single style to a table--that way, all text in the table will be formatted with the same style]
  10. Save your changes, preview the page in your browser, then close your browser
    [Note:  The table heading is left-aligned, rather than centered because the CSS container style specifies a text align setting to left--this overrides the table header alignment setting to center]
    [TIP:  If you are previewing your page in IE and see a yellow background in your text boxes, this is probably caused by the Google toolbar--to remove the yellow background, click Settings (on the Google toolbar), click Options, click AutoFill Settings, then uncheck the check box "Highlight fields on Web pages that AutoFill can update in yellow"--click OK twice to save the settings]

 

Insert a Multiple-Line Text Field

  1. Click in the cell to the right of the Comments:label
  2. Click the Textarea  button (on the Insert panel), click the No label tag option button on the Input Tag Accessibility Attributes dialog box, type 'comments' in the ID text box , then click OK
  3. Verify that the Multi line option button is selected (in the Property Inspector)
  4. Type 50 in the Char width text box (in the Property Inspector)—this specifies that 50 characters will be visible inside
    this text field when the page is displayed in a browser Type 4 in the Num lines text box in the Property inspector—this specifies that the text box will display four lines of text

Summary:  You added a multiple-line text field to the form.

 

Insert Check Boxes

  1. Place the insertion point in the empty table cell to the right of “I am interested in information about:”
  2. Click the Checkbox button (on the Insert panel) to insert a check box in the form
  3. Type ‘fishing’ in the ID text box, type ‘Fishing’ in the Label text box, click the Wrap with label tag option button in the Style section, click the After form item option button in the Position section, then click OK
  4. Select the check box on the form
  5. Type ‘fish’ in the Checked value text box (in the Property Inspector)—this is the value that will be sent to your script or program when the form is processed
  6. Click the Unchecked option button after Initial state (in the Property Inspector,--the check box will appear unchecked by default—if the user clicks it, a check mark will appear in the box
  7. Format the Fishing text label with the paragraph_text rule
  8.  Insert a space after the Fishing label, then repeat Steps 2 through 6 to place a check box to the right of the Fishing text box with the check box name (ID) cruises, the label Cruises, a Checked value of cruise, and the Initial state of Unchecked
  9. Format the Cruises label with the paragraph_text rule, save your changes, preview the page in your browser, then close your browser
    [TIP:  If you are using Firefox as your browser, you might experience difficulty with individual check boxes]

Summary:   You added two check boxes to the form that will let viewers request more information about fishing and cruises.

 

Add Radio Groups to a Form

  1. Click in the empty table cell to the right of “I would like to receive your newsletters.”
  2. Click the Radio Group button (on the Insert panel) to open the Radio Group dialog box
  3. Type ‘newsletters’ in the Name text box
  4. Click the first instance of Radio in the Label column of the Radio Group dialog box to select it, then type Yes
  5. Click the first instance of Radio in the Value column to select it, then type positive—you specified that the first radio
    button will be named Yes and set positive as the value that will be sent to your script or program when the form is processed
  6. Click the second instance of Radio to add another radio button named No with a value of negative
  7. Click the Line breaks (
    tags) option button to select it
    [TIP:  If the Table option button is selected, then the radio buttons will appear in a separate table within the
    currently selected table]
  8. Click OK to close the Radio Group dialog box
  9. Format the radio button labels using the paragraph_text rule
  10. Save your work, preview the page in your browser then close your browser
    [TIP:  To create radio buttons that are not part of a radio group, click the Radio Button button (on the Insert panel)]

Summary:   You added a radio group that will let views answer whether or not they would like to receive The Striped Umbrella newsletters.

 

Add a Menu

  1. Click in the cell to the right of the text "I learned about you from:"
  2. Click the List/Menu button (on the Insert panel), click the No label tag option button in the Input Tag Accessibility Attributes dialog box, then click OK
  3. Type 'reference' in the List/Menu Name text box (in the Property Inspector)
  4. Verify that the Menu option button in the Type section is selected in the Property Inspector, then click List Values to open the List Values dialog box
  5. Click below the Item Label column heading, type Select from list:, then press Tab
  6. Type 'none' in the Value column--this value will be sent to the processing program when a viewer accidentally skips this menu--if one of the real choices was in the top position, it might return false positives when viewers really did not select it, but just skipped it
  7. Press Tab, type 'From a friend' as a new item Label, then type 'friend' in the Value column
  8. Use the Add button to add the following three Item Labels:  Internet Search, Magazine Ad, and Television Ad, setting the values as internet, magazine, and tv
    [TIP:  You can also press Tab after entering an entry in the Value column to add a new item label]
  9. Click OK
  10. Save your work, preview the page in your browser, click the list arrow to view the menu, then close your browser

Summary:  You added a menu to the form on the feedback page.



Insert a Hidden Field

  1. Click to the left of the First Name label at the top of the form to place the insertion point
  2. Click the Hidden Field button on the Insert panel—a Hidden Field icon appears on the insertion point
    [TIP:  If you do not see the Hidden Field icon, click View (on the Application bar), point to Visual Aids, then click
    Invisible Elements
  3. Type ‘required’ in the HiddenField text box (in the Property inspector), then type first_name,  last_name, email in the Value text box—typing first_name, last_name, email in the Value text box specifies that viewers must enter text in the First Name, Last Name, and Email fields before the script can process the form—the text must match the field names in your form exactly
  4. Save your work

Summary:  You added a hidden field to the form that will let viewers know if they neglect to complete the fields for their first name, last name, and email address.

 



Add Submit and Reset Buttons

  1. Click in the second cell of the second to last row of the table
  2. Click the Button button (on the Insert panel), type ‘Submit’ in the ID text box, click the No label tag option button in the Input Tag Accessibility Attributes dialog box, then click OK
  3. Verify that the Submit form option button is selected next to Action (in the Property inspector)—w hen a viewer clicks the Submit button, the information in the form will be sent to the processing script
  4. Verify that “Submit” is the name in the Value text box (in the Property inspector)
  5. Click to the right of the Submit button on the form, insert a space, then click the Button button (on the Insert panel), click the No label tag option button in the Input Tag Accessibility Attributes dialog box, click OK, click the Reset form option button (in the Property inspector), verify that the Value text box, is set to Reset—when a viewer clicks the Reset button, the form will remove any information typed by the viewer
  6. Save your work
  7. Post to the Hulk server


Summary:  You added a Submit button and a Reset button to the form.