Skills Review

Sample Solution

Plan and create a form [Lesson 1]

  1. Open the blooms & bulbs website
  2. Open the tips page
  3. Scroll to the bottom of the page, insert two paragraph breaks to end the ordered list after the last line of text, then insert a form
  4. Click on the form to bring up the Property Inspector (at the bottom of the page)
  5. Set the Method to POST (in the Property Inspector)
  6. Name the form 'submit_tips'
  7. Set the Target to_self
  8. Save your work

 

Edit and format a form [Lesson 2]

  1. Insert a table within the form that contains 9 rows and 2 columns--set the Table width to 75%, set the Border thickness to 0, the Cell padding to 2, and the Cell spacing to 1
  2. Choose the Tip row header icon, then include an appropriate table summary that indicates that the table will be used for form layout purposes
  3. Merge the cells in the top row and type 'Submit Your Favorite Gardening Tip' in the newly merged cell
  4. Format the text you typed in Step 3 with the bold_blue style
  5. Type 'Email' in the first cell in the second row
  6. Type 'Category' in the first cell in the third row
  7. Type 'Subject' in the first cell in the fourth row
  8. Type 'Description' in the first cell in the fifth row
  9. Apply the paragraph_text style to the labels you typed in Steps 5 through 8
  10. Merge both cells in the sixth row of the table, then insert the lable 'How long have you been gardening?' in the resulting merged cell
  11. Merge both cells in the seventh row of the table, then insert the label 'Receive notification when new tips are submitted?' in the resulting merged cell
  12. Apply the paragraph_text rule to the text you typed in Steps 10 and 11, then save your work

 

Work with form objects [Lesson 3]

  1. Click in the second cell of the second row--insert a text field with no label tag, naming it 'email'
  2. Set the Char width property to 30 and the Max chars property to 150
    [Hint:  The Image Tag Accessibility Attributes dialog box will not appear if you do not have the accessibility preferences set for adding form objects]
  3. Click in the second cell of the fourth row, then insert a text field with no label tag and the name 'subject'
  4. Set the Char width to 30 and the Max chars to 150
  5. Click in the second cell of the fifth row, then inset a textarea with no label tag and the name 'description'
  6. Set the Char widthto 40 and the Num lines to 5
  7. Insert a space and a check box with no label tag to the right of the 'Receive notification when new tips are submitted' label--set the name of the check box to 'receivetips', type 'yes' in the Checked value text box, then verify that the initial state in Unchecked
  8. Insert a radio group, using the line breaks named 'years_gardening' to the right of the text 'How long have you been gardening?' that contains the following labels:  1-5 years, 5-10 years, Over 10 years
  9. Use the following corresponding values for each label:  1-5, 5-10, and 10+
  10. Apply the paragraph_text style to the labels
  11. Insert a list/menu named 'category' in the empty cell to the right of Category
  12. Set the Type to List and the Height to 2
  13. Use the List Values dialog box to add the following item labels:  Weed  control, General growth, and Pest control
  14. Set the corresponding values for each to weeds, growth, and pests
  15. Insert a hidden field named 'required' in the first cell of the eighth row that has the value 'email'
  16. Insert a Submit button named 'submit' in the second cellof the eighth row
  17. With your insertion point to the right of the Submit button, insert a Reset button named 'reset' with the Reset form action
  18. Save your work

 

Test and process a form [Lesson 4]

  1. Check the spelling on the form and correct any errors you find
  2. Type * (an asterisk) after the label Email
  3. Merge the cells in the last row, then type '*Required field' in the last row
  4. Apply the bold_blue rule to the text you typed in Step 3
  5. Insert a horizontal rule that is 630 pixels wide both before and after the form
  6. Use the Indent button (in the Property inspector) to indent the form in the CSS container
    [Hint:  To access the indent buttons, select the table, then press the left arrow key]
  7. Save your work
  8. Preview the page in your browser, then test the form by filling it out and using the Reset button
  9. Close your browser, then close all open pages
  10. Post to the Hulk server