DNN UX Guide > UI Patterns > Simple Form Demo

UI Patterns → Simple Form Demo

Simple Form Demo

This would be good place to explain anything specific to this form. You can point out important fields and anything to pay special attention to. For more information on how to use those patterns, refer to the navigation on the left.

Indicates required fields

Name

Description

Choose One

Rating

1

2

3

4

5

Do You Agree?

Start Date

Open the calendar popup.

Save
Cancel

Pattern and Usage

Overview
View Markup
CSS

Above is a simple form example. Although there are many different scenarios when laying out a form, this example should capture many common form elements and its patterns for you development.

<div class="dnnForm" id="form-demo"> <asp:Label runat="server" CssClass="dnnFormMessage dnnFormInfo" ResourceKey="Intro" /> <div class="dnnFormItem dnnFormHelp dnnClear"> <p class="dnnFormRequired"><asp:Label runat="server" ResourceKey="Required Indicator" /></p> </div> <fieldset> <div class="dnnFormItem"> <dnn:Label runat="server" ControlName="NameTextBox" ResourceKey="Name" /> <asp:TextBox runat="server" ID="NameTextBox" CssClass="dnnFormRequired" /> <asp:RequiredFieldValidator runat="server" ControlToValidate="NameTextBox" CssClass="dnnFormMessage dnnFormError" ResourceKey="Name.Required" /> </div> <div class="dnnFormItem"> <dnn:Label runat="server" ControlName="DescriptionTextBox" ResourceKey="Description" /> <asp:TextBox runat="server" TextMode="MultiLine" ID="DescriptionTextBox" /> </div> <div class="dnnFormItem"> <dnn:Label runat="server" ControlName="ChoiceDropDown" ResourceKey="Choice" /> <asp:DropDownList runat="server" ID="ChoiceDropDown"> <asp:ListItem Text="-- Make a Choice --" /> <asp:ListItem Text="First Choice" /> <asp:ListItem Text="Second Choice" /> </asp:DropDownList> </div> <div class="dnnFormItem"> <dnn:Label runat="server" ControlName="RateRadioButtons" ResourceKey="Rate" /> <asp:RadioButtonList runat="server" ID="RateRadioButtons" RepeatDirection="Horizontal" CssClass="dnnFormRadioButtons"> <asp:ListItem Text="1" /> <asp:ListItem Text="2" /> <asp:ListItem Text="3" /> <asp:ListItem Text="4" /> <asp:ListItem Text="5" /> </asp:RadioButtonList> </div> <div class="dnnFormItem"> <dnn:Label runat="server" ControlName="AgreeCheckbox" ResourceKey="Agree" /> <asp:CheckBox runat="server" ID="AgreeCheckbox" /> </div> <div class="dnnFormItem"> <asp:Label runat="server" CssClass="dnnFormLabel" AssociatedControlID="StartDatePicker" ResourceKey="Start Date" /> <dnn:DnnDatePicker runat="server" CssClass="dnnFormInput" ID="StartDatePicker" /> </div> </fieldset> <ul class="dnnActions dnnClear"> <li><asp:LinkButton runat="server" CssClass="dnnPrimaryAction" ResourceKey="Save" /></li> <li><asp:HyperLink runat="server" CssClass="dnnSecondaryAction" NavigateUrl="/" ResourceKey="Cancel" /></li> </ul> </div>

All of the CSS used for this forms are in default.css