HTML input widget

HTML input

With the HTML input widget, you can add a field to enter the input data directly on the storyboard. The input data is intended for a script that you use in the HTML code widget.

Use the data tab to define the following settings.

Section Use this item to

Name

Specify the internal name for the input area to connect it with the code in the HTML code widget.

ID

Specify the ID for the input area to connect it with the code in the HTML code widget.

Default value

Add the default value in the input area.
Placeholder Specify the value to be shown as a placeholder or some sort of instructions. For example, ”Type your text here”, ”Enter the value to analyze”.

Use the appearance tab to define the appearance of the HTML input field.

Section Use this item to

Size

Select how to define the input field size: in percentage or in pixels. Then, define the values for the width and height of the field (in percentage or pixels, depending on the selected size type).

Fonts

Define the font properties (font family, size, color, style, and weight) for the input text/data.

Background

Define the background color for the input field.

Border

Define the field’s border color, border thickness, and border radius. The bigger the corner radius, the more rounded the field corners are.

Style

Add the inline style properties, for example, text-align:center; padding:5px.

Visibility

Specify whether the widget is initially visible or hidden when the page is opened or refreshed.

The example of the input area appearance is displayed in the following screenshot.