Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
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 Aug 24 '11 at 20:27
    
Do you have an example of what you want this to look like? –  Ek0nomik Aug 24 '11 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 Aug 24 '11 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 Aug 24 '11 at 20:50
add comment

migrated from stackoverflow.com Aug 25 '11 at 0:08

This question came from our site for professional and enthusiast programmers.

1 Answer

up vote 2 down vote accepted

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.

share|improve this answer
    
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 Aug 25 '11 at 13:51
    
Your welcome and thank you for your vote. –  Cadoc Aug 26 '11 at 11:56
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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