HTML中表单是网络应用里极为常见的东西,B/S应用中有关用户数据输入都需要通过表单来实现,简单的表单或少量表单可通过Dreamweaver等类似的所见即所得的工具来进行编写。可对于表单比较多的应用系统就希望有一种机制来帮我们快速开发出表单,新一代B/S开发语言NoahWeb就提供了这样的机制,可用基于XML的结构化方式制作所需表单,在实际调用的时候再根据指定的模板文件来生成最终表单,这无疑可以把很多制作表单麻烦的工作简化,学会这种的制作方式后开发B/S应用中的表单就很easy了!
好啦!开始了!
要制作表单可以通过NoahWeb Designer(NoahWeb设计器)打开名称空间下的表单文件(名称空间下的Forms.xml.config文件):
然后设计器就会用你预先设定好的文本编辑器打开表单文件,我在这设置的是EDITPLUS,如下:
Forms就是表单资源中的根节点,所有的表单都必须存在该根节点下。并且使用Form标签来进行描述。如果有两个表单那么简单点来说Form的写法就如下:
OK,讲完Form就让我们来初步了解一下NoahWeb中的“表单资源”的基本结构和NoahWeb提供的控件。
表单的基本结构
先看一张截图吧!
上面这个是一个很简单的表单,下面是关于这张表单NoahWeb表单结构代码,绿色字体是当前行或者上一行的注释(后面的内容都省略Forms不提了):
第一步,先看截图最外层的节点<Form Id="" Text=""></Form>标签,刚才我们见过Form的属性Id和Text,Id可以随便输入表示的是此Form的一个引用名,引用名是为了调用该表单的时候用的,Text是这个表单的显示名字,用来作为生成该表单的时的文本。我们可以根据自己的需要输入Id和Text。注意:多个Form的Id不能重复。
第二步要建立一个表单输入区<Line Text=""></Line>,Line标签的作用我们可以先把他简单的理解成HTML里的table相似。
第三步要在输入区中建立一个新的输入行<InputLine Text="" Desc=""></InputLine>,InputLine标签的作用我们可以先把他简单的理解成HTML里的tr相似,一个输入区里面可以有多个输入行。
第四步要要输入行中建立一个描述控件的标签<Input Id="" Type=""></Input>, Input标签也可以先简单理解成和HTML里的td相似,一个输入行中也可以有多个描述控件的标签,
第五步要在Input标签内添入一些所要描述标签的具体参数,例如:Input显示名称的标签<Label></Label>,Input显示名称使用样式的标签<LabelClass></LabelClass>,Input显示尺寸的标签<size></size>,为了程序能根据需要你还可以加入校验标签,这样一个表单就完成了。
表单可以定义很多常用的控件类型,不同的类型在Input的Type中指定的是不同的,如下面这些图所示:
除了常见类型外NoahWeb还提供了一些在HTML不存在的输入类型:如下面:
你可以把各段代码放到一个Line标签里看看结果如何,其它的就不依依列举了,大家自己试试就知道了。
列举表单中支持的控件类型,大家可做一下参考: (用*表示的是HTML中没有的)
hidden
隐藏变量域
text
单行文本输入区
checkbox
多选框
file
上传文件选择框
image
图片按钮,当图片地址为空时不会显示
password
密码输入区
radio
单选框
reset
重设按钮
button
按钮
label
文本或HTML显示标签*
date
日期选择输入区*
choice
选择内容输入区*
submit
表单提交按钮
select
单选输入区
select-multiple
多选输入区
textarea
多行文本输入区
TitleLine和位置控制
TitleLine是标题行标签,可以显示一个表单的标题,上面登陆表单是没有标题的,也就是说,里面没有TitleLine标签,加入TitleLine后的结果是这样的:
上述结果在代码中要做的改动很小,只要在代码第四行的前边加上<TitleLine Text="标题" />就可以,标题可以有多个,需要注意的是TitleLine和Line是同级的,不能相互嵌套。
InputLine和Line都是用来控制位置的,上面管理员登陆的页面中用户名和密码是分两行来摆放的,如果需要把他们放在一行上,只要把两个Input标签放到一个InputLine标签里就行了:
代码也做了稍稍的调整,这里的用户名和密码标签用的是label类型控件,代码:
检验标签
如果我们希望使用系统的人在填写制作的表单时符合我们所希望的输入内容和格式就可以配合使用NoahWeb表单的检验标签来做,如果不符合规则的话会出现提示,我们可以看看login表单第9和16的两行代码:
<NullErrorString>请输入您的登陆用户名</NullErrorString>
这里做的是空字符检验,如果用户没有输入内容就提交的话就会出现“请输入您的登陆用户名”的提示:
检验标签的类型也有好多种,已经包含了各种常用到的检测,这里也不依依列举了,有兴趣的话自己研究一下吧,也可以去NoahWeb的官方帮助文档看看 http://docs.noahweb.net