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

21. Display all labels as blocks, floated on the left margin once the left margin is clear.
Set the font size to 0.8 em and align the label text to the right. Set the top and bot-
tom 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.9 em
and a width of 60%. Set the top and bottom margins to 2 pixels, and set the left and
right margins to 0 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 back-
ground 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.