By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,375 Members | 1,116 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,375 IT Pros & Developers. It's quick & easy.

Styling a form for print

P: n/a
On the website of the Dutch Jules Verne Society (www.jules-verne.nl),
we have several forms that visitors can use to order something, or to
apply for membership. Of course, a form's primary purpose is to be
filled out online, but I can imagine, for example, one of our members
giving a talk and printing a pile of application forms to hand out to
the audience.

I am trying to add some specific styles in the print stylesheet so the
forms will look nice on paper too. I don't mind using some more
advanced CSS, like :before and :after, even if this means that IE and
friends get a less fancy styling. This is also an exercise for myself
to explore the possibilities of CSS.

I'm playing around with the styling at this test page:
http://www.phys.uu.nl/~gdevries/test/formprint/

Some specific styles for print:
* don't display the submit button, it has no use on paper anyway.
* instead of a border around a text input, use only a border-bottom,
and give the field some more vertical space.

Here are some issues I encountered:

1) I'm not quite sure how to handle a choice between a limited number
of options, like the applicant's gender. I'd like to show all options
when printed, preferably separated by a / and with a remark like "pick
one". At the same time, it should look nice on the screen. I've come up
with the following solution:
<ul>
<li><input type="radio" name="Sex" id="SexM" value="M" /><label
for="SexM">Mr.</label></li>
<li><input type="radio" name="Sex" id="SexF" value="F" /><label
for="SexF">Mrs.</label></li>
</ul>

where the <li> get display: inline both for screen and for print. In
the print style I can use:
form ul li:before { content: "/ "; }
form ul li:first-child:before { content: ""; }
form ul:after { content: " (select one)"; }
input[type=radio] { display: none; }

One drawback is that it doesn't like quite so nice without any styles
applied at all. And is a <ul> semantically correct here?

2) I used to use <select> for multiple choices, but when you print
those, you only see the first option. I haven't managed to use CSS to
get a similar look as with the listed radio buttons. Any suggestions?

3) The last issue concerns checkboxes. On the screen, I prefer to have
the "agree with the statutes" unchecked by default, since new members
have to make this choice deliberately. On the other hand, I'd like to
have "join the discussion group" box checked by default, since most new
members want to join it anyway. Now, if you fill out a printed form
using a pen or pencil (remember those?), it's easy to check an
unchecked checkbox, but not so easy to uncheck an already checked
checkbox. Is there a CSS way to have all checkboxes printed empty?

Of course, I don't expect the printed form to look just as nice as when
I'd use PDF, but that's not the purpose. My goal is to make a form
that's already there look as nice as possible when printed.

--
Garmt de Vries.

Nov 23 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
A quick follow-up to my own post...

Garmt de Vries wrote:
<ul>
<li><input type="radio" name="Sex" id="SexM" value="M" /><label
for="SexM">Mr.</label></li>
<li><input type="radio" name="Sex" id="SexF" value="F" /><label
for="SexF">Mrs.</label></li>
</ul>

where the <li> get display: inline both for screen and for print. In
the print style I can use:
form ul li:before { content: "/ "; }
form ul li:first-child:before { content: ""; }
form ul:after { content: " (select one)"; }
input[type=radio] { display: none; }


Forget about the list, it can also be done by putting all the radio
buttons in a <span class="mc">, and styling:
.mc label:before { content: "/ "; }
.mc input:first-child + label:before { content: ""; }
.mc:after { content: " (select one)"; }

--
Garmt de Vries.

Nov 23 '05 #2

P: n/a
A quick follow-up to my own post...

Garmt de Vries wrote:
<ul>
<li><input type="radio" name="Sex" id="SexM" value="M" /><label
for="SexM">Mr.</label></li>
<li><input type="radio" name="Sex" id="SexF" value="F" /><label
for="SexF">Mrs.</label></li>
</ul>

where the <li> get display: inline both for screen and for print. In
the print style I can use:
form ul li:before { content: "/ "; }
form ul li:first-child:before { content: ""; }
form ul:after { content: " (select one)"; }
input[type=radio] { display: none; }


Forget about the list, it can also be done by putting all the radio
buttons in a <span class="mc">, and styling:
.mc label:before { content: "/ "; }
.mc input:first-child + label:before { content: ""; }
.mc:after { content: " (select one)"; }

--
Garmt de Vries.

Nov 23 '05 #3

P: n/a
Tim
On Mon, 14 Nov 2005 08:40:21 -0800, Garmt de Vries sent:
3) The last issue concerns checkboxes. On the screen, I prefer to have
the "agree with the statutes" unchecked by default, since new members
have to make this choice deliberately.
Which would tally with general principles about constructing user-friendly
forms (don't pre-agree people to things).
On the other hand, I'd like to have "join the discussion group" box
checked by default, since most new members want to join it anyway.
I wouldn't have done that unless joining was the main purpose for using
the form.
Now, if you fill out a printed form using a pen or pencil (remember
those?), it's easy to check an unchecked checkbox, but not so easy to
uncheck an already checked checkbox. Is there a CSS way to have all
checkboxes printed empty?


Well, the most obvious way would be to not preselect the checkbox in the
first place. Second to that might be to hide that form section completely
from printing, and have another almost identical looking one unhidden for
printing.

--
If you insist on e-mailing me, use the reply-to address (it's real but
temporary). But please reply to the group, like you're supposed to.

This message was sent without a virus, please destroy some files yourself.

Nov 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.