網頁表單製作和驗證過程

在Webapp編程中程序員經常要和前臺頁面打交道，CSS，HTML和JS等都是經常需要操作的內容，對於直接用戶來說，這些就是他們印象中的整個程序，如果前臺頁面不美觀或是使用不便將影響用戶對程序的印象，因此程序員應該在前臺上投入一些精力學習是值得的，在Web2.0時代來臨之後更是如此。

　　下面就是一個通用網頁表單的製作和驗證過程

　　表單效果

　　

　　放置表單項的表格

　　將表單項放在表格中是常用的做法，這次也不例外。這裏爲了美觀製作了兩個嵌套表格，外表格兩行一列，分別放置表單說明文字和內表格；內表格放置表單元素等。這裏還讓內表格比外表格略窄，並在外表格中居中，以在左右留出一些空擋。另外對外表格的邊框和顏色進行設置使效果更加美觀。

　　內外表格頁面代碼如下：

　　內外表格頁面代碼

　　＜html:form action="/CreateTopic.do" onsubmit="return check(); "＞

　　＜!-- 外層表格，比內表格寬，以在左右留出一定空當 --＞

　　＜table style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid; boder_top: 0px" bordercolor="#236d78" cellspacing="0" cellpadding="0" width="630" align="center" border="0"＞

　　＜tr bgcolor="#eaecf5" height="25"＞

　　＜td colspan=3＞ ＜font face=webdings color=#ff8c00＞8＜/font＞＜b＞ 創建新主題＜/b＞＜ /td＞

　　＜/tr＞

　　＜tr bgcolor=#236d78 height=1＞＜td＞＜/td＞＜/tr＞

　　＜tr bgcolor=#eaecf5 ＞

　　＜td bgcolor=#ffffff＞

　　＜!-- 內置表格，居中,比外表格窄， --＞

　　＜table width=560 align=center border=0＞

　　＜tbody＞

　　＜tr＞

　　＜td colspan="2"＞＜html:hidden property="pid" value="＜%=pid%＞"/＞＜/td＞

　　＜/tr＞

　　＜tr＞

　　＜td width=70＞主題名:＜/td＞

　　＜td＞＜html:text property="name" size="20" maxlength="20"/＞＜font color=red＞ (必填)＜/font＞＜span id="nameMsg" class="feedbackHide"＞主題必須輸入＜/span＞＜/td＞

　　＜/tr＞

　　＜tr＞

　　＜td width=70＞主題分類:＜/td＞

　　＜td＞＜input type="text" name="topicclass"/＞＜span