DNN交互设计-输入文本项（五）

最新推荐文章于 2025-02-12 17:12:07 发布

翻译最新推荐文章于 2025-02-12 17:12:07 发布 · 1.3k 阅读

文章标签：

#DNN #ux #dnnlabel #dnnFormItem #tooltip

经历同时被 3 个专栏收录

63 篇文章

订阅专栏

DNN开发

44 篇文章

订阅专栏

ASP.NET/jQuery

44 篇文章

订阅专栏

本文介绍了如何使用特定的HTML和CSS技术实现界面中的表单布局效果，包括标签和文本框的组织方式，并展示了如何利用dnnLabel显示字段帮助信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

界面模式说明及使用

上图中标签和文本框被组织成了一个表单输入项，为了达到界面上的效果，标签和文本框必须被放置在一个被.dnnFormItem 选择器命中的html元素容器下。

在你的模块开发中，你可以是使用其他的标签控件，在本教程中我们将使用dnnLablel来演示显示字段帮助信息的功能。

HTML

<div class="dnnForm">
    <fieldset>
        <div class="dnnFormItem">
            <dnn:Label runat="server" ControlName="NameTextBox" Text="Name" HelpText="It's the name of the thing" />
            <asp:TextBox ID="NameTextBox" runat="server" />
        </div>
    </fieldset>
</div>

CSS

    
.dnnFormItem label,
.dnnFormItem .dnnFormLabel,
.dnnFormItem .dnnTooltip {
    display: block;
    width: 30%;
    text-align: right;
    margin-right: 16px;
    font-weight: bold;
    float: left;
    margin-top: 3px;
}
.dnnFormItem .dnnTooltip label {
    width: 100%;
    padding: 0;
    margin: 0;
}
.dnnForm .dnnFormSecondItem label { float: none }
.dnnFormItem span.inline label {
    display: inline;
    width: auto;
}
.dnnFormItem input,
.dnnFormItem .dnnFormInput,
.dnnFormItem textarea {
    float: left;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 5px;
    background: #fffff5;
    -moz-box-shadow: inset 0 0 3px 3px #fffbe1;
    -webkit-box-shadow: inset 0 0 3px 3px #fffbe1;
    box-shadow: inset 0 0 3px 3px #fffbe1;
    border-color: #bcb691;
    border-width: 1px;
    margin: 0;
    width: auto;
    font-family: Helvetica, Arial, Verdana, sans-serif;
}
.dnnFormItem input[type=checkbox],
.dnnFormItem input[type=radio],
.dnnFormItem input[type=file],
.dnnFormItem input[type=button],
.dnnFormItem input.rcbInput {
    width: auto;
    border: none;
    -moz-border-radius: 0;
    border-radius: 0;
    background: none;
    padding: 0;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.dnnFormItem select {
    width: auto;
    padding: 0;
}
.dnnFormItem input[type="text"],
.dnnFormItem textarea { min-width: 35% }
.dnnFormItem textarea { min-height: 80px }
.dnnAddress input[type="checkbox"] { margin: 0 5px }
.dnnForm input.dnnFormRequired,
.dnnForm textarea.dnnFormRequired,
.dnnForm select.dnnFormRequired { border-left: 5px #F00 solid }
.dnnFormRadioButtons {
    float: left;
    width: auto;
    display: block;
}
.dnnFormRadioButtons input[type=radio] { clear: both }
.dnnFormRadioButtons label {
    font-weight: normal;
    margin: 0 10px 0 4px;
    width: auto;
    text-align: left;
    padding-right: 0;
}