CSS Cookbook-Recipe 8.2 Making a Web Form Print-Ready

Recipe 8.2 Making a Web Form Print-Ready

Problem

You need to have a form that users can fill out online, or that they can print and then fill out offline, as shown in Figure 8-1.

Figure 8-1. An online form

Solution

First, create a print media style sheet and a class selector that transforms the form elements so that they display black text and feature a one-pixel border on the bottom. For example, the following HTML code for an input text element:

<label for="fname">First Name</label>
<input class="fillout" name="fname" type="text" id="fname" />

requires the following CSS rule:

<style type="text/css" media="print ">
.fillout {
 color: black;
 border-width: 0;
 border: 1px solid #000;
 width: 300pt;
}
</style>

For drop-down menus, hide the select element altogether and add some additional markup to help produce the bottom border:

<label for="bitem">Breakfast Item</label>
<select name="bitem" size="1">
 <option selected="selected">Select</option>
 <option>Milk</option>
 <option>Eggs</option>
 <option>Orange Juice</option>
 <option>Newspaper</option>
 </select><span class="postselect">  </span>

Then, in the CSS rules, convert the inline span element to a block element. This enables you to set the width of the span element and places the border at the bottom to equal that of the input elements in the preceding CSS rule:

<style type="text/css" media="print">
select {
 display: none;
}
.postselect {
 display: block;
 width: 300pt;
 height: 1em;
 border: none;
 border-bottom: 1px solid #000;
}
</style>

For elements such as a Submit button, which can't be used on the printed page, set the display property to none. You can see the finished product in Figure 8-2.

Figure 8-2. The same form primed for printing

Discussion

Lines on an order form tell users they can fill out the form. By using the border property, you can easily create these lines in a browser, making web forms useful both online and offline.

For select elements, the workaround is somewhat of a hack that involves interfering with the ideal semantic markup; it still works and is valid HTML. Place a span element after the select element:

<select name="bitem" size="1">
 <option selected="selected">Select</option>
 <option>Milk</option>
 <option>Eggs</option>
 <option>Orange Juice</option>
 <option>Newspaper</option>
</select>
<span class="postselect">  </span>

Then set the select element to disappear:

select {
 display: none;
}

Next, set the span element to display as a block to enable the width and height properties. With those width and height properties set, the bottom border can be placed to match the rest of the form elements:

.postselect {
 display: block;
 width: 300pt;
 height: 1em;
 border: none;
 border-bottom: 1px solid #000;
}

As browsers implement attribute selectors from the CSS specification, styling forms for print becomes easier. Currently, the only browsers that support attribute selectors are Netscape Navigator 6+ and Opera 5+. When you use attribute selectors, it's easier to distinguish which form elements should be stylized than it is when you insert class attributes and their respective values in the markup.

In the following code, the first CSS rule applies only to input elements for text, while the second rule hides the Submit button and the Select drop box:

input[type="text"] {
 color: black;
 border-width: 0;
 border: 1px solid #000;
}
input[type="submit"], select {
 display: none;
}