|
HTML中表單是網(wǎng)絡(luò)應(yīng)用里極為常見的東西，B/S應(yīng)用中有關(guān)用戶數(shù)據(jù)輸入都需要通過(guò)表單來(lái)實(shí)現(xiàn)，簡(jiǎn)單的表單或少量表單可通過(guò)Dreamweaver等類似的所見即所得的工具來(lái)進(jìn)行編寫�？蓪�(duì)于表單比較多的應(yīng)用系統(tǒng)就希望有一種機(jī)制來(lái)幫我們快速開發(fā)出表單，新一代B/S開發(fā)語(yǔ)言NoahWeb就提供了這樣的機(jī)制，可用基于XML的結(jié)構(gòu)化方式制作所需表單，在實(shí)際調(diào)用的時(shí)候再根據(jù)指定的模板文件來(lái)生成最終表單，這無(wú)疑可以把很多制作表單麻煩的工作簡(jiǎn)化，學(xué)會(huì)這種的制作方式后開發(fā)B/S應(yīng)用中的表單就很easy了！
好啦！開始了！
要制作表單可以通過(guò)NoahWeb Designer(NoahWeb設(shè)計(jì)器)打開名稱空間下的表單文件（名稱空間下的Forms.xml.config文件）：
然后設(shè)計(jì)器就會(huì)用你預(yù)先設(shè)定好的文本編輯器打開表單文件，我在這設(shè)置的是EDITPLUS，如下：
Forms就是表單資源中的根節(jié)點(diǎn)，所有的表單都必須存在該根節(jié)點(diǎn)下。并且使用Form標(biāo)簽來(lái)進(jìn)行描述。如果有兩個(gè)表單那么簡(jiǎn)單點(diǎn)來(lái)說(shuō)Form的寫法就如下：
OK，講完Form就讓我們來(lái)初步了解一下NoahWeb中的“表單資源”的基本結(jié)構(gòu)和NoahWeb提供的控件。
表單的基本結(jié)構(gòu)
先看一張截圖吧！
上面這個(gè)是一個(gè)很簡(jiǎn)單的表單，下面是關(guān)于這張表單NoahWeb表單結(jié)構(gòu)代碼，綠色字體是當(dāng)前行或者上一行的注釋（后面的內(nèi)容都省略Forms不提了）：
第一步，先看截圖最外層的節(jié)點(diǎn)<Form Id="" Text=""></Form>標(biāo)簽,剛才我們見過(guò)Form的屬性Id和Text，Id可以隨便輸入表示的是此Form的一個(gè)引用名，引用名是為了調(diào)用該表單的時(shí)候用的，Text是這個(gè)表單的顯示名字，用來(lái)作為生成該表單的時(shí)的文本。我們可以根據(jù)自己的需要輸入Id和Text。注意:多個(gè)Form的Id不能重復(fù)。
第二步要建立一個(gè)表單輸入?yún)^(qū)<Line Text=""></Line>,Line標(biāo)簽的作用我們可以先把他簡(jiǎn)單的理解成HTML里的table相似。
第三步要在輸入?yún)^(qū)中建立一個(gè)新的輸入行<InputLine Text="" Desc=""></InputLine>，InputLine標(biāo)簽的作用我們可以先把他簡(jiǎn)單的理解成HTML里的tr相似，一個(gè)輸入?yún)^(qū)里面可以有多個(gè)輸入行。
第四步要要輸入行中建立一個(gè)描述控件的標(biāo)簽<Input Id="" Type=""></Input>, Input標(biāo)簽也可以先簡(jiǎn)單理解成和HTML里的td相似，一個(gè)輸入行中也可以有多個(gè)描述控件的標(biāo)簽，
第五步要在Input標(biāo)簽內(nèi)添入一些所要描述標(biāo)簽的具體參數(shù)，例如：Input顯示名稱的標(biāo)簽<Label></Label>，Input顯示名稱使用樣式的標(biāo)簽<LabelClass></LabelClass>，Input顯示尺寸的標(biāo)簽<size></size>，為了程序能根據(jù)需要你還可以加入校驗(yàn)標(biāo)簽，這樣一個(gè)表單就完成了。
表單可以定義很多常用的控件類型，不同的類型在Input的Type中指定的是不同的，如下面這些圖所示：
除了常見類型外NoahWeb還提供了一些在HTML不存在的輸入類型：如下面：
你可以把各段代碼放到一個(gè)Line標(biāo)簽里看看結(jié)果如何，其它的就不依依列舉了，大家自己試試就知道了。
列舉表單中支持的控件類型，大家可做一下參考： （用*表示的是HTML中沒(méi)有的）
| hidden |
隱藏變量域 |
| text |
單行文本輸入?yún)^(qū) |
| checkbox |
多選框 |
| file |
上傳文件選擇框 |
| image |
圖片按鈕，當(dāng)圖片地址為空時(shí)不會(huì)顯示 |
| password |
密碼輸入?yún)^(qū) |
| radio |
單選框 |
| reset |
重設(shè)按鈕 |
| button |
按鈕 |
| label |
文本或HTML顯示標(biāo)簽* |
| date |
日期選擇輸入?yún)^(qū)* |
| choice |
選擇內(nèi)容輸入?yún)^(qū)* |
| submit |
表單提交按鈕 |
| select |
單選輸入?yún)^(qū) |
| select-multiple |
多選輸入?yún)^(qū) |
| textarea |
多行文本輸入?yún)^(qū) |
TitleLine和位置控制
TitleLine是標(biāo)題行標(biāo)簽，可以顯示一個(gè)表單的標(biāo)題，上面登陸表單是沒(méi)有標(biāo)題的，也就是說(shuō)，里面沒(méi)有TitleLine標(biāo)簽，加入TitleLine后的結(jié)果是這樣的：
上述結(jié)果在代碼中要做的改動(dòng)很小，只要在代碼第四行的前邊加上<TitleLine Text="標(biāo)題" />就可以，標(biāo)題可以有多個(gè)，需要注意的是TitleLine和Line是同級(jí)的，不能相互嵌套。
InputLine和Line都是用來(lái)控制位置的，上面管理員登陸的頁(yè)面中用戶名和密碼是分兩行來(lái)擺放的，如果需要把他們放在一行上，只要把兩個(gè)Input標(biāo)簽放到一個(gè)InputLine標(biāo)簽里就行了：
代碼也做了稍稍的調(diào)整，這里的用戶名和密碼標(biāo)簽用的是label類型控件，代碼：
檢驗(yàn)標(biāo)簽
如果我們希望使用系統(tǒng)的人在填寫制作的表單時(shí)符合我們所希望的輸入內(nèi)容和格式就可以配合使用NoahWeb表單的檢驗(yàn)標(biāo)簽來(lái)做，如果不符合規(guī)則的話會(huì)出現(xiàn)提示，我們可以看看login表單第9和16的兩行代碼：
<NullErrorString>請(qǐng)輸入您的登陸用戶名</NullErrorString>
這里做的是空字符檢驗(yàn)，如果用戶沒(méi)有輸入內(nèi)容就提交的話就會(huì)出現(xiàn)“請(qǐng)輸入您的登陸用戶名”的提示：
檢驗(yàn)標(biāo)簽的類型也有好多種，已經(jīng)包含了各種常用到的檢測(cè)，這里也不依依列舉了，有興趣的話自己研究一下吧，也可以去NoahWeb的官方幫助文檔看看 http://docs.noahweb.net
出處：藍(lán)色理想
責(zé)任編輯：藍(lán)色
上一頁(yè) 下一頁(yè) 第二天
◎進(jìn)入論壇網(wǎng)絡(luò)編程版塊參加討論
|
第 1 頁(yè) 第一天
第 2 頁(yè) 
