Index by Christopher Schmitt

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

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 10-3.

An online form

Figure 10-3. An online form

Solution

First, create a print media stylesheet and a class selector that transforms the form elements so that they display black text and feature a 1-pixel border on the bottom.

For example, consider the following HTML code for an input text element:

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

To style the form element 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; } ...

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required