（中職）網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目八 應(yīng)用網(wǎng)頁(yè)表單 任務(wù)三 案例

1、（中職）網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目八 應(yīng)用網(wǎng)頁(yè)表單 任務(wù)三 案例（中職）網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目八 應(yīng)用網(wǎng)頁(yè)表單 任務(wù)三 案例（中職）網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目八 應(yīng)用網(wǎng)頁(yè)表單 任務(wù)三 案例項(xiàng)目八 應(yīng)用網(wǎng)頁(yè)表單任務(wù)三 學(xué)會(huì)查驗(yàn)表單數(shù)據(jù)現(xiàn)在很多網(wǎng)站提供了注冊(cè)和登錄功能，在登陸頁(yè)面，需要輸入電子郵件作為登陸賬號(hào)。而當(dāng)訪問(wèn)者輸入的登陸賬號(hào)不是電子郵件格式的時(shí)候，網(wǎng)頁(yè)會(huì)直接進(jìn)行提示，告訴訪問(wèn)者輸入格式錯(cuò)誤，如圖8-42所示。在Dreamweaver中，我們可以通過(guò)Spry表單構(gòu)件制作具有驗(yàn)證功能的登陸頁(yè)面。圖8-42 具有驗(yàn)證功能的登錄頁(yè)面其具體操作步驟如下：第一步. 打開Dreamweaver，選擇新建html網(wǎng)頁(yè)。第二

2、步. 在合適的位置，選擇“插入”“表單”，網(wǎng)頁(yè)出現(xiàn)紅色虛線框，表示已插入表單。第三步. 在插入工具欄表單欄目下，找到“Spry驗(yàn)證文本域”，在彈出的窗口中，輸入標(biāo)簽為“電子郵件：”，點(diǎn)擊確認(rèn)后在相應(yīng)位置插入Spry驗(yàn)證文本域，如圖8-43所示。圖8-43 插入Spry驗(yàn)證文本域 第四步. 單擊灰色文本框區(qū)域，下方出現(xiàn)文本域?qū)傩悦姘?，輸入“字符寬度”?0，如圖8-44所示。圖8-44 設(shè)置文本字段 第五步. 點(diǎn)擊文本框上方“Spry文本區(qū)域：sprytextarea1”文字，在下方屬性面板中設(shè)置“類型”為“電子郵件地址”，“預(yù)覽狀態(tài)”為“無(wú)效格式”，“驗(yàn)證于”勾選“onBlur”，如圖8-45

3、所示。圖8-45 設(shè)置Spry驗(yàn)證文本域 第六步. 將光標(biāo)定位到Spry驗(yàn)證文本域后面，按Enter換行，單擊“Spry驗(yàn)證文本域”，在彈出的窗口中輸入“標(biāo)簽”為“登錄密碼：”，如圖8-46所示。圖8-46 添加標(biāo)簽 第七步. 單擊文本字段區(qū)域，在屬性面板設(shè)置“字符寬度”為20，“類型”為“密碼”，如圖8-47所示。圖8-47 本文域的設(shè)置第八步. 點(diǎn)擊文本框上方“Spry文本區(qū)域：sprytextarea1”文字，在下方屬性面板中設(shè)置“最小字符數(shù)”為5，“最大字符數(shù)”為15，驗(yàn)證于勾選“onChange”和“必須的”，預(yù)覽狀態(tài)選擇“已超過(guò)最大字符數(shù)”，如圖8-48所示。圖8-48 設(shè)置Spry驗(yàn)證文本域第九步. 將光標(biāo)定位到Spry驗(yàn)證文本域后面，按Enter換行。依次點(diǎn)擊“按鈕”插入兩個(gè)按鈕，第二個(gè)按鈕在屬性面板設(shè)置“動(dòng)作”為重設(shè)表單。登錄頁(yè)面制作完成之后，電子郵件欄目必須填寫符合電子郵件格式的字符，若不符合，則提示“格式無(wú)效”；登錄密碼的字符數(shù)必須介于515之間，若不符合，則提示“不符合最小字符數(shù)要求”或“已超過(guò)最大字符數(shù)