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

16. Create range sliders for the next four items in the sizes field set. Figure 6-81 lists
the label text, field names, and ranges of the range sliders in the CSS demo page.
Add appropriate range labels before and after the range sliders as indicated in
Figure 6-80.

figure 6-81 range sliders in the css demo page

Field label Text Default range

fontsize Font Size (px) 14 8 - 40 by 1

letterspacing Letter Spacing (px) 0 0 - 10 by 1

wordspacing Word Spacing (px) 0 0 - 10 by 1

lineheight Line Height (em) 1 0 - 4 by 0.2

textindent Text Indent (px) 0 0 - 10 by 1

17. Directly after the sizes field set, add a command button containing the text remove
styles and the id removestyles .
18. Scroll to the top of the file. Within the head element, add a script element to con-
nect to the rundemo.js file.
19. Save your changes to the file.
20. Open the cssdemo.htm file in a Web browser that supports range sliders. Test the
form by entering sample text into the text area box near the top of the form. Verify
that when you tab out of the text area box, the text appears in the rendering box at
the bottom of the page.
21. Change the style of the rendered text by selecting options and values from the style
controls on the form.
22. If you have access to Opera or another Web browser that supports the color data
type, verify that you can change the font and background color using a color picker.
If your browser does not support the color data type, change the colors by entering
hexadecimal values for the font color and background color fields.
23. Submit your completed files to your instructor, in either printed or electronic form,
as requested.

Case Problem 4

Test your
knowledge of
Web forms by
creating an order
form for an
online computer
store.

Data files needed for this case Problem: formsubmit.js, go.png, mclogo.jpg,
modernizr-1.5.js, stop.png

Millennium Computers You are employed at Millennium Computers, a discount mail-
order company specializing in computers and computer components. Your supervisor,
Sandy Walton, has asked you to create an order form Web page so that customers can
purchase products online. Your order form is for computer purchases only. There are
several options for customers to consider when purchasing computers from Millennium.
Customers can choose from the following:

• Processor Speed: 3.2 GHz, 4 GHz, 5.2 GHz
• Memory: 1 GB, 2 GB, 4 GB, 8 GB
• Monitor Size: 15", 17", 19", 21"
• Hard Drive: 240 GB, 500 GB, 750 GB, 1 TB
• DVD Burner: yes/no
• Tuner Card: yes/no
• Media Card Reader: yes/no