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.