The WLineEdit class is an inline widget that provides a single line edit.
<WLineEdit> corresponds to an HTML
<input type="text"> element.
You can restrict its input using a validator providing immediate client-side feedback. In the example below characters that aren't numbers are not accepted. If you enter a number out of the predefined range (0..130) then the widget colour is changed. See Forms > Validation for more details.
The line edit below reacts on every 'key pressed' event. It also shows how you can embed the label within the control (when empty).
WTextArea is an inline widget that provides a multi-line edit.
WTextArea corresponds to an HTML
Form validators can be used to validate the user's input with immediate client-side feedback.
WTextEdit is a full-featured editor for rich text editing. It is based on the TinyMCE editor, which must be downloaded separately from its author's website. The TinyMCE toolbar layout and plugins can be configured through Wt's interface. The default layout - as shown below - covers only a small portion of TinyMCE's capabilities.
A spin box is an inline widget to enter a number; WSpinBox is an input control for integer numbers, while WDoubleSpinBox is an input control for fixed point numbers. A spin box consists of a line edit, and buttons which allow to increase or decrease the value.
A user may be steered to providing correct input by providing an input mask. The input mask indicates the expected format and constrains the user to provide data only in the expected format.
In the example below we use an input mask to ask the user to enter an IP address.
Adding on top of the standard input controls, the
includes other useful form components
like prepended/appended inputs. You can add text or buttons before and/or
after any text-based input using the
.input-group-text class. Note
that select elements are not supported.
.input-group-text and an input control with the
.input-group class to prepend or append text to an input.
To prepend and append an input at once you can also use two instances
.input-group-text before and after the input control.
See Push buttons.