表单面板

顾名思义，表单面板是用来向服务器端提交数据的。通过表单面板，可以非常容易的做出各种在线填报的问卷调查、资料填写等等。

在WebBuilderX中，表单面板和表格面板是专门用于和服务器进行数据交互的两种面板，它们都会涉及到数据库。为让示例看起来更加有条理，我们先在功能项定义中添加2个菜单项：

其中，“表单提交”用于测试表单面板，“数据表格”用于测试表格面板。浏览器页面重新登录之后，即可看到这两个新增的菜单项：

由于需要用到数据提交，所以在定义表单面板的时候，必须指定数据源以及要提交的数据表，同时还要在面板里加上供用户填写的内容项目。

例如，现在要做一个员工资料的信息收集在线提交页面，就可以在“表单提交”菜单项的内容定义列中点击配置按钮，弹出页面设计窗口；然后在此窗口中点击添加容器：

在上图所列出来的容器类型中，选择“表单面板”，同时设置要操作的数据目标为“员工”数据源中的“员工”表，在输入标题等相关信息后，点击“确定”按钮，将在当前页面添加一个名为“容器1”的表单面板。接着再通过元素操作按钮或鼠标右键在该面板中添加元素，如下图：

在这个面板中，一共添加了6个元素，其中有4个输入字段、2个操作按钮，这些元素都属于“表单类元素组件”。

页面元素添加完成之后，生成代码并点击浏览器页面中的“表单提交”菜单项，即可看到刚才添加的6个元素内容已经在表单面板中显示了。如下图：

由上图可以看出，由于姓名输入框在定义的时候加上了必须输入数据的验证功能，所以直接单击提交数据按钮时会给出警告提示。这说明，即使你没有编写任何的代码，提交数据按钮都已经直接生效了。以下是正常输入数据并提交成功后的效果截图：

如果你在表单面板中同时添加了“重置”按钮，则新增数据提交成功之后会给出是否需要重置表单的提示。点击确定，当前表单面板里的输入框会自动清空，接着可以继续添加新数据；否则，原来输入的表单数据还将正常显示。如此不断重复的提交，即可实现全部员工资料的在线输入。是不是非常简单？

打开后台对应的数据库，你会发现已经在“订单”表里已经顺利添加了一条记录：

由于表单面板是需要使用按钮的，因而，表单面板容器里的按钮设置项就派上用场了。假如，我想将2个操作按钮以按钮组的形式一起放到右上角，可以双击容器列表中的“容器1”节点，调出页面容器设置窗口，并作如下设置：

重新生成代码后刷新页面，该面板将显示成以下效果：