SharePoint Form Controls

When you are writting aspx page for SharePoint 2003/2007, you can use the controls provided by SharePoint to maintain the same form style like this:

In order to use these controls, you need to add these lines in the top of your aspx page:
<%@ Register TagPrefix="wssuc" TagName="InputFormSection" src="~/_controltemplates/InputFormSection.ascx" %>
<%@ Register TagPrefix="wssuc" TagName="InputFormControl" src="~/_controltemplates/InputFormControl.ascx" %>
<%@ Register TagPrefix="wssuc" TagName="ButtonSection" src="~/_controltemplates/ButtonSection.ascx" %>

Also, you need to put all these controls inside a HTML table tag:

Here is the code snippet that generates the above form:
<table border="0" width="100%" cellspacing="0" cellpadding="0" id="diidProjectPageOverview">
<wssuc:InputFormSection Title="Locale"
Description="Specify the world region that you would like the site dates, numbers and sort order to be based on."
runat="server">
<Template_InputFormControls>
<wssuc:InputFormControl LabelText="Follow web settings" LabelAssociatedControlID="ChkFollowWebRegionalSettings" runat="server">
<Template_Control>
<asp:CheckBox id="ChkFollowWebRegionalSettings" Text="Always follow web settings" runat="server" />
</Template_Control>
</wssuc:InputFormControl>
<wssuc:InputFormControl LabelText="Choose Locale" LabelAssociatedControlID="DdlwebLCID" runat="server">
<Template_Control>
<asp:DropDownList ID="DdlwebLCID" AutoPostBack="true" Runat="server">
<asp:ListItem Text="us-EN" Value="su" />
<asp:ListItem Text="ca-EN" Value="mo" />
</asp:DropDownList>
</Template_Control>
</wssuc:InputFormControl>
</Template_InputFormControls>
</wssuc:InputFormSection>
<wssuc:ButtonSection runat="server" ShowStandardCancelButton="false">
<Template_Buttons>
<asp:Button UseSubmitBehavior="false" runat="server" class="ms-ButtonHeightWidth" Text="OK" id="BtnUpdateRegionalSettings"/>
<asp:Button UseSubmitBehavior="false" runat="server" class="ms-ButtonHeightWidth" Text="Cancel" id="BtnCancel"/>
</Template_Buttons>
</wssuc:ButtonSection>
</table>

There are several SharePoint controls used here. We will explain them one by one.
1. InputFormSection: This control defines the left part of input form section. It has two important properties:

• Title: The first line (bold) in left input section. For example: "Locale".
• Description: The descriptive text under the title line. For example: "Specify the world region that you would like the site dates, numbers and sort order to be based on.".

2. Template_InputFormControls: It is inside InputFormSection. It has no property to set. It wraps all the controls appearing on the right part of input form.
3. InputFormControl: It is inside Template_InputFormControls. It defines the asp.net controls inside and the label associated with the asp.net controls. You can repeat this tag to add more controls inside. It has two properties:

• LabelText: The text above the controls. For example: "Follow web settings"
• LabelAssociatedControlID: The control Id that the label associated with.

4. Template_Control: It is inside InputFormControl. It has no property to define. Inside this tag, you can put whatever asp.net controls and HTML code. In the above example, we put asp.net dropdown list inside.
5. ButtonSection: This section is used to define button controls.
6. Template_Buttons: This control is defined inside ButtonSection. There is no property to set. Inside this control, you can add asp.net button controls.