Print form options

Hi gang,

Don’t know if this is a CSS issue or not; please redirect me if not. I am having a problem getting my form to print with the options selected by the user. I have a very simple series of form fields which are all select inputs and that offer a drop down list of several choices. Basic shopping list where the user chooses from pre-defined select options (i.e. banana, grapes, lettuce, etc.) I give a print option at the bottom of the page. The problem is that the user choice is not populated in the form fields when it prints. All form fields are printed with the top item of the list of select options.

Is there any way to get the item that the user selected to print instead of just the top item of each of my select options? I have a print style sheet set up; am I missing something in my CSS which tells the form to print the user’s choices? Thanks in advance for your help!


The problem with allowing the user to print the form while it’s got their inputs showing is that there’s no guarantee that that is what is actually submitted. They could easily change some of those fields, accidentally or deliberately, before hitting the submit button.

If you want to give people the option to print their form, it would be better to wait until after they’ve submitted it, and then give them an output showing what they had chosen in regular text.

We made a form people could print out after filling it (there is no submit button). The idea was, people who wanted to send in a form via old-fashioned mail could, while having the benefit of filling stuff in by keyboard.Or, they could also print it out without filling it in, if they wanted (but the PDF we offered would have been preferred… had the company bothered to update the PDF from 2006. Sigh).

But we didn’t use a button. We relied on the browser’s built-in ability to print, along with a print stylesheet. So far as I can remember, the browsers we tested on printed the page in the state it was in, with the filled-in stuff filled in. Firefox was the big loser, cutting off fieldsets and printing stuff before fieldsets on separate, mostly-blank pages. IE and Opera performed correctly.

All form fields are printed with the top item of the list of select options.

Because our form was meant for printing, it was not the same as the purely-online form. Selects were not used, since the user could choose between filling in first and printing, or other way around. Radio buttons and checkboxes were still used, but selects were turned into radio buttons. All choices were visible. Users who printed out first could circle or fill-in the radio buttons, similar to regular forms (contrary to what you normally should be doing, none of our radio buttons were defaulted to selected=“selected”, which is the browsers we checked meant none were pre-selected. Of course, the specs say one should be manually checked, and so there could be a user agent out there somewhere who randomly chooses one to be pre-selected… well, we live dangerously I guess. Lawlz).
I would advise against inputs that hide things like selects if the point is to print them. For possibly long selects like choosing a country, I’d use a text input. You could reduce your chances of bizarreness with those by trying out some of the newer HTML5 form attributes, like pattern.

If the list of items you mentioned is quite huge, I would really recommend a separate, print-friendly form instead of trying to make the online-version printable. The list of available options really ought to be visually available to the user at all times when printing (this list could even be plain text, elsewhere on the page).

Similarly, while we did use text areas, we made them much much bigger than the regular online forms. In case people wanted to write in them, with a pen.