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.
