Many times I create custom SharePoint forms in my solutions. More appropriate way is to create SharePoint form using
InputFormSection
. InputFormSection
takes care of the layout and positioning of your controls. You can add InputFormControl
containing asp.net/SharePoint controls under InputFormSection
.Add the following references in .aspx pages:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<%@ Register TagPrefix="SharePoint" | |
Namespace="Microsoft.SharePoint.WebControls" | |
Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> | |
<%@ 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" %> |
Container for
InputFormSection
:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<table border="0" cellspacing="0" cellpadding="0" width="100%"> | |
<!--Add InputFormSection--> | |
</table> |
Followings are some snippets of few common controls I use in custom SharePoint forms/pages:
Texbox
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<wssuc:InputFormSection Title="Input Title" Description="Input Description" runat="server"> | |
<template_inputformcontrols> | |
<wssuc:InputFormControl LabelText="" LabelAssociatedControlId="inputID" runat="server"> | |
<Template_Control> | |
<SharePoint:InputFormTextBox title="Name" class="ms-input" ID="inputID" Columns="35" runat="server" MaxLength="256" /> | |
<SharePoint:InputFormRequiredFieldValidator ID="InputValidator" ControlToValidate="inputID" ErrorMessage="Required field" Width="300px" runat="server" /> | |
</Template_Control> | |
</wssuc:InputFormControl> | |
</template_inputformcontrols> | |
</wssuc:InputFormSection> |
Multiline Textbox
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<wssuc:InputFormSection runat="server" Title="MultiLine Textbox Title" Description="MultiLine Textbox Description"> | |
<template_inputformcontrols> | |
<wssuc:InputFormControl runat="server" LabelText=""> | |
<Template_Control> | |
<sharepoint:InputFormTextBox title="Title" class="ms-input" ID="TxtCreateSiteDescription" Runat="server" TextMode="MultiLine" Columns="40" Rows="3"/> | |
</Template_Control> | |
</wssuc:InputFormControl> | |
</template_inputformcontrols> | |
</wssuc:InputFormSection> |
Dropdown
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<wssuc:InputFormSection Title="Dropdown Title" Description="Dropdown Description" runat="server"> | |
<template_inputformcontrols> | |
<wssuc:InputFormControl LabelText="" LabelAssociatedControlId="dropdownID" runat="server"> | |
<Template_Control> | |
<asp:DropDownList ID="dropDownID" runat="server" width="300"> | |
<asp:ListItem Text="Select" Value="0" Selected="True" /> | |
</asp:DropDownList> | |
<SharePoint:InputFormRequiredFieldValidator ID="DropDownValidator" ControlToValidate="dropDownID" InitialValue="0" ErrorMessage="Required field" Width="300px" runat="server" /> | |
</Template_Control> | |
</wssuc:InputFormControl> | |
</template_inputformcontrols> | |
</wssuc:InputFormSection> |

Checkbox
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<wssuc:InputFormSection Title="Checkbox Title" Description="Checkbox Description" runat="server"> | |
<Template_InputFormControls> | |
<wssuc:InputFormControl LabelText="" LabelAssociatedControlId="checkBoxID" runat="server"> | |
<Template_Control> | |
<asp:CheckBox ID="checkBoxID" runat="server" Text="Some description about checkox" Title="Checkbox Title" Checked="true" /> | |
</Template_Control> | |
</wssuc:InputFormControl> | |
</Template_InputFormControls> | |
</wssuc:InputFormSection> |
Radio button
Url Field
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<wssuc:InputFormSection Title="Url Title" Description="Url Description" runat="server"> | |
<template_inputformcontrols> | |
<wssuc:InputFormControl runat="server"> | |
<Template_Control> | |
<table border="0" cellspacing="1" class="ms-authoringcontrols" width="100%"> | |
<tr> | |
<td class="ms-formdescription" nowrap="nowrap" width="100%"> | |
<SharePoint:EncodedLiteral runat="server" text="Type the Web address: " /> | |
<a href="javascript:" onclick="javascript:TestURL('<%= urlInputID.ClientID %>');return false;"> | |
<SharePoint:EncodedLiteral runat="server" text="(Click here to test)" EncodeMethod='HtmlEncode'/> | |
</a>: | |
</td> | |
</tr> | |
<tr> | |
<td class="ms-authoringcontrols" width="100%" > | |
<SharePoint:InputFormTextBox title="Url Title" CssClass="ms-input" ID="urlInputID" Columns="35" Runat="server" text="http://" maxlength="255" width="300" /> | |
</td> | |
</tr> | |
<tr> | |
<td class="ms-formdescription nowrap="nowrap" > | |
<SharePoint:EncodedLiteral runat="server" text="Type the description:" EncodeMethod='HtmlEncode'/> | |
</td> | |
</tr> | |
<tr> | |
<td nowrap="nowrap" class="ms-authoringcontrols" width="100%"> | |
<SharePoint:InputFormTextBox title="Url Description Title" CssClass="ms-input" ID="InputFormTextBox2" Columns="35" Runat="server" maxlength="255" width="300" /> | |
<SharePoint:InputFormRequiredFieldValidator ID="urlRequiredValidator" InitialValue="http://" ControlToValidate="urlInputID" ErrorMessage="Required field" runat="server" Display="Dynamic" CssClass="ms-error"/> | |
<SharePoint:InputFormRegularExpressionValidator ID="urlRegularExpressionValidator" ControlToValidate="urlInputID" ErrorMessage="URL is invalid." runat="server" ValidationExpression="http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?" Display="Dynamic" CssClass="ms-error"/> | |
</td> | |
</tr> | |
</table> | |
</Template_Control> | |
</wssuc:InputFormControl> | |
</template_inputformcontrols> | |
</wssuc:InputFormSection> |
File Upload
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<wssuc:InputFormSection runat="server" title="File Upload Title" Description="File Upload Description"> | |
<Template_InputFormControls> | |
<wssuc:InputFormControl runat="server" SmallIndent="true"> | |
<Template_Control> | |
<table class="ms-authoringcontrols" width="100%"> | |
<tr><td> | |
<input type="file" id="InputFile" runat="server" class="ms-fileinput ms-fullWidth" size="35" /> | |
</td></tr> | |
<tr><td> | |
<SharePoint:InputFormRequiredFieldValidator ControlToValidate="InputFile" | |
Display="Dynamic" ErrorMessage="Select the document" Runat="server"/> | |
</td></tr> | |
<tr><td><asp:CheckBox id="OverwriteSingle" Checked="true" Text="Overwrite existing files" runat="server" CssClass="ms-upload-overwrite-cb" /></td></tr></table> | |
</Template_Control> | |
</wssuc:InputFormControl> | |
</Template_InputFormControls> | |
</wssuc:InputFormSection> |
People Picker
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<wssuc:InputFormSection Title="User Title" Description="User Description" runat="server"> | |
<template_inputformcontrols> | |
<wssuc:InputFormControl LabelText="User name:" | |
runat="server"> | |
<Template_Control> | |
<Sharepoint:PeopleEditor AllowEmpty=false SingleLine=true ValidatorEnabled="true" MultiSelect=false id="PickerOwner" runat="server" SelectionSet="User" /> | |
</Template_Control> | |
</wssuc:InputFormControl> | |
</template_inputformcontrols> | |
</wssuc:InputFormSection> |