[]
        
立即下载
(Showing Draft Content)

表单

观看本节视频

表单用来包含各种表单项目,如文本、单行输入框、多行输入框、选择器、复选框、按钮等。您可以在表单内输入信息,完成后可以通过数据表操作命令等将数据提交到服务器。

表单容器

选择一个单元格或单元格区域,然后在单元格类型中选择表单,双击或者拖拽表单容器至单元格区域中。

image

设置表单容器

选中表单容器,在属性设置区中选择“单元格设置”标签页,设置说明见下表。

设置

说明

布局

设置布局模式为多列或行内表单。

  • 多列多列布局是指将表单项目按照列的方式进行排列,把表单划分为多个列,每个列中可以放置不同的表单项目,从而实现更规整、紧凑且具有结构化的布局效果,使表单在有限的空间内能够展示更多的内容。适用于表单项目较多、需要对表单项目进行分组展示的情况,例如注册表单、问卷调查表单等。

  • 行内表单行内表单布局是指将表单项目在同一行内依次排列,通常每个表单项目及其标签紧密相邻,这种布局方式能够节省垂直空间,使表单看起来更加简洁、紧凑,用户可以在一行内完成相关信息的输入和操作。适用于表单项目较少、对垂直空间要求较高的场景,如搜索框、登录框等。

表单项所占列数

当布局为多列时,可设置表单项所占列数。默认值为1。

标签与输入框的位置

当布局为多列时,可设置标签与输入框的位置为上下布局或左右布局。默认为上下布局。

上下布局:

image

左右布局:

image

标签与输入框的间距

当布局为多列时,可设置标签与输入框的间距。默认为8,单位为像素。

标签必填标记位置

设置标签必填标记位置,可设置为文本左侧或文本右侧。默认为文本左侧。

标签大小

当标签与输入框的位置为左右布局时,可设置标签大小。包括:

  • 小:45像素。

  • 正常:70像素。

  • 大:140像素。

  • 自定义:选择自定义标签大小时,会在下方显示标签自定义大小的输入框,您可以输入数字,默认为100,单位为像素。

标签样式

设置标签的样式,包括对齐、字体和填充。

表单项行间距

设置表单项行与行之间的间距,默认值为 12,单位为像素。

表单项列间距

设置表单项列与列之间的间距,默认值为 24,单位为像素。

显示错误信息至

设置错误信息的位置。默认为输入框下方。

如果设置为自动,错误信息将按照数据验证设置中的出错警告显示。具体请参见页面端校验

容器溢出模式

  • 溢出:容器会扩展直至能够完全显示所有项目。 

  • 滚动:容器中出现滚动条。

  • 剪切:超出容器的项目会被裁减,不显示出来。

容器内边距

设置容器的内边距,包括左、上、右、下,单位为像素。可设置“全部”,快速设置四个方向的内边距。

禁用

设置是否禁用表单容器。勾选“禁用”后,容器内的所有项目均不可以点击,且文字颜色会变灰。

不可见

设置是否隐藏表单容器。勾选“不可见”后,容器将被隐藏。

注释

表单容器单元格的注释,具体可参见单元格基本操作的“新建注释”。

操作表单容器

放置表单项

将数据表、字段或单元格类型列表拖拽到表单容器中。

数据表

将数据表拖拽到表单容器中,会弹出设置数据源的对话框。

image

image

设置列和标签文本后,单击“确定”,即可添加表单项到表单中。

image

字段

将数据表中的字段拖拽到表单容器中。

image

image

单元格类型

将单元格类型拖拽到表单容器中。

image

image

调整表单项

选择容器中的表单项,右击,在右键菜单中选择“调整表单项”。

弹出设置数据源的对话框。在这个对话框中您可以修改数据表、绑定的列及标签文本。

image

image

表单项设置

选择一个项目,在右侧的单元格设置中,单击“表单项设置”超链接,打开如下的对话框。

image

设置

说明

表单项所占列数

设置当前项目在容器中占据的列数,默认值为 1。

输入框高度

设置项目的输入框高度,项目的默认高度取决于单元格类型的默认大小。

表单项最大宽度

设置表单项中控件的最大宽度,不包括标签。

允许根据内容拉伸表单项高度

设置表单项的高度是否随其内容变化,默认值为否。

显示必填标识

设置是否显示必需标识,默认值为否。

继承标签样式

设置是否继承容器的标签样式。

项目容器的CSS类名

设置项目的CSS类名,以调整单元格的外观。具体可参见使用CSS

调整项目大小及移动项目

选中容器中的项目后,会在项目的底部出现控制点,将鼠标悬停到控制点上时,鼠标会变成双向箭头,此时您就可以调整项目的大小。

image

容器的右键菜单

选中表单容器,右击,在右键菜单中可进行如下的操作:

image

容器中项目的右键菜单

选中表单容器中的项目,右击,在右键菜单中可进行如下的操作。

image

其中,前移、后移、移动到最前、移动到最后是用于调整项目排列顺序的操作。

  • 前移:将选定的项目按项目的排序顺序向前移动一个位置。

  • 后移:将选定的项目按项目的排序顺序向后移动一个位置。

  • 移动到最前:将选定的项目移动到项目排序顺序中的第一个位置。

  • 移动到最后:将选定的项目移动到项目排序顺序中的最后一个位置。

image

表单容器使用示例

1. 将数据表拖拽到表单容器中。

image

2.弹出设置数据源的对话框。您可以设置字段及标签文本。

image

3. 调整表单容器。例如设置布局为多列,表单项所占列数为2,表单项列间距为10。

image

4. 运行页面,显示如下的表单页面。

image