Creating a Web Form - HTML, CSS, and Dynamic HTML - page 477

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
fName , lName , 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 ccard 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 ile.
13. Add a label containing the text expiration Date followed by a selection list for the
ccardmonth 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 of the form, directly above the closing </form> 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 100% of the width of the field set. Finally, add rounded bor-
ders to the legend, 10 pixels in radius.