I. Overview
1) In designing a form, sometimes you have to manually enter some information. In this case, you can insert a Text Field widget to input texts in cells.
2) The Text Field widget is a data entry widget. After clicking Data Entry Preview and New Data Entry Preview modes, you can see the effect of the widget.
You will Learn |
---|
|
II. Steps
1. Insert a Text Field widget
1) Input text1 in B2 and text2 in C2.
2) Click B2, click [Widget Setting] in the right-hand pane, click the drop-down box, and choose [Text Field].
3) Insert a Text Field widget in C2 by repeating above steps.
2. Preview
Choose [Data Entry Preview], and then click B2 and C2 to input texts.
3. Set the widget name
1) Set the names of the widgets inserted in B2 and C2 respectively.
2) After setting the names, access the widgets through JavaScript, and modify their attributes.
4. Disable the widget
1) Click B2 and uncheck [Enabled]. Click C2 and check [Enabled].
2) Preview. You cannot input texts in B2 as the widget for it is disabled while you can input texts in C2 as the widget for it is enabled.
5. Hide the widget
1) Click B2 and uncheck [Visible Widget]. Click C2 and check [Visible Widget].
2) Click [Template] > [Web Attributes] and a window pops up. In the window, click [Individually set for the template]. Move the window scroll bar to the right, and check [Display Widgets Directly].
3) Preview. The widget inserted in B2 is invisible while that in C2 is visible.
6. Add watermarks
1) Delete the text in B2 and input the watermark “input text here” in the right-hand pane.
2) Preview. You can see a grey watermark in B2, which indicates you can input text here.
7. Validate the input value: Not allow null
1) Click B2 and uncheck [Allow Null]. Enter an error tip: Not null!
2) Preview
a) Delete the text in B2 and press the Enter button. An error tip pops up on the right-hand side of the browser window.
b) Delete the text in C2 and press the Enter button. There is no error tip.
8. Text length for data validation
1) Set the widget in B2 in the right-hand Widget Setting pane as follows:
Input Rule: Length
Min Length: 1
Max Length: 6
Error Tip: 1-6 letters!
2) Preview. When the length of the text in B2 is not between 1 and 6, an error tip will pop up on the right-hand side of the browser window.
9. Custom input rule for data validation
1) Set the widget in B2 in the right-hand Widget Setting pane as follows:
Input Rule: Custom
Regular Expressions: ^\d{3}$ (which refers to you can only input three numbers)
Error Tip: 3 numbers only!
2) Preview. When the text in B2 is not three numbers, an error tip will pop up on the right-hand side of the browser window.