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.

SectionUse this item to


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


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

SectionUse this item to


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


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


Define the background color for the input field.


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


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


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.

Was this article helpful?
0 out of 0 found this helpful



Please sign in to leave a comment.