Eric Meyer

on CSS

cover image
Available now!

Making an Input Form Look Good

Project 7

preview image 1 preview image 2 preview image 3
Project files
Project 7 ZIP file Project 7 StuffIt file

We can skip around the web all day long, clicking from page to page, but when you get right down to it, the engine of expansion on the Web is forms. Without them, people couldn't input their personal information to let them buy stuff-- let alone actually tell an e-commerce server what they want to buy.

To get a better feel for forms and the issues involved with styling them, Project 7 lets readers try their hand at pepping up a simple survey form for both screen and print. In addition to reinforcing the principles covered in Project 6, this project shows how form elements can be restyled for print so that they look more like traditional forms.


A select listing of pages that show new or striking ways of using the concepts presented in this project.


Page 158

The declaration vertical-align: top; should be stricken from the td.lbl rule at the top of the page.

Page 159

The code block just before Figure 7.15 should read:

div#submitArea {display: none;}
div#mailArea p:first-line {font-weight: bold;}

The markup in the project files is correct, as are other code blocks in the project.