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

界面模式说明及使用

上图中标签和文本框被组织成了一个表单输入项，为了达到界面上的效果，标签和文本框必须被放置在一个被.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;
}