Description
New Perspectives on HTML and CSS Edition 6 Tutorial 6 Case Problem 2 Creating a Web Form
Data Files needed for this Case Problem: diners.png, discover.png, formsubmit.js, go.png, master.png, modernizr-1.5.js, paytxt.css, regex.txt, sb.css, sbback.png, sblogo.png, spicetxt.htm, state.txt, stop.png, visa.png
The Spice Bowl Rita Sato is the manager of the Web development team for The Spice Bowl, a new online grocery store specializing in gourmet spices. She’s asked you to work on the Web forms for the site. The first form you’ll create is a payment form in which customers enter their billing address and credit card data. She wants you to include validation tests for customers postal codes, phone numbers, e-mail addresses, and credit card numbers. A preview of the form you’ll create is shown in Figure 6-79.
Complete the following:
1. In your text editor, open the spicetxt.htm and paytxt.css files from the tutorial.06\case2 folder included with your Data Files. Enter your name and the date in the comment section of each file. Save the files as spice.htm and payment.css respectively.
2. Go to the spice.htm file in your text editor and review the contents and structure of the document. Link the file to the payment.css style sheet.
3. Scroll down to the h1 heading Payment Form, and below it insert a form element with the action http://www.thespicebowlcorp.com/cgi-bin/payment using the post method.
4. Within the form, create three field sets with the ids billing, creditcard, and info, and with the legend text Billing Information (required), Credit Card (required), and Additional Information, respectively.
5. Within the billing field set, create input boxes for the customer’s first name, last name, street address, second line of the street address, and city with the field names fNane, lNane, street, street2, and city, respectively. Add field labels for these input boxes as shown in Figure 6-79.
6. Create a selection list for the state field containing two-letter abbreviations of the state names. You can find a list of state abbreviations in the state.txt file. Add the label text State.
7. Create an input box for the zip field along with the label text ZIP/Postal Code. The pattern of the field value should match the regular expression for postal codes. You can use the regular expression patterns listed in the regex.txt data file.
8. Create an input box for the country field along with the label text Country. Make the default value of the field equal to the text string United States.
9. Create an input box for the phone field along with the label text Phone. The pattern of the field value should match the regular expression for phone numbers.
10. All of the fields within the billing field set should be marked as required fields with the exception of the street2 field.
11. Within the creditcard field set, create a field set belonging to the class optionGroup. Within this field set, create four label elements. Within each label, create an option button belonging to the card field followed by an inline image belonging to one of four credit card companies. The field values associated with the four option buttons are diners, discover, master, and visa, and the inline images are diners.png, discover.png, master.png, and visa.png, respectively.
12. Directly below the optionGroup field set, create an input box for the ccardnumber field along with the label text Credit Card Number. The text of the field value should match the regular expression for credit card numbers found in the regex.txt file.
13. Add a label containing the text Expiration Date followed by a selection list for the ccardmonthfield field that contains the first entry –Month– followed by the text for each individual month in chronological order from January (01) through December (12). Also add a selection list for the ccardyear field with the first entry –Year– followed by year values for 2014 through 2018.
14. Add a label containing the text CSC followed by an input box for the csc field. The csc field should be limited to three characters, follow the regular expression pattern \d{3 }$ and display the placeholder text nnn.
15. Make all of the fields within the creditCard field set required fields.
16. Within the info field set, create a label containing the text Contact Email followed by an input box for the email field that uses the email data type.
17. Add a label containing the text Special Notes followed by a text area box for the notes field.
18. At the bottom or the form, directly above the closing
tag, insert a submit button with the button text Submit Order.
19. Save your changes to the file, and then go to the payment.css file and add styles rules for the different form elements as described in the following steps.
20. Display all field sets without borders and with a 5-pixel margin. Display all field set legends with a background color of (239, 198, 145) and a text color of black. Set the top and bottom margins to 10 pixels and indent the legend text 20 pixels. Set the width of the legend to 1O0% of the width of the field set. Finally, add rounded borders to the legend, 1 0 pixels in radius.
21. Display all labels as blocks, floated on the left margin once the left margin is clear. Set the font size to 0.8em and align the label text to the right. Set the top and bottom margins to 2 pixels, and set the left and right margins to 5 pixels. Set the width of the labels to 25%.
22. Display all input elements as blocks, floated on the left with a font size of 0.9cm and a width of 60%. Set the top and bottom margins to 2 pixels, and set the left and right margins to O pixels.
23. Display all select elements as blocks floated on the left with a font size of 0.9 em and a margin of 2 pixels.
24. Display all textarea elements as blocks floated on the left with a font size of 0.9 em, a height of 75 pixels, and a width of 60%.
25. Set the left margin of the field set belonging to the optionGroup class to 25%. For label elements nested within the optionGroup field set: a) display the labels inline; b) do not float the labels; and c) set the label width to 100 pixels.
26. Display option buttons inline with no floating. Set the margin of the option buttons to 0 pixels and the width to 20 pixels.
27. Set the width of the input box for the csc field to 50 pixels.
28. For the submit button, add the following styles: a) set the background color to the value (239, 198, 145); b) do not float the input box; c) set the dimensions of the button to 150 pixels wide by 30 pixels high; d) set the top and bottom margins to 10 pixels. and set the left and right margins to auto; and e) add a rounded border with a 15-pixel radius.
29. When input, select, and textarea elements receive the focus, change the background color to the value (255, 218, 165).
30. When an input element receives the focus and is invalid, change the background color to the value (255, 245, 215) and display the stop.png background image file in the bottom-right corner of the input box with no tiling.
31. When an input element receives the focus and is valid, change the background color to the value (215, 255, 215) and display the go.png image in the bottom-right corner of the input box with no tiling.
32. Save your changes to the style sheet.
33. Open the spice.htm file in your Web browser. Verify that you cannot submit the form without all required fields filled out, and without phone number, e-mail address, and CSC values entered in the proper format.
34. Verify the validation checks for the credit card number by confirming that the form rejects the following credit card numbers (which are not valid card numbers):
• 31012345678901
• 6012123456789019
• 5912345678901235
• 8123456789012349
35. Further verify the validation checks for the credit card number by confirming that the form accepts the following credit card numbers which are valid card numbers:
• 30312345678901
• 6011123456789019
• 5112345678901235
• 4123456789012349
36. Submit your completed files to your instructor, in either printed or electronic form, as requested.
Reviews
There are no reviews yet.