Question

我看到包含表单字段的表单的 ton 设计，但我找不到在表单中显示标签的好例子。

对于显示信息而非收集信息的表单，是否有人有良好的布局？我有一个表单，显示一个包含多个字段的用户配置文件，我想将它传播到水平区域。

Answer 1

您可以通过制作标签和数据display: inline-block并为标签指定固定宽度和右对齐来获得良好效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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">ben.blank@example.com</span></div>
            <div class="row"><span class="label">Phone:</span> <span class="value">(202) 555-1212</span></div>
        </div>
    </body>
</html>

Answer 2

听起来你不是在谈论一个表格。显示用户数据可以模仿表单的布局，但如果您没有字段，则表示不是表单。

您是指HTML标签，还是标签的.Net / Java UI概念？在HTML标签中，输入字段与提示符匹配（“名字：”等）。听起来更像是在讨论.Net标签，它只是一个文本占位符。

Answer 3

我认为这完全取决于数据的性质：

如果您正在显示数字，那么字段会更小，您将能够在一行中显示更多数据。
如果你要显示长篇文章，那就太难了。
这还取决于哪些数据更重要，您想先显示。
最后，不同的用户可能需要以不同的方式查看数据。

不幸的是，我相信你的问题没有灵丹妙药......这只是你特定问题的常识问题。

用于在标签中显示内容的表单设计

3 个答案: