Forms

This page demonstrates HTML elements and CSS commonly used in iMIS forms. We recommend using this page as a reference if you are involved in building Dynamic Content Items (iParts) for iMIS. The examples on this page are in ASP.NET for developer reference. You can see the HTML output of any example by using your browser's developer tools to inspect any element.

Panel Fields

All form fields in iMIS should be wrapped in the PanelField structure outlined below, so that our forms have a consistent display. You can do this in two ways:

  • Set RenderPanelField="True" on an asiweb control to automatically render the correct PanelField divs and classes (this is the preferred method)
  • Manually create the PanelField divs and classes if you cannot set RenderPanelField="True" (for example, if you need to add a custom validator)

Set RenderPanelField="True" on an asiweb control

To have asiweb controls automatically render the PanelField structure (recommended), set the RenderPanelField and DisplayCaption attributes to true. Use the Caption attribute to set the text of the label and the PositionCaption attribute to set the placement of the label relative to the input. The available positions are Left (this is the default), Right, Top and Bottom.

Email address
hello@imisdemo.com
<asiweb:StyledLabel RenderPanelField="True" runat="server" ID="Email1" DisplayCaption="True" Caption="Email address" Text="hello@imisdemo.com" PositionCaption="Left" />

<asiweb:BusinessTextBox RenderPanelField="True" runat="server" ID="Phone1" DisplayCaption="True" Caption="Phone number" Required="True" />
            

Manually create the PanelField divs and classes

Note: If needed, you can use the .Required class on a label to show when a field is required and the .Label class to style text to look like a label.

Email address
hello@imisdemo.com
<div class="PanelField Left">
    <asiweb:StyledLabel runat="server" ID="EmailLabel" CssClass="Label" Text="Email address" />
    <div class="PanelFieldValue">
        <asiweb:StyledLabel runat="server" ID="EmailReadOnly" Text="hello@imisdemo.com" />
    </div>
</div>

<div class="PanelField Left">
    <asiweb:StyledLabel runat="server" ID="PhoneLabel2" AssociatedControlID="Phone2" Text="Phone number" CssClass="Required" />
    <div class="PanelFieldValue">
        <asiweb:BusinessTextBox runat="server" ID="Phone2" />
        <asiweb:AsiRequiredFieldValidator id="TextBoxValidator" runat="server" ControlToValidate="Phone2" CssClass="Important"></asiweb:AsiRequiredFieldValidator>
    </div>
</div>

Form classes

The classes described in this section can be used to adjust the styles of form elements.

Required class

Add the .Required class to the label of any required field.

<div class="PanelField Left">
    <asiweb:StyledLabel runat="server" ID="Phone3Label" Text="Phone number" AssociatedControlID="Phone3" CssClass="Required" />
    <div class="PanelFieldValue">
        <asiweb:BusinessTextBox runat="server" ID="Phone3"/>
    </div>
</div>

Label

All of the input elements within a form must have an associated <label>. However, when you need to display a label for a plain text field, you can use the .Label class on a control that renders a <span> tag, so that it looks like a label.

Email address
hello@imisdemo.com
<div class="PanelField Left">
    <asiweb:StyledLabel runat="server" ID="Email3Label" Text="Email address" CssClass="Label" />
    <div class="PanelFieldValue">
        <asiweb:StyledLabel runat="server" ID="Email3" Text="hello@imisdemo.com" />
    </div>
</div>

Label positions: Top, Left, Right, Bottom

When you use a control with RenderPanelField="True" you can define where the label is displayed by setting the PositionCaption attribute to Top, Left, Right or Bottom. When manually applying the PanelField structure, you can use these same positions as CSS classes to achieve the same results.

Note: If no position class is used, the label will display on the left.

<div class="PanelField Left">
    <asiweb:StyledLabel runat="server" ID="TextBoxLabelLeftLabel" AssociatedControlID="TextBoxLabelLeft" Text="Label on left" />
    <div class="PanelFieldValue">
        <asiweb:BusinessTextBox runat="server" ID="TextBoxLabelLeft" />
    </div>
</div>
                
<div class="PanelField Right">
    <div class="PanelFieldValue">
        <asiweb:BusinessCheckBox runat="server" ID="CheckBoxLabelRight" />
    </div>
    <asiweb:StyledLabel runat="server" ID="CheckBoxLabelRightLabel" AssociatedControlID="CheckBoxLabelRight" Text="Label on right" />
</div>
                    
                
<div class="PanelField Top">
    <asiweb:StyledLabel runat="server" ID="TextBoxLabelTopLabel" AssociatedControlID="TextBoxLabelTop" Text="Label on top" />
    <div class="PanelFieldValue">
        <asiweb:BusinessTextBox runat="server" ID="TextBoxLabelTop" />
    </div>
</div>

AutoWidth

By default, labels that display to the left of their controls have a specific defined width. This width can be overridden by using the .AutoWidth class either on a particular label or as a wrapper around a form or form element. When applied, the element's width is determined by its contents.

<div class="PanelField Left">
    <asiweb:StyledLabel runat="server" ID="LongLabel" AssociatedControlID="LongLabelTextBox" Text="A long label without the AutoWidth class" />
    <div class="PanelFieldValue">
        <asiweb:BusinessTextBox runat="server" ID="LongLabelTextBox" />
    </div>
</div>

<div class="PanelField Left">
    <asiweb:StyledLabel runat="server" ID="LongLabel2" CssClass="AutoWidth" AssociatedControlID="LongLabelTextBox2" Text="A long label with the AutoWidth class" />
    <div class="PanelFieldValue">
        <asiweb:BusinessTextBox runat="server" ID="LongLabelTextBox2" />
    </div>
</div>

SubItems

When you want to display a visual hierarchy of form elements, you can use the .SubItems class to indent sub-elements of another element.

A header for a list of checkboxes
<div class="Section">
    <span class="Label">A header for a list of checkboxes</span>
    <div class="SubItems CheckBoxList">
        <asiweb:BusinessCheckBox ID="Option1" runat="server" RenderPanelField="True" DisplayCaption="True" Caption="Option 1" />
        <asiweb:BusinessCheckBox ID="Option2" runat="server" RenderPanelField="True" DisplayCaption="True" Caption="Option 2" />
        <asiweb:BusinessCheckBox ID="Option3" runat="server" RenderPanelField="True" DisplayCaption="True" Caption="Option 3" />
    </div>
</div>

<asiweb:BusinessCheckBox ID="PetCheckBox" runat="server" RenderPanelField="True" DisplayCaption="True" PositionCaption="Right" 
    Caption="I have a pet" onclick="toggleHasPet()" />
<div ID="PetOptions" class="SubItems">
    <asiweb:BusinessDropDownList ID="TypeOfPet" runat="server" RenderPanelField="True" DisplayCaption="True" Caption="Type of pet">
        <asp:ListItem Value="dog" Text="Dog" />
        <asp:ListItem Value="cat" Text="Cat" />
        <asp:ListItem Value="fish" Text="Fish" />
    </asiweb:BusinessDropDownList>
</div>

Note: Be sure to add some JavaScript to enable/disable sub-options when their parent option is toggled.

Info

The .Info class can be used to style field-level help.

Here's some helpful info

<div class="PanelField Left">
    <asiweb:StyledLabel runat="server" ID="InfoExampleLabel" AssociatedControlID="InfoExampleTextBox" Text="A confusing option" />
    <div class="PanelFieldValue">
        <asiweb:BusinessTextBox runat="server" ID="InfoExampleTextBox" />
        <p class="Info">Here's some helpful info</p>
    </div>
</div>

CheckBoxList

The .CheckBoxList class can be used to group checkbox options that are related. It displays labels in normal weight and reduces space between items.

<div class="CheckBoxList">
    <asiweb:BusinessCheckBox ID="BusinessCheckBox1" runat="server" RenderPanelField="True" DisplayCaption="True" Caption="Option 1" />
    <asiweb:BusinessCheckBox ID="BusinessCheckBox2" runat="server" RenderPanelField="True" DisplayCaption="True" Caption="Option 2" />
    <asiweb:BusinessCheckBox ID="BusinessCheckBox3" runat="server" RenderPanelField="True" DisplayCaption="True" Caption="Option 3" />
</div>

ShowFieldset

By default, fieldsets within panels do not display their borders or legends. Use the .ShowFieldset class directly on or as a wrapper around a fieldset to make it display.

This is a visible fieldset
<asiweb:PanelTemplateControl2 runat="server" ID="PanelTemplateControl" Title="This is a panel" collapsible="false">
    <fieldset class="ShowFieldset">
        <legend>This is a visible fieldset</legend>
        <asiweb:BusinessDropDownList ID="BusinessDropDownList1" runat="server" RenderPanelField="True" DisplayCaption="True" Caption="Type of pet">
            <asp:ListItem Value="dog" Text="Dog" />
            <asp:ListItem Value="cat" Text="Cat" />
            <asp:ListItem Value="fish" Text="Fish" />
        </asiweb:BusinessDropDownList>
    </fieldset>
</asiweb:PanelTemplateControl2>

[disabled] and aspNetDisabled

Set the attribute disabled="true" on form controls to disable them from user input.

Certain elements do not support the disabled attribute, such as <label>s and <span>s. For these elements, you can instead use the CSS class .aspNetDisabled. This class is automatically applied to certain ASP.NET controls with the attribute Enabled="False".

<div class="PanelField Left">
    <asiweb:StyledLabel runat="server" ID="DisabledTextBoxLabel" AssociatedControlID="DisabledTextBox" Text="A disabled textbox" Enabled="False" />
    <div class="PanelFieldValue">
        <asiweb:BusinessTextBox runat="server" ID="DisabledTextBox" Enabled="False" />
    </div>
</div>
                
<div class="PanelField Right">
    <div class="PanelFieldValue">
        <asiweb:BusinessCheckBox runat="server" ID="DisabledCheckBox" Enabled="False" />
    </div>
    <asiweb:StyledLabel runat="server" ID="DisabledCheckBoxLabel" AssociatedControlID="DisabledCheckBox" Text="A disabled checkbox" Enabled="False" />
</div>

Input sizes

If the standard input width is either too small or too wide for your needs, then you can use the following CSS classes to create shorter or longer input fields.

<asiweb:BusinessTextBox CssClass="InputXXSmall" DisplayCaption="True" ID="InputXXSmall" runat="server" Caption="InputXXSmall" RenderPanelField="True" />
<asiweb:BusinessTextBox CssClass="InputXSmall" DisplayCaption="True" ID="InputXSmall" runat="server" Caption="InputXSmall" RenderPanelField="True"  />
<asiweb:BusinessTextBox CssClass="InputSmall" DisplayCaption="True" ID="InputSmall" runat="server" Caption="InputSmall" RenderPanelField="True" />
<asiweb:BusinessTextBox CssClass="InputMedium" DisplayCaption="True" ID="InputMedium" runat="server" Caption="InputMedium" RenderPanelField="True" />
<asiweb:BusinessTextBox CssClass="InputLarge" DisplayCaption="True" ID="InputLarge" runat="server" Caption="InputLarge" RenderPanelField="True" />
<asiweb:BusinessTextBox CssClass="InputXLarge" DisplayCaption="True" ID="InputXLarge" runat="server" Caption="InputXLarge" RenderPanelField="True" />
<asiweb:BusinessTextBox CssClass="InputXXLarge" DisplayCaption="True" ID="InputXXLarge" runat="server" Caption="InputXXLarge" RenderPanelField="True" />
            

MultiSelect

Use the asiweb:MultilSelectControl2 to allow users to select multiple options from a filterable pre-defined list.

<asiweb:MultiSelectControl2 ID="MultiSelectControl" runat="server" RenderPanelField="True" DisplayCaption="True" Caption="Locations" />

<!-- The following should be placed in the code behind -->
MultiSelectControl.AddValue("Austin", "Austin", false);
MultiSelectControl.AddValue("Alexandria", "Alexandria", false);
MultiSelectControl.AddValue("Long Island", "LongIsland", false);
MultiSelectControl.AddValue("Toronto", "Toronto", false);
MultiSelectControl.AddValue("Shoreham-by-Sea", "ShorehamBySea", false);
MultiSelectControl.AddValue("Melbourne", "Melbourne", false);
MultiSelectControl.AddValue("Christchurch", "Christchurch", false);