HTML and CSS Reference
Web forms and
CSS to create a
payment form for
a salt and spice
Case Problem 2
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 cus-
tomers enter their billing address and credit card data. She wants you to include valida-
tion 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.
the spice bowl payment form
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