I often see many tutorials about how to make forms pretty, but I don't see as many showing how you can display the result in a pretty way. I mean, when the data has been input and you'd like to display it, but you don't want the data to seem editable, so you don't want to show the values in input fields and drop downs. You don't want to display it in a datatable or the likes either, because you only want one row from the db.

You just wntn to display the form row by row, but without the form elements, and without it looking boring because it's "just text". Does anyone have a good css guide og html guide or something third on how to structure the display of such data so it looks good?

I'm asking Because I want to display some form-data in fancybox, but all the fancybox really does right now is build you up to let you down, because the box looks good, but then it's just filled with plane looking, badly spaced text.

EDIT Should've brought an example - so My form looks like:

Field1 : Input
Field2 : Input
Field3 : Input

and so forth and I want to display the same, but without the form fields

Field1 : Input
Field2 : Input
Field3 : Input

but In my opinion it just looks weak. Form fields look nice, but plane text just doesn't look that eye-appealing. Maybe it's just my styling, so that's why I'm asking, what are good conventions for spacing and such. Have anybody seen someone get creative with this form of presentation? It's pretty simple, and it should be, nothing too fancy, but nothing too 90's either.

  • Are you looking for a design better design or some kind of remark on whether you should use some kind of tabular markup or table-less markup? Have you looked into any CSS Frameworks?
    – Wex
    Commented Aug 24, 2011 at 20:27
  • Do you have an example of what you want this to look like?
    – Ek0nomik
    Commented Aug 24, 2011 at 20:28
  • @Wex - I'm not familiar with that - do you have any good one's so I can get a feel of what it's like?
    – Jakob
    Commented Aug 24, 2011 at 20:49
  • @Ek0nomik - I updated the question, sorry I didn't supply this information the first time. I hope you catch my drift.
    – Jakob
    Commented Aug 24, 2011 at 20:50

1 Answer 1


Assuming you want to make a summary like page for a user, you can use the disabled="disabled" attribute to show the data entered in formfields but since they are disabled (and thus greyed out) do not seem editable.

Example from w3schools.com

Another idea I found broadly accepted is to design the data output in the exact same way it is ment to be used later on. For Example if it would be used for an invoice you can preview the invoice with a nice letter head representing the input values.

  • I liked the idea about displaying the data in the way it's ment to be used - that's a really good way of looking at it. Thank you for your answer.
    – Jakob
    Commented Aug 25, 2011 at 13:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.