InputFormSection.ascx and InputFormControl.ascx Controls

When developing application pages you can use this control to build SharePoint-like pages. It offers a basic layout for the different parts of the control and offers a skeleton in which you can place your own controls. Each section starts with a thin section line to visualize the separation between the different sections. You can place more than one InputFormSection control on a page, in order to separate different functionality from each other. 

To include a InputFormSection control on an aplication page you have to use the following syntax:

<wssuc:InputFormSection ID="InputFormSection1" runat="server"
       Title="InputFormSection 1"
       Description="Shows the possibilities of the different SharePoint user controls" >
     <template_inputformcontrols>
          <wssuc:InputFormControl runat="server" LabelText="">
              <Template_Control>                   
                  <div class="ms-authoringcontrols">
                      Other controls will be placed here...                           
                  </div>
              </Template_Control>
          </wssuc:InputFormControl>
     </template_inputformcontrols>
</wssuc:InputFormSection>

You can specify the section title and a description as attributes of the InputFormSection control.

When creating custom application pages you have to place this control within a <td> tag of an HTML table.  If you want control over the width of the two columns, you have to define the HTML table as follows, adding a <colgroup> element where you explicitly define the width of each column:

<table border="0" cellspacing="0" cellpadding="0" class="ms-propertysheet" width="100%">
   <colgroup>
      <col style="width: 40%"></col>
      <col style="width: 60%"></col>
   </colgroup>
   <tr>
      <td>
          <!-- Demonstrate SharePoint user controls -->
          <wssuc:InputFormSection ID="InputFormSection1" runat="server"
               Title="InputFormSection 1"
               Description="Shows the possibilities of the different SharePoint user controls" >
            <template_inputformcontrols>
               <wssuc:InputFormControl runat="server" LabelText="" >
                  <Template_Control>                   
                     <div class="ms-authoringcontrols">
                         Other controls will be placed here...                           
                     </div>
                  </Template_Control>
               </wssuc:InputFormControl>
            </template_inputformcontrols>
          </wssuc:InputFormSection>
      </td>
   </tr>
</table>

If you want your title and/or description something more than a string you can use the tag <Template_Title> and/or <Template_Description>  tag in which you can specify your own controls.

<wssuc:InputFormSection ID="InputFormSection1" runat="server">
     <template_title>
            <SharePoint:EncodedLiteral ID="EncodedLiteral1" runat="server"
                 text="InputFormSection 2" EncodeMethod='HtmlEncode'/>
     </template_title>
     <template_description>
            <asp:HyperLink ID="HelpHyperLink" runat="server" NavigateUrl="help/helppage.htm"
                  Text="read more here..." Target="_blank" />
     </template_description>
     <template_inputformcontrols>
            <div class="ms-authoringcontrols">
                 Other controls will be placed here...                           
            </div>
         </wssuc:InputFormControl>
     </template_inputformcontrols>
</wssuc:InputFormSection>

Within the <template_inputformcontrols> element you can place a InputFormControl user control. Within the <Template_Control> element of this control place the controls you need to define your user interface.

Also add the required directives at the top of the page:

<%@ Register TagPrefix="wssuc" TagName="InputFormSection" Src="/_controltemplates/InputFormSection.ascx" %>
<%@ Register TagPrefix="wssuc" TagName="InputFormControl" Src="/_controltemplates/InputFormControl.ascx" %>

If you use server controls from the Microsoft.SharePoint.dll, you also have to add the following directive:

<%@ Register TagPrefix="spuc" Namespace="Microsoft.SharePoint.WebControls"
    Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

There are a number of attributes you can set on the InputFormSection control:

• Title: title for the section.
• Description: description for the section.
• Collapsible: set this attribute to true if you want an expandable section. The control will be displayed with a clickable + and – sign. The default is false.
• Collapsed: if you want the section to be collapsed when the page is loaded, you can set this property to true. The defaulst value is false.
• Padding: set this attribute to false if you want no empty space at the end of the section. The default value is true.

There are also a number of attributes you can set on the InputFormControl control:

• LabelText: this text will be placed at the top of the controls in the right column.
• ExampleText: this text will be placed at the bottom of the controls in the right column. This attribute can be useful if you place f.e. a text box within the <Template_Control> tag and you want to indicate a sample value.  
• LabelAssociatedControlId: you can add more than one InputFormControl within the <template_inputformcontrols> element in order to group your own controls. In that case the LabelAssociatedControlId can come in handy. The LabelText value and ExampleText value will be displayed above and under the control.

      <wssuc:InputFormSection ID="InputFormSection2" runat="server"
             Title="InputFormSection 2"
             Collapsible="true" >
          <template_description>
             <asp:HyperLink ID="HelpHyperLink" runat="server" NavigateUrl="help/helppage.htm"
                  Text="read more here..." Target="_blank" />
          </template_description>
          <template_inputformcontrols>
             <wssuc:InputFormControl runat="server" LabelText="Label text 1" ExampleText="Example text 1"
                    LabelAssociatedControlId="InputFormTextBox1">
                <Template_Control>                   
                    <spuc:InputFormTextBox runat="server" ID="InputFormTextBox1" Width="60%" />
                </Template_Control>
             </wssuc:InputFormControl>
             <wssuc:InputFormControl runat="server" LabelText="Label text 2" ExampleText="Example text 2"
                    LabelAssociatedControlId="InputFormTextBox2">
                <Template_Control>                   
                    <spuc:InputFormTextBox runat="server" ID="InputFormTextBox2" Width="60%" />
                </Template_Control>
             </wssuc:InputFormControl>
          </template_inputformcontrols>
      </wssuc:InputFormSection>

As with the Title and the Description of the InputFormSection control, if you want LabelText and/or ExampleText to be more than a simple string, you can encapsulate you own controls within <Template_LabelText> and <Template_ExampleText> elements. 

     <wssuc:InputFormSection ID="InputFormSection2" runat="server" Title="InputFormSection2" Collapsible="true" >
         <template_description>
            <asp:HyperLink ID="HelpHyperLink" runat="server" NavigateUrl="help/helppage.htm"
                 Text="read more here..." Target="_blank" />
         </template_description>
         <template_inputformcontrols>
             <wssuc:InputFormControl runat="server" >
                 <Template_LabelText>
                    <asp:Label ID="LabelTextLabel" runat="server" backcolor="yellow" text="label text 1" />
                 </Template_LabelText>
                 <Template_ExampleText>
                    <asp:Label ID="ExampleTextLabel" runat="server" forecolor="red" text="example text 1" />
                 </Template_ExampleText>
                 <Template_Control>                   
                    <spuc:InputFormTextBox runat="server" ID="InputFormTextBox1" Width="60%" />
                 </Template_Control>
             </wssuc:InputFormControl>
         </template_inputformcontrols>
     </wssuc:InputFormSection>