printing a HTML form

Question

I am trying to print a page using javascript, it works fine but the issue comes with a page havign form inside it. If we print the form values being printed are fine but what we get is html controls (like input ,dropdown) are also being printed. Can some one have any other idea except server side processing

Answer 1

You can attach a print stylesheet to your pages like so...

<link rel="stylesheet" href="print.css" media="print"/>

Then in the print stylesheet you can specify...

input, select
{
    display: none;
}

This will hide your form control elements but only when the page is printed. You can extend this by also hiding navigation and links i.e. anything that is not useful on a printed version of your web page

EDIT: As rightly pointed out if you want to still display values within textboxes etc you can set the border-style property to "none" (+ any style declarations that you see fit) and only hide elements that serve no purpose when printed such as buttons

Answer 2

You can provide different css for print and screen display.

In your print css you can probably get rid of most of the html controls visible parts by setting borders to nothing, background to white and so on. I have not tried getting rid of everything this way though, so you may still end up with the odd bit. Worth a try though.

Answer 3

Yes. You'll have to define a different CSS style that will support media="print". CSS intended for print will hide appropriate controls and display static fields.

• W3C - http://www.w3.org/TR/CSS2/media.html
• browser support: http://www.codestyle.org/css/media/print-BrowserSummary.shtml