Making a Web Form Print-Ready

 You need to have a form that users can fill out online, or that they can print and then
fill out offline, as shown above.


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:

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;

}

.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 the picture below.

Discussion
Lines created in the print stylesheet on an order form tell users they can fill out the form
fields. 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;

}

selecdisplay: 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, you can place the bottom border to
match the rest of the form elements:

.postselect {

display: block;

width: 300pt;

height: 1em;

border: none;

border-bottom: 1px solid #000;

}

Using attribute selectors to differentiate form elements

Attribute selectors from the CSS specification make it easier to style forms for print.
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, whereas
the second rule hides the Submit button and the Select drop-down box:

input[type="text"] {

color: black;

border-width: 0;

border: 1px solid #000;

}

input[type="submit"], select {

display: none;

}

The good news is that most modern browsers now support attribute

selectors; however, Internet Explorer 6 does not.


Adding user friendliness
Since the form is now being printed, site visitors cannot use the Submit button to
transmit their information. Be sure to provide the next steps users should follow after
they have completed the printed form.
For example, if you want users to mail the form, add a mailing address to the page on
which the form is printed, as shown in the following code:

<div id="print">

<p>Please mail the form to the following address:</p>

<address class="adr">

<span class="org">

<span class="organization-name">The White House</span>

</span><br />

<span class="street-address work postal">1600 Pennsylvania Avenue NW

</span><br />

<span class="locality">Washington, DC</span>

<span class="postal-code">20500</span><br />

<span class="country-name">USA</span>

</address>

</div>

Notice that the instructions are wrapped with a div element where the class attribute’s

value is set to print. In the stylesheet for screen delivery, set the display property for
this specific class to none:

<style type="text/css" media="screen">

.print {

display: none;

}

</style

>With a separate stylesheet for print delivery, allow the instructions to be printed by

setting the display property to block:

<style type="text/css" media="print">

.print {

display: block;

}

</style>

Enjoy, please commments


See Also
Attribute selector documentation in the W3C specification at http://www.w3.org/TR/CSS21/selector.html #attribute-selectors; the HTML   specification for the label tag
at http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL