Dreamweaver網(wǎng)頁制作基礎(chǔ)教程項(xiàng)目七制作用戶注冊

核心技術(shù)表單的屬性及設(shè)置方法常用表單元素的設(shè)置及使用方法表單的驗(yàn)證方法任務(wù)目標(biāo)任務(wù)一：簡單表格布局基本頁面任務(wù)二：使用Spry驗(yàn)證注冊表單能力目標(biāo)

表單的屬性表單中不同元素的特性表單內(nèi)容的驗(yàn)證項(xiàng)目背景由于學(xué)校網(wǎng)站規(guī)模的擴(kuò)大，網(wǎng)站需要根據(jù)不同的用戶身份而展示不同的內(nèi)容。對于校內(nèi)人員來說，需要區(qū)分學(xué)生、教師及管理員身份的內(nèi)容。對于校外人員來說，需要區(qū)分家長及未知客戶。因此需要一個注冊頁面，用于收集用戶的身份，保證非網(wǎng)站指定用戶無法看到網(wǎng)站中的敏感信息。項(xiàng)目分析在網(wǎng)頁設(shè)計(jì)中，如果要在網(wǎng)頁間進(jìn)行數(shù)據(jù)的傳遞和交換，一般需要使用Form表單技術(shù)來實(shí)現(xiàn)。由于數(shù)據(jù)有多種類型，因而在Form中也對應(yīng)有不同的表單域，稱為表單元素。為保證數(shù)據(jù)的有效性，需要采用一定的方法對數(shù)據(jù)進(jìn)行驗(yàn)證。任務(wù)一網(wǎng)頁中的文本任務(wù)描述利用表格或Div對網(wǎng)頁布局，為校園網(wǎng)制作用戶注冊頁面。要求美觀，并在布局的合適位置填入恰當(dāng)?shù)奈淖趾蛨D片。制作后的效果如圖7.1.1所示。圖7.1.1制作完成后的頁面效果知識準(zhǔn)備表單在網(wǎng)頁中主要負(fù)責(zé)數(shù)據(jù)采集功能。一個表單有以下三個基本組成部分。表單標(biāo)簽：這里面包含了處理表單數(shù)據(jù)所用后臺程序的URL及數(shù)據(jù)提交到服務(wù)器的方法。表單域：包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選按鈕、下拉選擇框和文件上傳框等。表單按鈕：包括提交按鈕、復(fù)位按鈕和一般按鈕；用于將數(shù)據(jù)傳送到服務(wù)器上的CGI腳本或取消輸入，還可以用表單按鈕來控制其他定義了腳本的處理工作。任務(wù)實(shí)施 圖7.1.2網(wǎng)頁效果步驟1：新建一個HTML網(wǎng)頁文件，保存為“zhuce.html”，或者打開素材庫中的“zhuce.html”。文件位置是“項(xiàng)目7/zhuce.html”。網(wǎng)頁效果如圖7.1.2所示。如果Dreamweaver中沒有站點(diǎn)，則利用Dreamweaver創(chuàng)建一個站點(diǎn)。需要的素材“項(xiàng)目7”放入站點(diǎn)中。需要用到的圖片在“項(xiàng)目7\images”文件夾下。保存的文件名為“zhuce.html”。文件格式要求是HTML靜態(tài)頁面。步驟2：將光標(biāo)定位在“本站首頁→在線注冊”下面的一個單元格，選擇表單工具欄上的“插入表單”按鈕，如圖7.1.3和圖7.1.4所示。圖7.1.3“插入表單”按鈕圖7.1.4設(shè)計(jì)視圖步驟3：在表單內(nèi)插入一個表格。參數(shù)要求如圖7.1.6所示。表格的ID設(shè)置為“tabMain”。步驟4：在表格“tabMain”的左側(cè)分別輸入提示性的文字，如姓名、年齡、性別、愛好、身份、地址、手機(jī)、郵箱、個人簡介等，如圖7.1.7所示。設(shè)置表單的屬性，動作為“zhuce_ht.html”，目標(biāo)為“_self”，提交方法為“POST”，如圖7.1.5所示。圖7.1.5表單屬性圖7.1.6表格參數(shù)步驟5：選中姓名右側(cè)的單元格，選擇表單工具欄上的“插入文本框”按鈕，如圖7.1.8所示。圖7.1.8表單工具欄

設(shè)置文本框的屬性，然后單擊“確定”按鈕，如圖7.1.9所示。

圖7.1.9設(shè)置文本框在設(shè)計(jì)視圖選擇插入的文本框，在“屬性”面板設(shè)置文本框的屬性，如圖7.1.10所示。圖7.1.10文本框?qū)傩?/p>

代碼如圖7.1.11所示。圖7.1.11文本框代碼

步驟6：同樣，依次插入“年齡”、“地址”、“手機(jī)”、“郵箱”右側(cè)的文本框，分別命名為txtAge、txtAddress、txtPhone、txtEmail，參數(shù)可以根據(jù)實(shí)際需要來設(shè)置。步驟7：將光標(biāo)定位在“性別”右側(cè)的單元格，選擇表單工具欄上的單選按鈕，如圖7.1.12所示。單選按鈕設(shè)置單選按鈕的屬性，如圖7.1.13所示。

圖7.1.13設(shè)置單選按鈕的屬性再次插入一個單選按鈕標(biāo)簽，標(biāo)簽文字設(shè)置為女，效果如圖7.1.14所示。

圖7.1.14單選按鈕標(biāo)簽在設(shè)計(jì)視圖選擇第一個單選按鈕，設(shè)置其屬性，名稱為“txtSex”，選定值為“男”，初始狀態(tài)為“已勾選”，如圖7.1.15所示。圖7.1.15單選按鈕屬性1

用同樣的方法設(shè)置第二個單選按鈕的屬性，名稱為“txtSex”，選定值為“女”，初始狀態(tài)為“未選中”，如圖7.1.16所示。圖7.1.16單選按鈕屬性2

也可以通過添加單選按鈕組的方式來添加單選按鈕，添加的方法相對簡單一些，如圖7.1.17所示。圖7.1.17添加單選按鈕組的方式

添加單選按鈕組的時(shí)候一般會生成多余的代碼，如<br>標(biāo)簽，生成的按鈕組默念狀態(tài)為每行一個單選按鈕，如果頁面排版需要水平的按鈕組，則要轉(zhuǎn)到代碼窗口，刪除多余的標(biāo)簽。步驟8：將光標(biāo)定位在“愛好”右側(cè)的單元格，選擇表單工具欄上的復(fù)選框，設(shè)置復(fù)選框的參數(shù)，如圖7.1.18和圖7.1.19所示。圖7.1.18復(fù)選框

復(fù)選框圖7.1.19復(fù)選框標(biāo)簽屬性

圖7.1.18復(fù)選框

圖7.1.19復(fù)選框標(biāo)簽屬性

效果如圖7.1.20所示。

圖7.1.20復(fù)選框

在設(shè)計(jì)視圖選擇“體育”前面的復(fù)選框，在“屬性”面板設(shè)置“體育”復(fù)選框的值為“體育”。

其代碼如下所示。

<inputname="txtAiHaoTY"type="checkbox"id="txtAiHaoTY"value="體育"/>步驟9：同樣操作，插入另外兩個復(fù)選框，分別為音樂和美術(shù)。設(shè)計(jì)視圖如圖7.1.21所示。

圖7.1.21插入別外兩個復(fù)選框

代碼如圖7.1.22所示。

圖7.1.22復(fù)選框代碼步驟10：將光標(biāo)定位在“身份”右側(cè)的單元格，在表單工具欄上選擇“列表”按鈕。設(shè)置列表的屬性，如圖7.1.23所示。圖7.1.23列表標(biāo)簽屬性

設(shè)計(jì)視圖如圖7.1.24所示。

圖7.1.24設(shè)計(jì)視圖

選擇“身份”右側(cè)的列表框，在“屬性”面板上選擇“列表值”按鈕，設(shè)置列表值，如圖7.1.25和圖7.1.26所示。圖7.1.25列表的“屬性”面板

圖7.1.26列表值

其代碼如圖7.1.27所示。

圖7.1.27列表代碼

步驟11：將光標(biāo)定位在“個人簡介”右側(cè)的單元格，選擇表單工具欄中的“文本區(qū)域”按鈕，如圖7.1.28所示。設(shè)置其標(biāo)簽屬性，如圖7.1.29所示。文本區(qū)域圖7.1.28“文本區(qū)域”按鈕

圖7.1.29文本區(qū)域標(biāo)簽屬性

其代碼如圖7.1.30所示。圖7.1.30文本區(qū)域代碼步驟12：將光標(biāo)定位在“個人簡介”右下方的單元格，選擇表單工具欄中的按鈕工具，如圖7.1.31所示。按鈕工具設(shè)置其標(biāo)簽屬性，如圖7.1.32所示。

圖7.1.31按鈕工具

圖7.1.32按鈕工具標(biāo)簽屬性

步驟13：將光標(biāo)定位在“提交”按鈕右側(cè)，插入兩個不換行空格“ctrl”+“shift”+“space”，再插入一個“重設(shè)”按鈕，ID為“btnChongShe”。在設(shè)計(jì)視圖選擇“重設(shè)”按鈕，在“屬性”面板設(shè)置第二個按鈕的屬性。動作設(shè)為“重設(shè)表單”，如圖7.1.33所示。圖7.1.33按鈕屬性步驟14：按“F12”鍵在瀏覽器內(nèi)查看表單最后的設(shè)計(jì)按鈕。填寫數(shù)據(jù)，分別測試“重置”按鈕與“提交”按鈕的作用。最終瀏覽效果如圖7.1.1所示。知識拓展表單的組成

1．表單標(biāo)簽<form></form>功能：用于聲明表單，定義采集數(shù)據(jù)的范圍，即<form>和</form>里面包含的數(shù)據(jù)將被提交到服務(wù)器或電子郵件里。語法格式：

<formACTION="URL"METHOD="GET|POST"TARGET="...">...</form>屬性解釋如下所示。

屬

性解

釋ACTION=URL指定處理提交表單的格式。它可以是一個URL地址，也可以是一個電子郵件地址method=””指明提交表單的HTTP方法?？赡艿闹等缦?。POST：在表單元素中包含名稱/值對，不需要包含在“動作”[ACTION]所指定的URL中。GET：把名稱/值對加在“動作”[ACTION]的URL后面，并且把新的URL送至服務(wù)器。這是往前兼容的默認(rèn)值，這個值由于安全的原因不贊成使用

TARGET="..."指定提交的結(jié)果文件顯示的位置。_blank：在一個新的、無名瀏覽器窗口調(diào)入指定的文件。_self：在指向這個目標(biāo)的元素的相同框架中調(diào)入文件。_parent：把文件調(diào)入當(dāng)前框架的直接父FRAMESET框架中，這個值在當(dāng)前框架沒有父框架時(shí)等價(jià)于_self。_top：把文件調(diào)入原來頂部的瀏覽器窗口中（因此取消所有其他框架）。這個值等價(jià)于當(dāng)前框架沒有父框時(shí)的_self

例如：<formaction=""method="post">…</form>

表單將以POST的方式提交。2．表單域

表單域包含了文本框、多行文本框、密碼框、隱藏域、復(fù)選框、單選按鈕和下拉選擇框等，用于采集用戶輸入或選擇的數(shù)據(jù)，下面分別講述這些表單域的代碼格式。1）文本框文本框是一種讓訪問者自己輸入內(nèi)容的表單對象，通常被用來填寫單個字或簡短的回答，如姓名、地址等。語法格式：

<inputtype="text"name="..."size="..."maxlength="..."value="...">屬性解釋如下所示：

屬

性解

釋type="text"定義單行文本框name定義文本框的名稱，要保證數(shù)據(jù)的準(zhǔn)確采集，必須定義一個獨(dú)一無二的名稱size定義文本框的寬度，單位是單個字符寬度maxlength定義最多輸入的字符數(shù)value定義文本框的初始值樣例代碼：

<inputtype="text"name="example1"size="20"maxlength="15"/>2）多行文本框也是一種讓訪問者自己輸入內(nèi)容的表單對象，只不過能讓訪問者填寫較長的內(nèi)容。語法格式：

<TEXTAREAname="..."cols="..."rows="..."wrap="VIRTUAL"></TEXTAREA>屬性解釋如下所示：

屬性解

釋name定義多行文本框的名稱，要保證數(shù)據(jù)的準(zhǔn)確采集，必須定義一個獨(dú)一無二的名稱cols定義多行文本框的寬度，單位是單個字符寬度rows定義多行文本框的高度，單位是單個字符寬度wrap默認(rèn)值是文本自動換行。當(dāng)輸入內(nèi)容超過文本域的右邊界時(shí)會自動轉(zhuǎn)到下一行，而數(shù)據(jù)在被提交處理時(shí)自動換行的地方不會有換行符出現(xiàn)。Off，用來避免文本換行。當(dāng)輸入的內(nèi)容超過文本域右邊界時(shí)，文本將向左滾動，必須用回車才能將插入點(diǎn)移到下一行。Virtual，允許文本自動換行。當(dāng)輸入內(nèi)容超過文本域的右邊界時(shí)會自動轉(zhuǎn)到下一行，而數(shù)據(jù)在被提交處理時(shí)自動換行的地方不會有換行符出現(xiàn)。Physical，讓文本換行，當(dāng)數(shù)據(jù)被提交處理時(shí)換行符也將被一起提交處理。

樣例代碼：

<TEXTAREAname="example2"cols="20"rows="2"wrap="PHYSICAL"></TEXTAREA>3）密碼框是一種特殊的文本域，用于輸入密碼。當(dāng)訪問者輸入文字時(shí)，文字會被星號或其他符號代替，而輸入的文字將被隱藏。語法格式：

<inputtype="password"name="..."size="..."maxlength="...">屬性解釋如下所示:

屬

性解

釋type="password"定義密碼框name定義密碼框的名稱，要保證數(shù)據(jù)的準(zhǔn)確采集，必須定義一個獨(dú)一無二的名稱size定義密碼框的寬度，單位是單個字符寬度maxlength定義最多輸入的字符數(shù)樣例代碼：

<inputtype="password"name="example3"size="20"maxlength="15">4）隱藏域

隱藏域是用來收集或發(fā)送信息的不可見元素。對于網(wǎng)頁的訪問者來說，隱藏域是看不見的。當(dāng)表單被提交時(shí)，隱藏域會將信息用你設(shè)置時(shí)定義的名稱和值發(fā)送到服務(wù)器上。語法格式：

<inputtype="hidden"name="..."value="...">屬性解釋如下所示。

屬

性解

釋type="hidden"定義隱藏域name屬性定義隱藏域的名稱，要保證數(shù)據(jù)的準(zhǔn)確采集，必須定義一個獨(dú)一無二的名稱value屬性定義隱藏域的值例如：

<inputtype="hidden"name="ExPws"value="dd">5）復(fù)選框

復(fù)選框允許在待選項(xiàng)中選中一項(xiàng)以上的選項(xiàng)。每個復(fù)選框都是一個獨(dú)立的元素，必須有一個唯一的名稱。語法格式：

<INPUTtype="checkbox"name="..."value="...">屬性解釋如下

:屬

性解

釋type="checkbox"定義復(fù)選框name定義復(fù)選框的名稱，要保證數(shù)據(jù)的準(zhǔn)確采集，必須定義一個獨(dú)一無二的名稱value定義復(fù)選框的值樣例代碼：

<inputtype="checkbox"name="yesky"value="09">xxxcom<inputtype="checkbox"name="Chinabyte"value="08">6）單選按鈕

當(dāng)需要訪問者在待選項(xiàng)中選擇唯一的答案時(shí)，需要使用單選按鈕。

語法格式：

<inputtype="radio"name="..."value="...">屬性解釋如下

屬

性解

釋type="radio"定義單選name定義單選的名稱，要保證數(shù)據(jù)的準(zhǔn)確采集。單選按鈕都是以組為單位使用的，在同一組中的單選項(xiàng)都必須用同一個名稱value定義單選框的值，在同一組中，它們的域值必須是不同的樣例代碼：

<inputtype="radio"name="myFavor"value="1"><inputtype="radio"name="myFavor"value="2">7）文件上傳框有時(shí)需要用戶上傳自己的文件，文件上傳框看上去和其他文本域差不多，但是它包含了一個“瀏覽”按鈕。訪問者可以輸入需要上傳文件的路徑或者單擊“瀏覽”按鈕選擇需要上傳的文件。語法格式：

<inputtype="file"name="..."size="15"maxlength="100">屬性解釋如下：

屬

性解

釋type="file"定義文件上傳框name定義文件上傳框的名稱，要保證數(shù)據(jù)的準(zhǔn)確采集，必須定義一個獨(dú)一無二的名稱size定義文件上傳框的寬度，單位是單個字符寬度maxlength定義最多輸入的字符數(shù)樣例代碼：

<inputtype="file"name="myfile"size="15"maxlength="100">7）下拉選擇框

下拉選擇框允許用戶在一個有限的空間設(shè)置多種選項(xiàng)。

語法格式：

<optionvalue="..."selected>...</option>...</select>屬性解釋如下：

屬

性解

釋size定義下拉選擇框的行數(shù)name定義下拉選擇框的名稱multiple表示可以多選。如果不設(shè)置該屬性，則只能單選value定義選擇項(xiàng)的值selected表示默認(rèn)已經(jīng)選擇該選項(xiàng)樣例代碼：

<selectname="mySel"size="1"><optionvalue="1"selected></option><optionvalue="d2"></option></select>按“Ctrl”鍵可以多選，樣例代碼：

<selectname="mySelt"size="3"multiple><optionvalue="1"selected></option><optionvalue="d2"></option><optionvalue="3"></option></select>3．表單按鈕

表單按鈕控制表單的運(yùn)作。

1）提交按鈕提交按鈕用于將輸入的信息提交到服務(wù)器。語法格式：

<inputtype="submit"name="..."value="...">屬性解釋如下

屬

性解