tags:

views:

6374

answers:

3

I have a form in HTML where our users fill in the data and then print it. The data isn't saved anywhere. These forms come from outside our company and are built as html pages to resemble the original as closely as possible and then stuffed away and forgotten in a folder on the intranet. Normally another developer does them, but I have to do a few while he's out. Looking through his code, all his forms have a bunch of server-side code to take the inputs and re-write the page with only the contents. It seems like there should be a better way.

I want to just style the text inputs using a media selector so that when it prints you can see the text, but nothing of the box surrounding it. Any thoughts?

+1  A: 
<input type="text" style="border: 0; background-color: #fff;" />

Where #fff is your background color..

Wayne
+3  A: 

Assuming you only want to remove the border and such from texts, you'll need to give them a class. Maybe something like:

<input type="text" class="print-clean" .../>

And css, loaded with media="print":

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

would contain something like this:

.print-clean {
    border: none;
    background: transparent;
}
Chris Marasti-Georg
+4  A: 

Add a separate CSS file for printing by doing something like this:

<link rel="stylsheet" type="text/css" media="print" href="print.css">

add it to the <head> section of the page.

In this(print.css) file include styling relevant to what you want to see when the page is printed, for example:

input{border: 0px} should hide the border of input boxes when printing.

Maciej