Input Select

Example
Input Text
Input limited to 40 characters
<Row ID="rowInpText" Class="UI_Rows" IdeDisplayStatus="Collapsed">
  <Column ID="colCaption" Width="20" WidthScale="%" Class="UI_Cols" IdeDisplayStatus="Collapsed">
    <Label Caption="Input Text:" ID="lblElement" />
  </Column>
  <Column ID="colUI" Width="46" WidthScale="%" Class="UI_Cols" IdeDisplayStatus="Collapsed">
    <InputText ID="inpText" DefaultValue="Hello, everyone!" InputSize="44" InputMaxLength="40" />
  </Column>
  <Column ID="colNote" Class="font10pt, ThemeItalic" IdeDisplayStatus="Collapsed">
    <Label ID="lblNote" Class="ThemeItalic" Caption="Input limited to 40 characters" />
  </Column>
</Row>
<Row ID="rowInpText" Class="UI_Rows" IdeDisplayStatus="Collapsed"> <Column ID="colCaption" Width="20" WidthScale="%" Class="UI_Cols" IdeDisplayStatus="Collapsed"> <Label Caption="Input Text:" ID="lblElement" /> </Column> <Column ID="colUI" Width="46" WidthScale="%" Class="UI_Cols" IdeDisplayStatus="Collapsed"> <InputText ID="inpText" DefaultValue="Hello, everyone!" InputSize="44" InputMaxLength="40" /> </Column> <Column ID="colNote" Class="font10pt, ThemeItalic" IdeDisplayStatus="Collapsed"> <Label ID="lblNote" Class="ThemeItalic" Caption="Input limited to 40 characters" /> </Column> </Row>
Input Password
Validation requires a password value
<Row ID="rowInpPW" Class="UI_Rows" IdeDisplayStatus="Collapsed">
  <Column ID="colCaption" Width="15" WidthScale="%" Class="UI_Cols" IdeDisplayStatus="Collapsed">
    <Label Caption="Input Password:" ID="lblElement" />
  </Column>
  <Column ID="colUI" Width="46" WidthScale="%" Class="UI_Cols" IdeDisplayStatus="Collapsed">
    <InputPassword ID="inpPW" InputMaxLength="8" InputSize="8" DefaultValue="password" IdeDisplayStatus="Collapsed">
      <Validation Type="Required" Class="errorMsg" ErrorMsg="You must enter a password value!" />
    </InputPassword>
  </Column>
  <Column ID="colNote" Class="font10pt, ThemeItalic" IdeDisplayStatus="Collapsed">
    <Label Caption="Validation requires a password value" ID="lblNote" Class="ThemeItalic" />
  </Column>
</Row>
<Row ID="rowInpPW" Class="UI_Rows" IdeDisplayStatus="Collapsed"> <Column ID="colCaption" Width="15" WidthScale="%" Class="UI_Cols" IdeDisplayStatus="Collapsed"> <Label Caption="Input Password:" ID="lblElement" /> </Column> <Column ID="colUI" Width="46" WidthScale="%" Class="UI_Cols" IdeDisplayStatus="Collapsed"> <InputPassword ID="inpPW" InputMaxLength="8" InputSize="8" DefaultValue="password" IdeDisplayStatus="Collapsed"> <Validation Type="Required" Class="errorMsg" ErrorMsg="You must enter a password value!" /> </InputPassword> </Column> <Column ID="colNote" Class="font10pt, ThemeItalic" IdeDisplayStatus="Collapsed"> <Label Caption="Validation requires a password value" ID="lblNote" Class="ThemeItalic" /> </Column> </Row>
Input Date
Validates for valid date format
<Row ID="rowInpDate" Class="UI_Rows" IdeDisplayStatus="Collapsed">
  <Column ID="colCaption" Width="15" WidthScale="%" Class="UI_Cols" IdeDisplayStatus="Collapsed">
    <Label Caption="Input Date:" ID="lblElement" />
  </Column>
  <Column ID="colUI" Width="46" WidthScale="%" Class="UI_Cols" IdeDisplayStatus="Collapsed">
    <InputDate ID="inpDate" InputSize="8" CalendarLinkType="Image" DefaultValue="11/21/2024" Tooltip="Use mm/dd/yyyy format" IdeDisplayStatus="Collapsed">
      <InputDateCalendar CalendarCaption="Select date:" TableBorder="1" />
      <Validation Type="Date" ErrorMsg="You must enter a valid date!" Class="errorMsg" />
    </InputDate>
  </Column>
  <Column ID="colNote" Class="font10pt, ThemeItalic" IdeDisplayStatus="Collapsed">
    <Label Caption="Validates for valid date format" ID="lblNote" Class="ThemeItalic" />
  </Column>
</Row>
<Row ID="rowInpDate" Class="UI_Rows" IdeDisplayStatus="Collapsed"> <Column ID="colCaption" Width="15" WidthScale="%" Class="UI_Cols" IdeDisplayStatus="Collapsed"> <Label Caption="Input Date:" ID="lblElement" /> </Column> <Column ID="colUI" Width="46" WidthScale="%" Class="UI_Cols" IdeDisplayStatus="Collapsed"> <InputDate ID="inpDate" InputSize="8" CalendarLinkType="Image" DefaultValue="11/21/2024" Tooltip="Use mm/dd/yyyy format" IdeDisplayStatus="Collapsed"> <InputDateCalendar CalendarCaption="Select date:" TableBorder="1" /> <Validation Type="Date" ErrorMsg="You must enter a valid date!" Class="errorMsg" /> </InputDate> </Column> <Column ID="colNote" Class="font10pt, ThemeItalic" IdeDisplayStatus="Collapsed"> <Label Caption="Validates for valid date format" ID="lblNote" Class="ThemeItalic" /> </Column> </Row>
Input Date - Range
Start: End: Validates for valid date format
<Row ID="rowInpDateRange" Class="UI_Rows" IdeDisplayStatus="Collapsed">
  <Column ID="colCaption" Width="15" WidthScale="%" Class="UI_Cols" IdeDisplayStatus="Collapsed">
    <Label Caption="Input Date - Range:" ID="lblElement" />
  </Column>
  <Column ID="colUI" Width="46" WidthScale="%" Class="UI_Cols" IdeDisplayStatus="Collapsed">
    <InputDate ID="inpDateStart" InputSize="8" CalendarLinkType="Image" DefaultValue="11/21/2024" ShowDateRange="True" EndDateRangeID="inpDateEnd" EndDateDefaultValue="=DateAdd(&quot;d&quot;, 7, CXMLDate(&quot;11/21/2024&quot;))" Caption="Start:" EndDateRangeCaption="End:" Tooltip="Use mm/dd/yyyy format" IdeDisplayStatus="Collapsed">
      <InputDateCalendar CalendarCaption="Select date:" TableBorder="1" />
      <Validation Type="Date" ErrorMsg="You must enter a valid date!" Class="errorMsg" />
    </InputDate>
  </Column>
  <Column ID="colNote" Class="font10pt, ThemeItalic" IdeDisplayStatus="Collapsed">
    <Label Caption="Validates for valid date format" ID="lblNote" Class="ThemeItalic" />
  </Column>
</Row>
<Row ID="rowInpDateRange" Class="UI_Rows" IdeDisplayStatus="Collapsed"> <Column ID="colCaption" Width="15" WidthScale="%" Class="UI_Cols" IdeDisplayStatus="Collapsed"> <Label Caption="Input Date - Range:" ID="lblElement" /> </Column> <Column ID="colUI" Width="46" WidthScale="%" Class="UI_Cols" IdeDisplayStatus="Collapsed"> <InputDate ID="inpDateStart" InputSize="8" CalendarLinkType="Image" DefaultValue="11/21/2024" ShowDateRange="True" EndDateRangeID="inpDateEnd" EndDateDefaultValue="=DateAdd(&quot;d&quot;, 7, CXMLDate(&quot;11/21/2024&quot;))" Caption="Start:" EndDateRangeCaption="End:" Tooltip="Use mm/dd/yyyy format" IdeDisplayStatus="Collapsed"> <InputDateCalendar CalendarCaption="Select date:" TableBorder="1" /> <Validation Type="Date" ErrorMsg="You must enter a valid date!" Class="errorMsg" /> </InputDate> </Column> <Column ID="colNote" Class="font10pt, ThemeItalic" IdeDisplayStatus="Collapsed"> <Label Caption="Validates for valid date format" ID="lblNote" Class="ThemeItalic" /> </Column> </Row>
Input Time
Validates for valid time value
<Row Class="UI_Rows" ID="rowInpTime" IdeDisplayStatus="Collapsed">
  <Column Class="UI_Cols" ID="colCaption" Width="15" WidthScale="%" IdeDisplayStatus="Collapsed">
    <Label Caption="Input Time:" ID="lblElement" />
  </Column>
  <Column Class="UI_Cols" ID="colUI" Width="46" WidthScale="%" IdeDisplayStatus="Collapsed">
    <InputTime DefaultValue="05:46:31" ID="inpTime" InputSize="8" Tooltip="Use 24-hour format" IdeDisplayStatus="Collapsed">
      <Validation Class="errorMsg" ErrorMsg="You must enter a valid time format!" Type="Time" />
    </InputTime>
  </Column>
  <Column Class="font10pt, ThemeItalic" ID="colNote" IdeDisplayStatus="Collapsed">
    <Label Caption="Validates for valid time value" Class="ThemeItalic" ID="lblNote" />
  </Column>
</Row>
<Row Class="UI_Rows" ID="rowInpTime" IdeDisplayStatus="Collapsed"> <Column Class="UI_Cols" ID="colCaption" Width="15" WidthScale="%" IdeDisplayStatus="Collapsed"> <Label Caption="Input Time:" ID="lblElement" /> </Column> <Column Class="UI_Cols" ID="colUI" Width="46" WidthScale="%" IdeDisplayStatus="Collapsed"> <InputTime DefaultValue="05:46:31" ID="inpTime" InputSize="8" Tooltip="Use 24-hour format" IdeDisplayStatus="Collapsed"> <Validation Class="errorMsg" ErrorMsg="You must enter a valid time format!" Type="Time" /> </InputTime> </Column> <Column Class="font10pt, ThemeItalic" ID="colNote" IdeDisplayStatus="Collapsed"> <Label Caption="Validates for valid time value" Class="ThemeItalic" ID="lblNote" /> </Column> </Row>
Input Color Picker
<Row Class="UI_Rows" ID="rowInpColorPicker" IdeDisplayStatus="Collapsed">
  <Column Class="UI_Cols" ID="colCaption" Width="15" WidthScale="%" IdeDisplayStatus="Collapsed">
    <Label Caption="Input Color Picker:" ID="lblElement" />
  </Column>
  <Column Class="UI_Cols" ID="colUI" Width="46" WidthScale="%" IdeDisplayStatus="Collapsed">
    <InputColorPicker DefaultValue="#86CAC3" ID="inpColorPicker" InputSize="8" />
  </Column>
</Row>
<Row Class="UI_Rows" ID="rowInpColorPicker" IdeDisplayStatus="Collapsed"> <Column Class="UI_Cols" ID="colCaption" Width="15" WidthScale="%" IdeDisplayStatus="Collapsed"> <Label Caption="Input Color Picker:" ID="lblElement" /> </Column> <Column Class="UI_Cols" ID="colUI" Width="46" WidthScale="%" IdeDisplayStatus="Collapsed"> <InputColorPicker DefaultValue="#86CAC3" ID="inpColorPicker" InputSize="8" /> </Column> </Row>
Input Email
Validates email address format
<Row ID="rowInpEmail" Class="UI_Rows" IdeDisplayStatus="Collapsed">
  <Column ID="colCaption" Width="15" WidthScale="%" Class="UI_Cols" IdeDisplayStatus="Collapsed">
    <Label Caption="Input Email:" ID="lblElement" />
  </Column>
  <Column ID="colUI" Width="46" WidthScale="%" Class="UI_Cols" IdeDisplayStatus="Collapsed">
    <InputEmail ID="inpEmail" DefaultValue="[email protected]" InputSize="44" IdeDisplayStatus="Collapsed">
      <Validation Type="Email" ErrorMsg="You must enter a valid email address!" Class="errorMsg" />
    </InputEmail>
  </Column>
  <Column ID="colNote" Class="font10pt, ThemeItalic" IdeDisplayStatus="Collapsed">
    <Label Caption="Validates email address format" ID="lblNote" Class="ThemeItalic" />
  </Column>
</Row>
<Row ID="rowInpEmail" Class="UI_Rows" IdeDisplayStatus="Collapsed"> <Column ID="colCaption" Width="15" WidthScale="%" Class="UI_Cols" IdeDisplayStatus="Collapsed"> <Label Caption="Input Email:" ID="lblElement" /> </Column> <Column ID="colUI" Width="46" WidthScale="%" Class="UI_Cols" IdeDisplayStatus="Collapsed"> <InputEmail ID="inpEmail" DefaultValue="[email protected]" InputSize="44" IdeDisplayStatus="Collapsed"> <Validation Type="Email" ErrorMsg="You must enter a valid email address!" Class="errorMsg" /> </InputEmail> </Column> <Column ID="colNote" Class="font10pt, ThemeItalic" IdeDisplayStatus="Collapsed"> <Label Caption="Validates email address format" ID="lblNote" Class="ThemeItalic" /> </Column> </Row>
Input Text Area
Hover mouse for tooltip




<Row ID="rowInpTextArea" Class="UI_Rows" IdeDisplayStatus="Collapsed">
  <Column ID="colCaption" Width="15" WidthScale="%" Class="UI_Cols" IdeDisplayStatus="Collapsed">
    <Label Caption="Input Text Area:" ID="lblElement" />
    <LineBreak LineCount="5" />
  </Column>
  <Column ID="colUI" Width="46" WidthScale="%" Class="UI_Cols" IdeDisplayStatus="Collapsed">
    <InputTextArea ID="inpTextArea" InputRows="5" InputColumns="42" Tooltip="To insert a line break, press Shift-Enter." DefaultValue="Here's some room to write..." />
  </Column>
  <Column ID="colNote" Class="font10pt, ThemeItalic">
    <Label Caption="Hover mouse for tooltip" ID="lblNote" Class="ThemeItalic" />
    <LineBreak LineCount="5" />
  </Column>
</Row>
<Row ID="rowInpTextArea" Class="UI_Rows" IdeDisplayStatus="Collapsed"> <Column ID="colCaption" Width="15" WidthScale="%" Class="UI_Cols" IdeDisplayStatus="Collapsed"> <Label Caption="Input Text Area:" ID="lblElement" /> <LineBreak LineCount="5" /> </Column> <Column ID="colUI" Width="46" WidthScale="%" Class="UI_Cols" IdeDisplayStatus="Collapsed"> <InputTextArea ID="inpTextArea" InputRows="5" InputColumns="42" Tooltip="To insert a line break, press Shift-Enter." DefaultValue="Here's some room to write..." /> </Column> <Column ID="colNote" Class="font10pt, ThemeItalic"> <Label Caption="Hover mouse for tooltip" ID="lblNote" Class="ThemeItalic" /> <LineBreak LineCount="5" /> </Column> </Row>
Input Text Area with TinyMCE Editor

    Text is POSTed as encoded HTML




<Row ID="rowInpTextAreaTinyMCE" Class="UI_Rows" IdeDisplayStatus="Collapsed">
  <Column ID="colCaption" Width="15" WidthScale="%" Class="UI_Cols" IdeDisplayStatus="Collapsed">
    <Label Caption="Input Text Area" ID="lblElement" />
    <LineBreak />
    <Label Caption="with TinyMCE Editor:" ID="lblElement2" />
    <LineBreak LineCount="5" />
  </Column>
  <Column ID="colUI" Width="46" WidthScale="%" Class="UI_Cols">
    <LineBreak />
    <Note Note="set input control class = selector value defined in initTinyMCE script" />
    <InputTextArea ID="inpTextArea2" InputRows="5" InputColumns="42" Tooltip="To insert a line break, press Shift-Enter." DefaultValue="Rich-text editing in here..." Class="TMCEditor" />
  </Column>
  <Column ID="colNote" Class="font10pt, ThemeItalic">
    <Spaces Size="4" />
    <Label Caption="Text is POSTed as encoded HTML" ID="lblNote" Class="ThemeItalic" />
    <LineBreak LineCount="5" />
  </Column>
</Row>
<Row ID="rowInpTextAreaTinyMCE" Class="UI_Rows" IdeDisplayStatus="Collapsed"> <Column ID="colCaption" Width="15" WidthScale="%" Class="UI_Cols" IdeDisplayStatus="Collapsed"> <Label Caption="Input Text Area" ID="lblElement" /> <LineBreak /> <Label Caption="with TinyMCE Editor:" ID="lblElement2" /> <LineBreak LineCount="5" /> </Column> <Column ID="colUI" Width="46" WidthScale="%" Class="UI_Cols"> <LineBreak /> <Note Note="set input control class = selector value defined in initTinyMCE script" /> <InputTextArea ID="inpTextArea2" InputRows="5" InputColumns="42" Tooltip="To insert a line break, press Shift-Enter." DefaultValue="Rich-text editing in here..." Class="TMCEditor" /> </Column> <Column ID="colNote" Class="font10pt, ThemeItalic"> <Spaces Size="4" /> <Label Caption="Text is POSTed as encoded HTML" ID="lblNote" Class="ThemeItalic" /> <LineBreak LineCount="5" /> </Column> </Row>