Help
This excerpt from Christopher Shcmitt's CSS Cookbook will show you how to build a form that users can fill out online, or that they can print and then fill out offline, as shown in Figure 10.3.
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;
}
.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 10.4, “The same form primed for printing”.
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;
}
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;
}
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:
<strong class="userinput"><code>input[type="text"]</code></strong> {
color: black;
border-width: 0;
border: 1px solid #000;
}
<strong class="userinput"><code>input[type="submit"],</code></strong> select {
display: none;
}
Note
The good news is that most modern browsers now support attribute selectors; however, Internet Explorer 6 does not.
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:
<span class="strong"><strong><div id="print"></strong></span> <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>
<span class="street-address work postal">1600 Pennsylvania Avenue NW </span>
<span class="locality">Washington, DC</span> <span class="postal-code">20500</span>
<span class="country-name">USA</span> </address> <span class="strong"><strong></div></strong></span>
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" <strong class="userinput"><code>media="screen"</code></strong>>
.print {
<span class="strong"><strong>display: none;</strong></span>
}
</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" <strong class="userinput"><code>media="print"</code></strong>>
.print {
<span class="strong"><strong>display: block;</strong></span>
}
</style>
Learn how to solve the real problems you face with CSS. This cookbook offers hundreds of practical examples for using CSS to format your web pages, and includes code samples you can use right away. You'll find exactly what you need, from determining which aspects of CSS meet the specific needs of your site to methods for resolving differences in the way browsers display it.
