473,721 Members | 2,421 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Styling a form for print

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
3 4351
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
6837
by: Peter Collinson | last post by:
Hi... Is there any way to style a List Item a different color and size than the <LI> in an Ordered List? I'd like a red super-script number and a dark blue text in a page's footnotes. And this be done using style sheets? -- - Yours truly, Pete Collinson
17
6173
by: CJM | last post by:
....When I say 'form' I'm talking about a conventional paper version, as opposed to a <form>. I'm building a web-based application which needs to be able to create Invoices/Advice Notes/Order Acknowledgements etc... The application itself has a largely fluid layout, but for these printed documents I need to make them fixed, such that the printed layout is consistent. That is, they need to look consistent on an A4 page. Its worth...
10
2515
by: CJM | last post by:
....When I say 'form' I'm talking about a conventional paper version, as opposed to a <form>. I'm building a web-based application which needs to be able to create Invoices/Advice Notes/Order Acknowledgements etc... The application itself has a largely fluid layout, but for these printed documents I need to make them fixed, such that the printed layout is consistent. That is, they need to look consistent on an A4 page. Its worth...
27
3347
by: Tom Cole | last post by:
I'm starting to do more quantity of javascript coding and thought this might be a good time to investigate code styling. I primarily develop in Java and currently use the code styling techniques spelled out for Java. For example, in my code blocks ( {} ) I always place the starting brace on the same line as the first line of code. For example: function myFunction {
3
4210
by: Momomo | last post by:
Hi, I am having a problem with a control which is caused by a style on the page which I am not able to trace. If I use the control in a page without any styling it looks ok. Is there a way to remove/turnoff all CSS styling inside a div?
3
3206
by: nicky77 | last post by:
Hi, before you say it i know frames are bad practice - but i'm developing dynamic content on a site which has already been designed, so alas there's no option but to use them. Anyway, I just want to add simple styling to the scrollbar of the left hand frame of the page, but the styling i've applied isn't working for some reason. The site is at http://www.maguiresonline.co.uk/new_website/index.html It's the scrollbar in the middle of the...
40
2672
by: Jukka K. Korpela | last post by:
My basic style sheet has a distinctive background and border for forms, to make the structure clearer and to make it visually evident what belongs to a form. However, as people complained that some forms were odd-looking, I noticed that indeed, fairly often the background is not applied and there is empty space inside a form I didn't ask for. This was rather puzzling until I realized that the observed cases seem to result from one...
2
2453
by: shapper | last post by:
Hello, I am styling the labels on a section of my page as follows: label {float: left; width: 6.5em;} Now I want to remove this styling from a label that has the class "Message". Mu questions are:
1
1463
by: krraleigh | last post by:
I am trying my hand at styling forms for the first time I found this link out on the internet showing me what to do, but I don't follow all that is going on. I was wondering if someone had a few minutes to help me clean up the top of the first form. If you look at it you will see that I used a span to absolutly position the fieldset legend, across the top of the first form, but for some reason the line is still being hidden by...
0
8851
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8736
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9373
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9227
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9138
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8016
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
3201
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2584
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2137
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.