Creating a pseudo-form with pseudo-labels

[oharab]

I'm trying to build a web page that displays the results of a long web form. On the actual form I have inputs with labels:

<label for="fname" id="name_p">Forname(s):</label><input name="fname" type="text" id="fname" />

but on the print out I have linked the labels to spans so they are not user editable.

<label for="fname" id="name_p">Forname(s):</label><span id="fname">Ben</span>

The only problem I have (well, so far!) is that when I print or resize the page, the labels are not attached to the span so you end up with

Forame:Ben Surname:
O'Hara

with O'Hara on the next line.
What I would like is for the label to always be in front of the data. Is this possible? How do you guys go about printing web forms after they have been filled in. I can see this being a major stumbling block to the whole project.

One more thing, I'd like it in XHTML 1.1 & css if possible, but I'll take whatever you get me!

Cheers

Ben

----------------------------------------------
Ben O'Hara

http://www.RobotParade.co.uk

"Where are all the stupid people from...
...And how'd they get so dumb?"

NoFX-The Decline
----------------------------------------------

 

[Vragabond]

If I understand you correctly, you do not want to display the input boxes when printing the document. Actually, with CSS you can style the boxes in a way no one can now they are input boxes (remove the borders and stuff). If you apply that to the print stylesheet, you've got it. That is, make a separate stylesheet for screen which has normal boxes and separate stylesheet for printing, which alters the input boxes and makes them look like text. This solution is fully xhtml 1.1 compatible.

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