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

Complete the following:

1. Use your text editor to create an HTML file named pc.htm and two style sheets
named mill.css and oform.css . Enter your name and the date in a comment section
in each file. Include any other comments you think will aptly document the purpose
and content of the files. Save the files in the tutorial.06\case4 folder included with
your Data Files.
2. Design a Web page for Millennium Computers. Insert any styles you create in the
mill.css style sheet. You are free to use the mclogo.jpg file and whatever text or
images you wish to complete the look and content of the Web page.
3. Within the pc.htm file, insert a Web form containing the following elements:
• Input boxes for the customer's first name, last name, street address, city, state,
zip code, and phone number. The field names should be fName , lName , street ,
city , state , zip , and phone , respectively.
• Selection lists for the processor speed, memory, monitor size, and hard drive
size. The field names should be pSpeed , mem , monitor , and hd , respectively. The
option values should match the option text.
• Option buttons for the DVD burner, tuner card, and media card reader options.
The field names should be dvd , tuner , and mCard , respectively.
• A check box for the warranty field that asks whether customers want the
24-month extended warranty.
• A text area box requesting additional information or comments on the order.
• Three form buttons: a submit button with the text send Order , a reset button
with the text cancel Order , and a command button with the text contact me .
• Add validation checks marking all of the customer contact fields as required.
• Use regular expression patterns to ensure that each user enters his or her zip
code and phone number in the correct format.
4. Name the form cOrder and add attributes so the form is submitted using the post
method to the CGI script located at http://www.mill_computers.com/orders/process.cgi .
5. Create a style for your form in the oform.css style sheet. The layout and appearance
of the form are up to you. It should include style rules to highlight input boxes that
receive the focus, and it should employ inline validation for missing or incorrectly
entered data.
6. Test your Web site on a variety of browsers to ensure your design works under differ-
ent conditions.
7. Submit your completed files to your instructor, in either printed or electronic form,
as requested.

enDing DaTa FileS

tutorial.06 tutorial review case1

survey.htm
forms.css

order.htm
pizza.css

sblogger.htm
comments.css

case2 case3 case4

spice.htm
payment.css

cssdemo.htm pc.htm

mill.css
oform.css