HTML and CSS Reference
In-Depth Information
Apply your
knowledge of
Web forms and
CSS to create a
payment form for
a salt and spice
online grocery
store.
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.
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
method.
