使用表单设计器 › 如何添加、移动和删除元素

如何添加、移动和删除元素

在新表单或现有表单上，您可以添加和配置元素，如带有复选框或单选按钮的文本字段、文本区域等等。 在创建和自定义表单时添加和配置元素。

要在表单上添加和配置元素，请遵循以下步骤：

1. 在组件树（表单设计器的左侧窗格）中，确认 Components 文件夹、System 文件夹已展开，并且您想添加的元素已出现在 System 文件夹下的树视图中。

   例如，如果您要添加文本窗口项，请验证 System 文件夹（Components 文件夹下）已显示并且已展开可显示“文本窗口项”选项。 同样，如果您想添加选择框及其选项，请验证 Radio Group 文件夹（System 文件夹下）已显示并且已展开可显示“单选”选项。

2. 验证是否已存在要添加元素的表单。 如有必要，可创建表单。
3. 依次展开“表单”、“我的表单”文件夹，并滚动到您想向其中添加元素的表单。
4. 确认您可在树视图中同时看到想添加的元素和目标表单。
5. 单击元素，例如“文本窗口项”，然后将其拖放到目标表单。

   例如，如果目标表单名为 Model Options，单击“文本区域”，将其拖放到 Model Options，表单和元素均在同一树上。

   当单击并拖动元素时，光标旁会出现一个选中的圆圈和消息“已选中 1 个对象”。

   拖动鼠标时，当拖动的元素经过其可能被放置的表单或现有表单元素时，选中的圆圈会变成绿色，而光标变为手形。 相反，当拖动的元素没有经过其可能被放置的表单或表单元素时，选中的圆圈会变成红色。

6. 释放鼠标以便将元素放到表单或表单元素上。 当放置元素时，选中的圆圈必须是绿色的。 否则，将不添加该元素。

   同样，如果尝试的操作违反了规则，也不添加元素。 示例包括尝试将选择选项拖至单选按钮组上或将选择组拖至其他选择组上。

7. 为新元素指定必要的 HTML 属性，然后单击“保存”。

   每个元素的必要的 HTML 属性将以粗体显示。

   注意：在保存此元素之前执行不同操作的尝试将失败。 例如，在保存此元素之前拖放新元素的尝试将失败。

8. 检查预览区域（中间窗格）中的表单以确认元素已按照期望添加到表单。 如果未添加，您可能想重新安排元素，或者删除新元素并再次尝试添加。
9. 为新元素指定需要的可选 HTML 属性（如果有），然后单击“保存”。
10. 默认情况下，组件会组成一列。 要配置表单使用两列，请执行以下操作：
    1. 将“列布局”从 System 文件夹拖放到所需的表单。
    2. 当放置该布局时，树会自动更新“列布局”及其二个子项，“第 1 列”和“第 2 列”。
    3. 单击“列布局”旁的图标可显示两列，名为 “第 1 列”和“第 2 列”。
    4. 拖放其他元素（如文本字段、单选按钮组和选择框）到“第 1 列”和“第 2 列”可实现您想要的布局。

    注意：当突出显示“列布局”或某列时，在表单预览区域的相应位置可能会呈现灰色并禁用，而列中的元素可能会以红色粗体突出显示。

11. 为新元素指定需要的 JavaScript 属性（如果有），然后单击“保存”。
12. 要为新元素指定有意义的名称，请执行以下操作：
    1. 在组件树上选择新元素，然后单击组件树顶部的“重命名”按钮。

       注意：确认在组件树中您的表单上选择新元素（如文本区域或单选按钮组）；请小心不要在组件树的 System 文件夹中选择同样名称的元素。

       此时将出现“名称”对话框。

    2. 输入新的名称，然后单击“确定”。

    例如，在名为 External Storage Drive Order Form 的表单中，您可能拖放某个单选按钮组并将其名称从默认的“单选按钮组”更改为以 GB 为单位的容量。 下一步，您可能将三个单选按钮拖放到该单选按钮组中，并且将其名称从默认的单选按钮分别更改为小 (50)，中 (100) 和大 (150)。

    注意：当创建新元素时，在其名称的结尾自动包括一个冒号 (:)。 当您重命名元素时，“名称”对话框中不显示冒号。 但是，在您单击“确定”关闭对话框之后，会在预览区域中显示冒号。 验证您未在“名称”对话框中输入额外的冒号；否则，元素会在预览区域的名称后具有两个冒号。

13. 确认新元素是否如期望的那样显示并运行。 如有必要，可修改属性来获得您想要的外观和功能。
14. 为想要添加的每个元素重复前一步骤。
15. 可以选择通过拖放将表单中的一个或多个元素移动到表单的其他位置，例如，在某个先前靠后的元素之后。
16. 可以通过选择并单击“删除”来删除您在表单中不想要的元素。