Default Text Box
This example demonstrates the Bootstrap Text Box control with default settings. The Bootstrap Text Box control is a single-line text editor.
<dx:BootstrapTextBox runat="server" Text="Default Text">
</dx:BootstrapTextBox>
Null Text
This demo illustrates how the NullText property can be used to display prompt text (watermark) in the editor's edit box. Specified text is displayed when the value of the editor is null and the editor is not focused. The prompt text disappears when the editor receives focus. To show the null text even in the focused editor set the NullTextDisplayMode property to UnfocusedAndFocused.
<dx:BootstrapTextBox runat="server" NullText="Enter Your Name">
</dx:BootstrapTextBox>
Mask
In this example, the Text Box control takes advantage of the masked input feature to only accept values formatted as phone numbers. The mask is specified using the MaskSettings.Mask property.
Refer to the Mask Types topic, for a list of the available mask types.
- MaskSettings.ErrorText - specifies the error text to be displayed, if user input is not valid against the specified mask
- MaskSettings.ShowHints - MaskSettings.ShowHints - enables a hint that displays when an end-user enters a value into a masked editor (range and enumeration mask types are supported)
<dx:BootstrapTextBox runat="server">
<MaskSettings Mask="+1 (999) 000-0000" IncludeLiterals="None" ErrorText="Please input missing digits" />
</dx:BootstrapTextBox>
The DisplayFormatString property specifies the pattern used to format the value of an editor for display purposes when the editor is not focused. Display values can be formatted using the standard formatting mechanism described in MSDN. For more information about composing format patterns, see the following MSDN topics: Numeric Format Strings and Date and Time Format Strings.
<dx:BootstrapTextBox runat="server" Text="12345" DisplayFormatString="[ 00 - 00 - 00 ]">
</dx:BootstrapTextBox>
Caption and HelpText
In this example, the Text Box control displays a caption on the top and auxiliary help text at the bottom of the editor.
<dx:BootstrapTextBox runat="server" Caption="First Name" HelpText="Enter your first name">
<ValidationSettings RequiredField-IsRequired="true"></ValidationSettings>
</dx:BootstrapTextBox>