New Perspectives on HTML and XHTML Tutorial 6 Case Problem 1 Solution
Data Files needed for this Case Problem: parch.jpg, pcg.css, pcglogo.jpg, sformtxt.css, and subtxt.htm
The Park City Gazette Kevin Webber, the editor of the Park City Gazette of Estes Park, Colorado, has asked for your help in developing a subscription page for the newspaper’s Web site. The page includes a form where customers can enter the length of the subscription they want to purchase, their mailing address, and their credit card information. Kevin has already created much of the layout and text of the Web page. Your job is to add the fields and control elements for the subscription form. A preview of the Web page you’ll create for Kevin is shown in Figure 6-60.
The form contains several labels and control elements placed side-by-side in two columns. To create this two-column layout, you’ll float the labels and control elements on the left margin. You’ll identify the labels that are floated by putting them into the float-Label class. The floated control elements will belong to the floatCtrl class.
Complete the following:
1. Use your text editor to open the sformtxt.css and subtxt.htm files from the tutorial.06\case1 folder included with your Data Files. Enter your name and the date in the comment section of each file. Save the files as sform.css and subscription.htm, respectively, in the same folder.
2. Go to the subscription.htm file in your text editor and insert a link to the sform.css style sheet.
3. Scroll down the file and insert a form element with the id subForm, directly below the paragraph in the rightColumn div container.
4. At the top of the form, Kevin wants an option list showing the four different payment plans. Insert a field set with the id subPlans. Within the field set do the following:
• Insert four option buttons belonging to the subplan field.
• Give the option buttons the ids plan1 through plan4 and the values 1 through 4.
• After each option button, insert a label element associated with the preceding option button. The text of the four labels is “6 mo./$24”, “12 mo./$45”, “18
mo./$64″, and “24 mo./$80 (best value)”.
5. After the subPlans field set, insert a label containing the text “Name”. Associate the label with the cName field and put it in the class floatLabel.
6. After the label, insert an input box for the cName field. Place the input box in the floatCtrl field and set the size of the input box to 50 characters.
7. Insert another label containing the text “Address” associated with the address field and belonging to the floatLabel class. After the label, insert a text area box for the address field. Set the size of the box to six rows by 50 columns and place the text area box in the floatCtrl field.
8. Insert a label with the id agreeLabel associated with the agree field. Place the label in the floatLabel class. Within the label element, insert a check box for the agree field. After the check box, but within the label element, insert the text “Yes, I wish to pay online by entering my credit card information below.”
9. Insert a field set with the id payment. At the top of the field set, insert a label belonging to the floatLabel class, containing the text “Credit Card” and associated with the cardType field.
10. Insert a selection list for the cardType field. Do the following for the selection list:
• Place the selection list in the floatCtrl class.
• Set the selection list to display four items.
• Add the following options to the selection list: American Express, Discover, MasterCard, and Visa.
• Set the values of the four options to: Amex, Disc, MC, and Visa.
11. Below the selection list, insert two labels. The first label should contain the text “Name on Card” and should be associated with the cardName field. The second label should contain the text “Card Number” and should be associated with the cardNumber field. Put both labels in the floatLabel class.
12. Directly after each label, insert an input box. The first input box should be for the cardName field; the second input box is for the cardNumber field. For both input boxes, set the width to 30 characters and place the input box into the floatCtrl class.
13. Insert a label belonging to the floatLabel class and containing the text “Expiration Date”. After the label, insert two selection lists for the expMonth and expYear field. Do the following for the selection lists:
• Place both selection lists in the floatCtrl class.
• Add 12 options to the expMonth selection list containing the text “01” through “12”. The values of the options should range from 1 to 12.
• Add five options to the expYear selection list containing the text “2011” through “2015”. Set the values of each option to match the option text.
14. Insert a field set with the id buttons. Within the field set, insert a submit and reset button. Give the submit button the value Subscribe. Give the reset button the value Cancel.
15. Use the CGI script at http://www.theparkcitygazette.com/subscribe with the post method.
16. Save your changes to the file.
17. Go to the sform.css file in your text editor and add the following styles to the style sheet:
• Set the background color of the subPlans field set to white. Set the padding to 5 pixels and the bottom margin to 20 pixels. Center the contents of the field set.
• For label elements within the subPlans fieldset element, set the right margin to 15 pixels.
• Display objects belonging to the floatLabel class as block-level elements, floated on the left margin but only when the left margin is clear. (Hint: Use the clear style.) Set the width to 150 pixels and the bottom margin to 10 pixels. Right-align the label text.
• Display objects belonging to the floatCtrl class as block-level elements, floated on the left margin. Set the left margin to 20 pixels and the bottom margin to 10 pixels.
• Set the width of the agreeLabel label to 600 pixels with top/bottom margins of 20 pixels and left/right margins of 0 pixels. Center the label text.
• Display the payment field set only when the left margin is clear. Set the background color to white. Set the width of the field set to 400 pixels with a left margin of 100 pixels and 5 pixels of padding.
• Center the contents of the buttons field set with top/bottom margins of 10 pixels and left/right margins of 0 pixels. Set the border style to none.
18. Save your changes to the sform.css file and open subscription.htm in your Web browser. Verify that the layout and content of the Web form resemble that shown in Figure 6-60.
19. Submit your completed files to your instructor.