Forms — widgets and support classes for capturing user information

Text editors

Wt provides different kinds of text entry widgets: WLineEdit, WTextArea, WTextEdit and WSpinBox.

Line edit

The WLineEdit class is an inline widget that provides a single line edit.

A <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.

Example
source
#include <Wt/WContainerWidget>
#include <Wt/WIntValidator>
#include <Wt/WLineEdit>
#include <Wt/WTemplate>

Wt::WTemplate *result = new Wt::WTemplate(Wt::WString::tr("lineEdit-template"));
result->addFunction("id", &Wt::WTemplate::Functions::id);

Wt::WLineEdit *edit = new Wt::WLineEdit();
edit->setValidator(new Wt::WIntValidator(0, 130));

result->bindString("label", "Age:");
result->bindWidget("edit", edit);

Here is the corresponding XML template (with message id="lineEdit-template") using style classes from the Bootstrap theme.

source
<div class="form-inline">
<div class="form-group">
<label for="${id:edit}">${label}</label>
${edit}
</div>
</div>

The line edit below reacts on every 'key pressed' event. It also shows how you can embed the label within the control (when empty).

Example
source
#include <Wt/WContainerWidget>
#include <Wt/WLineEdit>
#include <Wt/WText>

Wt::WContainerWidget *container = new Wt::WContainerWidget();

Wt::WLineEdit *edit = new Wt::WLineEdit(container);
edit->setPlaceholderText("Edit me");

Wt::WText *out = new Wt::WText("", container);
out->addStyleClass("help-block");

edit->keyPressed().connect(std::bind([=] (const Wt::WKeyEvent& e) {
    out->setText("You pressed the '" + e.text() + "' key.");
}, std::placeholders::_1));

Top

Text area

WTextArea is an inline widget that provides a multi-line edit.

A WTextArea corresponds to an HTML <textarea> element.

Form validators can be used to validate the user's input with immediate client-side feedback.

Example

source
#include <Wt/WContainerWidget>
#include <Wt/WText>
#include <Wt/WTextArea>
#include <Wt/WDateTime>

Wt::WContainerWidget *container = new Wt::WContainerWidget();

Wt::WTextArea *ta = new Wt::WTextArea(container);
ta->setColumns(80);
ta->setRows(5);
ta->setText("Change this text... \n"
            "and click outside the text area to get a changed event.");

Wt::WText *out = new Wt::WText("<p></p>", container);
out->addStyleClass("help-block");

ta->changed().connect(std::bind([=] () {
    out->setText("<p>Text area changed at " +
                 Wt::WDateTime::currentDateTime().toString() + ".</p>");
}));

Top

Text edit

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.

Example
source
#include <Wt/Utils>
#include <Wt/WContainerWidget>
#include <Wt/WPushButton>
#include <Wt/WText>
#include <Wt/WTextEdit>

Wt::WContainerWidget *container = new Wt::WContainerWidget();

Wt::WTextEdit *edit = new Wt::WTextEdit(container);
edit->setHeight(300);
edit->setText("<p>"
    "<span style=\"font-family: 'courier new', courier; font-size: medium;\">"
    "<strong>WTextEdit</strong></span></p>"
    "<p>Hey, I'm a <strong>WTextEdit</strong> and you can make me"
        " <span style=\"text-decoration: underline;\"><em>rich</em></span>"
        " by adding your <span style=\"color: #ff0000;\"><em>style</em>"
	"</span>!</p>"
    "<p>Other widgets like...</p>"
      "<ul style=\"padding: 0px; margin: 0px 0px 10px 25px;\">"
        "<li>WLineEdit</li>"
        "<li>WTextArea</li>"
        "<li>WSpinBox</li>"
      "</ul>"
    "<p>don't have style.</p>");

Wt::WPushButton *button = new Wt::WPushButton("Get text", container);
button->setMargin(10, Wt::Top | Wt::Bottom);

Wt::WText *out = new Wt::WText(container);
out->setStyleClass("xhtml-output");

button->clicked().connect(std::bind([=] () {
    out->setText("<pre>" + Wt::Utils::htmlEncode(edit->text()) + "</pre>");
}));

You could also render the XHTML text to pdf using the Render::WPdfRenderer class. See Media > Pdf output for more details.

Top

Spin box

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.

Example
source
#include <Wt/WContainerWidget>
#include <Wt/WDoubleSpinBox>
#include <Wt/WLabel>
#include <Wt/WText>

Wt::WContainerWidget *container = new Wt::WContainerWidget();
container->addStyleClass("form-group");

Wt::WLabel *label = new Wt::WLabel("Enter a number (0 - 100):", container);

Wt::WDoubleSpinBox *sb = new Wt::WDoubleSpinBox(container);
sb->setRange(0,100);
sb->setValue(50);
sb->setDecimals(2);
sb->setSingleStep(0.1);

label->setBuddy(sb);

Wt::WText *out = new Wt::WText("", container);
out->addStyleClass("help-block");

sb->changed().connect(std::bind([=] () {
    if (sb->validate() == Wt::WValidator::Valid) {
        out->setText(Wt::WString::fromUTF8("Spin box value changed to {1}")
		     .arg(sb->text()));
    } else {
        out->setText(Wt::WString::fromUTF8("Invalid spin box value!"));
    }
}));

Top

Input masks

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.

Example
source
#include <Wt/WContainerWidget>
#include <Wt/WLineEdit>
#include <Wt/WTemplate>

Wt::WTemplate *result = new Wt::WTemplate(Wt::WString::tr("lineEdit-template"));
result->addFunction("id", &Wt::WTemplate::Functions::id);

Wt::WLineEdit *edit = new Wt::WLineEdit();
edit->setTextSize(15);
edit->setInputMask("009.009.009.009;_");

result->bindString("label", "IP Address:");
result->bindWidget("edit", edit);

Prepended and appended inputs

Adding on top of the standard input controls, the Bootstrap theme 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-prepend and .input-prepend classes respectively. Note that select elements are not supported.

Adding text

Wrap an .add-on and an input control with one of two classes to prepend or append text to an input. You could also use both classes and two instances of .add-on to prepend and append an input at once.

Example
@
.00
$ .00
source
#include <Wt/WLineEdit>
#include <Wt/WTemplate>

Wt::WTemplate *result = new Wt::WTemplate(Wt::WString::tr("editSide-template"));

Wt::WLineEdit *edit = new Wt::WLineEdit("Username");
edit->setStyleClass("span2");
result->bindWidget("name", edit);

edit = new Wt::WLineEdit();
edit->setStyleClass("span2");
result->bindWidget("amount1", edit);

edit = new Wt::WLineEdit();
edit->setStyleClass("span2");
result->bindWidget("amount2", edit);

Here is the corresponding XML template (with message id="editSide-template") using style classes from the Bootstrap theme.

source
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">@</span>
${name}
</div>
</div>
<div class="form-group">
<div class="input-group">
${amount1}
<span class="input-group-addon">.00</span>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">$</span>
${amount2}
<span class="input-group-addon">.00</span>
</div>
</div>

Adding drop down buttons

See Push buttons.

Top