ansaurus

Question

Form designs for displaying content in labels

Answer 1

A:

It sounds like you aren't talking about a form then. Displaying user data can mimic the layout of a form, but if you don't have fields it's not a form.

Are you referring to the HTML label, or the .Net/Java UI concept of a label? In HTML labels match up with input fields as a prompt ("First Name:", etc). It sounds more like you're talking about the .Net label which is just a text placeholder.

Parrots 2009-03-17 16:22:52

I guess I'm talking about displaying data that has captions, like First Name, Last Name, Address, Email, in a pleasant way.

Caveatrob 2009-03-17 16:24:04

Answer 2

A:

I believe this entirely depends on the nature of the data:

If you're showing numbers, then fields would be smaller and you'll be able to show more data in one row.
If you're showing long text, then it'll be difficult.
It also depends on which pieces of data are more important and you want to show first.
Finally, different users may need to see data in different ways.

Unfortunately, I believe there's no silver bullet for your problem... it's just a matter of common sense for your particular problem.

Seb 2009-03-17 16:29:45

Answer 3

+1 A:

You can get a nice effect by making your labels and data display: inline-block and giving your labels a fixed width and right-alignment:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html lang="en">
    <head>
        <title>Mailing label</title>

        <style type="text/css">
            .form div.row {
                margin-top: .25em;
            }

            .form span {
                display: inline-block;
                vertical-align: top;
            }

            .form span.label {
                font-weight: bold;
                margin-right: .25em;
                text-align: right;
                width: 10em;
            }
        </style>
    </head>

    <body>
        <div class="form">
            <div class="row"><span class="label">Name:</span> <span class="value">Ben Blank</span></div>
            <div class="row"><span class="label">Address:</span> <span class="value">1024 Foo Bar Drive<br/>Silicon Valley, CA, 69105</span></div>
            <div class="row"><span class="label">E-Mail:</span> <span class="value">[email protected]</span></div>
            <div class="row"><span class="label">Phone:</span> <span class="value">(202) 555-1212</span></div>
        </div>
    </body>
</html>

Ben Blank 2009-03-17 17:00:11

Is there an easy way, in css, to lay more than one label/field across the page horizontally?

Caveatrob 2009-03-17 17:34:14

Just set an explicit width on each element. Inline-block will allow them to both take widths and to "flow" on the same line.

Ben Blank 2009-03-17 17:43:17

This method worked well for me. Thanks ben!

mawaldne 2009-11-02 19:57:57

ansaurus

tags:

views:

answers:

Form designs for displaying content in labels

related questions