Standard Form Elements

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

How To

  1. Step 1: Include LambdaEx Framework in Logi Info Application. Include LambdaEx Framework in Logi Info Application.

Form Element Info

Individual form controls automatically receive some global styling. All textual input, textarea, and select elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.
Text Input Examples
Text Fields

Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the .sr-only class. There are further alternative methods of providing a label for assistive technologies, such as the aria-label, aria-labelledby or title attribute.

Input Text

A block of help text that breaks onto a new line and may extend beyond one line.

Email
Input With Help

A block of help text that breaks onto a new line and may extend beyond one line.

Text Area
<InputText Class="form-control" ID="inpText" Placeholder="This is a placeholder!" Caption="Input Text" /><InputEmail Class="form-control" ID="InputEmail" Placeholder="[email protected]" Caption="Email" /><InputTextArea Class="form-control" ID="inpTextArea" InputRows="3" Caption="Text Area" />
<Division HtmlDiv="True" Class="form-group">
  <InputText Class="form-control" ID="inpText" Placeholder="..." Caption="..." />
</Division>
<Division HtmlDiv="True" Class="form-group">
  <InputEmail Class="form-control" ID="InputEmail" Placeholder="..." Caption="..." />
</Division>
<Division HtmlDiv="True" Class="form-group">
  <InputText Class="form-control" ID="inpWithHelp" Placeholder="..." Caption="..." />
  <Label Caption="..." Class="form-text text-muted" HtmlTag="P" />
</Division>
<Division HtmlDiv="True" Class="form-group">
  <InputTextArea Class="form-control" ID="inpTextArea" InputRows="3" Caption="..." />
</Division>
Validation states

Validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .form-text text-muted within that element will receive the validation styles.

Input with success
Input with warning
Input with error
<Division Class="has-success form-group" HtmlDiv="True" ID="dvSuccess"> <InputText Class="form-control" ID="inpTextSuccess" Placeholder="This is a placeholder!" Caption="Input with success" CaptionClass="control-label" /> <Label HtmlTag="P" Class="form-text text-muted" Caption="A block of help text that breaks onto a new line and may extend beyond one line." /> </Division><Division Class="has-warning form-group" HtmlDiv="True" ID="dvWarning"> <InputText Class="form-control" ID="inpTextWarning" Placeholder="This is a placeholder!" Caption="Input with warning" CaptionClass="control-label" /> </Division><Division Class="has-error form-group" HtmlDiv="True"> <InputText Class="form-control" ID="inpTextError" Placeholder="This is a placeholder!" Caption="Input with error" CaptionClass="control-label" /> </Division>
<Division Class="form-group has-success" HtmlDiv="True">
  <InputText Class="form-control" Placeholder="..." CaptionClass="control-label" />
  <Label HtmlTag="P" Class="form-text text-muted" Caption="..." />
</Division>
<Division class="form-group has-warning" HtmlDiv="True">
  <InputText Class="form-control" Placeholder="..." CaptionClass="control-label" />
  <Label HtmlTag="P" Class="form-text text-muted" Caption="..." />
</Division>
<Division class="form-group has-error" HtmlDiv="True">
  <InputText Class="form-control" Placeholder="..." CaptionClass="control-label" />
  <Label HtmlTag="P" Class="form-text text-muted" Caption="..." />
</Division>
Sizing
Text Fields

Set heights using classes like .form-control-lg and .form-control-sm.

<InputText Class="form-control form-control-lg" ID="InputLg" Placeholder=".form-contol-lg" />
<InputText Class="form-control" ID="InputMd" Placeholder="Default input" />
<InputText Class="form-control form-control-sm" ID="InputSm" Placeholder=".form-control-sm" />

<InputSelectList Class="form-control form-control-lg" ID="SelectLg">
  <DataLayer Type="Static" />
</InputSelectList>
<InputSelectList Class="form-control" ID="SelectMd">
  <DataLayer Type="Static" />
</InputSelectList>
<InputSelectList Class="form-control form-control-sm" ID="SelectSm">
  <DataLayer Type="Static" />
</InputSelectList>
<InputText Class="form-control form-control-lg" ID="InputLg" Placeholder=".form-contol-lg" /><InputText Class="form-control" ID="InputMd" Placeholder="Default input" /><InputText Class="form-control form-control-sm" ID="InputSm" Placeholder=".form-control-sm" /><InputSelectList Class="form-control form-control-lg" ID="SelectLg" IncludeBlank="True" IncludeBlankCaption="--Large Select--" OptionCaptionColumn="Caption" OptionValueColumn="Value"> <DataLayer Type="Static" /> </InputSelectList><InputSelectList Class="form-control" ID="SelectMd" IncludeBlank="True" IncludeBlankCaption="--Default Select--" OptionCaptionColumn="Caption" OptionValueColumn="Value"> <DataLayer Type="Static" /> </InputSelectList><InputSelectList Class="form-control form-control-sm" ID="SelectSm" IncludeBlank="True" IncludeBlankCaption="--Small Select--" OptionCaptionColumn="Caption" OptionValueColumn="Value"> <DataLayer Type="Static" /> </InputSelectList>
Validation states

Validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .form-text text-muted within that element will receive the validation styles.

Input with success
Input with warning
Input with error
<Division Class="has-success form-group" HtmlDiv="True" ID="dvSuccess"> <InputText Class="form-control" ID="inpTextSuccess" Placeholder="This is a placeholder!" Caption="Input with success" CaptionClass="control-label" /> <Label HtmlTag="P" Class="form-text text-muted" Caption="A block of help text that breaks onto a new line and may extend beyond one line." /> </Division><Division Class="has-warning form-group" HtmlDiv="True" ID="dvWarning"> <InputText Class="form-control" ID="inpTextWarning" Placeholder="This is a placeholder!" Caption="Input with warning" CaptionClass="control-label" /> </Division><Division Class="has-error form-group" HtmlDiv="True"> <InputText Class="form-control" ID="inpTextError" Placeholder="This is a placeholder!" Caption="Input with error" CaptionClass="control-label" /> </Division>
<Division Class="form-group has-success" HtmlDiv="True">
  <InputText Class="form-control" Placeholder="..." CaptionClass="control-label" />
  <Label HtmlTag="P" Class="form-text text-muted" Caption="..." />
</Division>
<Division class="form-group has-warning" HtmlDiv="True">
  <InputText Class="form-control" Placeholder="..." CaptionClass="control-label" />
  <Label HtmlTag="P" Class="form-text text-muted" Caption="..." />
</Division>
<Division class="form-group has-error" HtmlDiv="True">
  <InputText Class="form-control" Placeholder="..." CaptionClass="control-label" />
  <Label HtmlTag="P" Class="form-text text-muted" Caption="..." />
</Division>
Dropdown Lists
Select List
<InputSelectList Caption="Select List" Class="form-control" ID="SelectList" OptionCaptionColumn="Caption" OptionValueColumn="Caption"> <DataLayer ID="dlDropDownList" Type="Static"> <StaticDataRow Caption="Option 1" /> <StaticDataRow Caption="Option 2" /> </DataLayer> </InputSelectList>
<InputSelectList Class="form-control" OptionCaptionColumn="Caption" OptionValueColumn="Caption">
  <DataLayer ID="dlDropDownList" Type="Static">
    <StaticDataRow Caption="Option 1" />
    <StaticDataRow Caption="Option 2" />
  </DataLayer>
</InputSelectList>
Checkbox List Group
<InputCheckboxList CheckboxListDropdown="True" DropdownButtonClass="form-control" ID="iclDefault" OptionCaptionColumn="Caption" OptionValueColumn="Caption" Width="100" WidthScale="%"> <DataLayer ID="dlCBList" Type="Static"> <StaticDataRow Caption="Option 1" /> <StaticDataRow Caption="Option 2" /> </DataLayer> </InputCheckboxList>
<InputCheckboxList CheckboxListDropdown="True" DropdownButtonClass="form-control">
  <DataLayer ID="dlCBStaticList" Type="Static">
    <StaticDataRow caption="Option 1" />
    <StaticDataRow caption="Option 2" />
  </DataLayer>
</InputCheckboxList>
Button Dropdowns
Dropdown
<Division Class="dropdown" HtmlDiv="True" ID="BtnDdlDefault">
  <Division Class="btn btn-secondary dropdown-toggle">
    <Label Caption="Dropdown" />
  </Division>
  <Division Class="dropdown-menu" HtmlDiv="True">
    <Label Caption="Action" Class="dropdown-item" HtmlTag="a">
      <EventHandler DhtmlEvent="href">
        <Action Javascript="void(0);" Type="Javascript" />
      </EventHandler>
    </Label>
    <Label Caption="Something else here" Class="dropdown-item" HtmlTag="a">
      <EventHandler DhtmlEvent="href">
        <Action Javascript="void(0);" Type="Javascript" />
      </EventHandler>
    </Label>
    <Division Class="dropdown-divider" HtmlDiv="True" />
    <Label Caption="Separated link" Class="dropdown-item" HtmlTag="a">
      <EventHandler DhtmlEvent="href">
        <Action Javascript="void(0);" Type="Javascript" />
      </EventHandler>
    </Label>
  </Division>
</Division>
/*START INCLUDE SCRIPT ELEMENT...*/
$('.dropdown-toggle:not([attr=\'data-toggle\'])').attr('data-toggle', 'dropdown');
/*...END INCLUDE SCRIPT*/
<Division Class="dropdown" HtmlDiv="True" ID="BtnDdlDefault"> <Division Class="btn btn-secondary dropdown-toggle"> <Label Caption="Dropdown" /> </Division> <Division Class="dropdown-menu" HtmlDiv="True"> <Label Caption="Action" Class="dropdown-item" HtmlTag="a"> <EventHandler DhtmlEvent="href"> <Action Javascript="void(0);" Type="Javascript" /> </EventHandler> </Label> <Label Caption="Something else here" Class="dropdown-item" HtmlTag="a"> <EventHandler DhtmlEvent="href"> <Action Javascript="void(0);" Type="Javascript" /> </EventHandler> </Label> <Division Class="dropdown-divider" HtmlDiv="True" /> <Label Caption="Separated link" Class="dropdown-item" HtmlTag="a"> <EventHandler DhtmlEvent="href"> <Action Javascript="void(0);" Type="Javascript" /> </EventHandler> </Label> </Division> <IncludeScript IncludedScript="$('.dropdown-toggle:not([attr=\'data-toggle\'])').attr('data-toggle', 'dropdown');" /> </Division>
Dropup
Dropup
ActionSomething else here
Separated link
<Division Class="dropup" HtmlDiv="True" ID="BtnDdlDropUp">
  <Division Class="btn btn-secondary dropdown-toggle">
    <Label Caption="Dropup" />
  </Division>
  <Division Class="dropdown-menu" HtmlDiv="True">
    <Label Caption="Action" Class="dropdown-item" HtmlTag="a">
      <EventHandler DhtmlEvent="href">
        <Action Javascript="void(0);" Type="Javascript" />
      </EventHandler>
    </Label>
    <Label Caption="Something else here" Class="dropdown-item" HtmlTag="a">
      <EventHandler DhtmlEvent="href">
        <Action Javascript="void(0);" Type="Javascript" />
      </EventHandler>
    </Label>
    <Division Class="dropdown-divider" HtmlDiv="True" />
    <Label Caption="Separated link" Class="dropdown-item" HtmlTag="a">
      <EventHandler DhtmlEvent="href">
        <Action Javascript="void(0);" Type="Javascript" />
      </EventHandler>
    </Label>
  </Division>
</Division>
/*START INCLUDE SCRIPT ELEMENT...*/
$('.dropdown-toggle:not([attr=\'data-toggle\'])').attr('data-toggle', 'dropdown');
/*...END INCLUDE SCRIPT*/
<Division Class="dropup" HtmlDiv="True" ID="BtnDdlDropUp"> <Division Class="btn btn-secondary dropdown-toggle"> <Label Caption="Dropup" /> </Division> <Division Class="dropdown-menu" HtmlDiv="True"> <Label Caption="Action" Class="dropdown-item" HtmlTag="a"> <EventHandler DhtmlEvent="href"> <Action Javascript="void(0);" Type="Javascript" /> </EventHandler> </Label> <Label Caption="Something else here" Class="dropdown-item" HtmlTag="a"> <EventHandler DhtmlEvent="href"> <Action Javascript="void(0);" Type="Javascript" /> </EventHandler> </Label> <Division Class="dropdown-divider" HtmlDiv="True" /> <Label Caption="Separated link" Class="dropdown-item" HtmlTag="a"> <EventHandler DhtmlEvent="href"> <Action Javascript="void(0);" Type="Javascript" /> </EventHandler> </Label> </Division> <IncludeScript IncludedScript="$('.dropdown-toggle:not([attr=\'data-toggle\'])').attr('data-toggle', 'dropdown');" /> </Division>
Checkbox Options
Checkbox Selector
Checkbox
Single
Inline Checkbox
Inline 1
Inline 2
<Division Class="checkbox" HtmlDiv="True" ID="single-checkox">
  <InputCheckbox Caption="Single" CheckedValue="Value" ID="SingleCheckbox" />
</Division>

<Division Class="checkbox" HtmlDiv="True">
  <Division Class="checkbox-inline" HtmlDiv="True">
    <InputCheckbox Caption="..." CheckedValue="Value" ID="InlineCheckbox1" />
  </Division>
  <Division Class="checkbox-inline" HtmlDiv="True">
    <InputCheckbox Caption="..." CheckedValue="Value" ID="InlineCheckbox2" />
  </Division>
</Division>
<Division Class="checkbox" HtmlDiv="True" ID="single-checkox"> <InputCheckbox Caption="Single" CheckedValue="Value" ID="SingleCheckbox" /> </Division>