Tersus: Form

FormDate: Feb 11, 2017Form is used as a container of various input fields, with support for <On Submit>.

You can freely define the content of the form, but the Form template helps you include frequently used elements (Text Labeled Field, Number Labeled Field, Date Labeled Field and Selection Labeled Field). To add any of these, right click Form, select Add Element, and select the required element. To input a longer text you may want to add Text Area.

You can control the field layout in the form:

By default, the label of each field is displayed in a separate line just before the field itself. This is common on small screens (smartphones).
On wider screens (e.g. on a tablet) we'd usually like the label to appear on the same line as the field itself. This can be achieved by adding form-wide to the html.styleClass property of the Form element. It allocates 20% of the width to the label and 80% to the field itself (as defined in the field.less file in the project's web/styles folder, which you can modify as needed).
To force the label to appear on the same line on narrow screens, use the style class form-narrow-one-line-fields. In this case the label gets 40% of the width (also defined in the field.less file).

You can also add a submit button (a button with the property html.type="submit"). In this case:

Pressing the button performs whatever is modeled inside the button (as usual), and then performs <On Submit>.
Same is done when pressing the return of the iPhone/iPad keyboard (or Enter in Android).

Sample modeling - Gusetbook:

Which results: