實例:如何制作一個在線報名表單?

PageAdmin網站管理系統可以很靈活的實現各種表單,下面以學校最為常用的在線報名表為例進行講解表單的制作和使用。

1. 登錄后臺地址,進入后臺,

圖片.png

2.在頂部導航中找到系統,并點擊,然后在左側導航中,找到信息表,并點擊;

圖片.png

我們會看到一些信息表

圖片.png

3.因為報名表與顯示的數據表沒有關系,那就新建一個數據表,點擊菜單,再點擊添加,進入到添加頁面;

圖片.png

圖片.png

4.開始新建數據表;

圖片.png

填寫好之后,點擊提交,報名表就建好了;

5.我們在來看看字段,點擊報名表中字段列的管理按鈕,進入到字段管理頁面;

圖片.png

圖片.png

6.可以看出我們還需要增加其他的一些字段,我們點擊頂部菜單,再點擊添加,進入到字段添加頁面;

圖片.png

圖片.png

7.1.添加字段,出生年月,性別,民族,聯系電話,地址等等(可根據自己的需求去添加字段);

圖片.png

圖片.png

圖片.png

圖片.png

7.2 在表單類型中,我們選擇單行文本輸入框,在數據類型中,我們選擇日期,文本輸入框長度我們設置為10,然后在基礎屬性中選擇,該字段是否為必填項,如是則勾選,如否則不操作,點擊提交,字段就創建好了;

7.3 在創建字段的時候,我們需要注意該字段表單類型的選擇,有些字段的表單類型或者數據類型并不是一樣的,如性別,我們可以選擇單選框,數據類型則選擇文本類型,如民族、電話、地址我們在數據類型選擇的時候就可以選擇文本類型;

8.字段添加完了,我們這個是報名表,便于查看,可以將標題改為姓名,內容改為自我評價,縮略圖改為照片;在標題行中找到管理列,找到修改并點擊,進入修改頁;

圖片.png

圖片.png

在備注中,將標題改為姓名,其他的操作方法一樣;

圖片.png

9.1 數據表建好了,下一步制作模板,在頂部導航中找到網站,點擊模板管理,

圖片.png

9.2 點擊views,進入模板管理頁面

圖片.png

圖片.png

9.3 在頂部找到菜單并點擊,再點擊新建目錄,開始新建目錄,

圖片.png

圖片.png

9.4 填寫好之后提交,再點擊新建的目錄,

圖片.png

9.5 進入欄目后,找到菜單并點擊,再點擊新建文件,

圖片.png

圖片.png

注意:文件的后綴名為cshtml

填寫好之后,點擊提交。

9.6 下一步在文件中添加代碼,點擊頂部導航中的系統,在點擊左側導航中的信息表;

圖片.png

9.7 在信息表中找到新建的信息表,點擊表單Html,進入到表單頁面,

圖片.png

圖片.png

9.8 使用快捷鍵ctrl+A(全選),快捷鍵ctrl+C(復制),點擊頂部導航網站,再點擊左側導航模板管理,

圖片.png

9.9點擊views,再點擊報名專欄,找到之前新建的文件,點擊編輯

圖片.png

圖片.png

圖片.png

進入到編輯頁面后,使用快捷鍵ctrl+D(粘貼),將復制好的表單HTML代碼粘貼在文本框中

圖片.png

粘貼好之后,點擊提交。

10.1 模板完成了,之后是調用,在頂部導航中找到網站并點擊,再左側導航中找到欄目管理,并點擊,進入到欄目管理頁面;

圖片.png

圖片.png

10.2 我們需要新建一個報名表的欄目,在頂部找到菜單并點擊,再點擊添加,進入到欄目添加頁面(也可以在已有的欄目中添加新欄目),開始添加欄目;

圖片.png

圖片.png

10.3 在添加欄目的時候,因為是單純的表單添加頁面,欄目類型選擇單頁面,欄目模板選擇新建的模型表單,


圖片.png

10.4 欄目建好之后,點擊提交,回到前臺頁面,點擊報名專欄;

圖片.png

可以看到報名表,但有些顯示不完全,這就需要改div和css了

圖片.png

10.5 回到報名模型頁面,在后臺點擊頂部導航的網站,再點擊左側導航的模板管理,再點擊views,找到報名專欄,點擊新建的模型頁中的編輯,進入到HTML編輯頁面,


圖片.png

圖片.png

圖片.png

圖片.png

圖片.png

10.6 因為在前臺頁面顯示的是全頁面的表單,為了和其他頁面寬度保持一致,我們需要給表單模型增加一個外層,在代碼的最頂部加上<div>,代碼的最底部加上</div>,然后給div添加class,或者在div中直接寫css都可以,方法有很多,然后提交,回到前臺頁面查看,可以看到報名表頁面和其他頁面保持寬度一致了。

圖片.png

圖片.png

圖片.png

我們在試試,可以提交

圖片.png

在后臺點擊頂部導航中的網站,再點擊左側導航中的報名

圖片.png

圖片.png

可以看到信息,這樣報名表就完成了。


猛禽小队完整版-猛禽小队免费-猛禽小队在线观看