設(shè)置表單屬性

1、實驗13 設(shè)置表單屬性實驗要求 通過實驗，掌握表單的屬性設(shè)置，利用E-mail發(fā)送表單及信息，運用Dreamweaver的行為功能檢測表單數(shù)據(jù)的信息。說明 表單在Web網(wǎng)頁中有很重要的作用，很多網(wǎng)頁上的數(shù)據(jù)都是利用表單發(fā)送的。但HTML網(wǎng)頁并不具備處理表單的能力，它需要將表單提交大服務(wù)器上，然后又服務(wù)器上的腳本程序進(jìn)行相應(yīng)的處理。在本實驗中，我們將利用電子郵件的形式提交表單。對應(yīng)知識點：l Form 的表單屬性設(shè)置l 表單檢測的行為l 跳轉(zhuǎn)菜單的設(shè)置對應(yīng)Macromedia Dreamweaver MX2004標(biāo)準(zhǔn)教程第10章的內(nèi)容。實驗課時：2課時實驗素材l 實驗12中制作好的表單頁面（也可

2、使用本書配套光盤exp12-13文件夾內(nèi)的文件。）實驗步驟1. 啟動Dreamweaver MX 2004 程序，選擇菜單“文件”“打開”命令，在“打開”對話框中選擇實驗12中完成的“form.htm”網(wǎng)頁，打開此文件。如圖13-1所示：2. 使用鼠標(biāo)單擊頁面中的紅色虛線，選中時如圖13-2所示。說明 選中表單是為了設(shè)置表單屬性，選中表單還有一種方法，單擊視圖窗口下面狀態(tài)欄上的<form>標(biāo)簽就可以選中整個表單，如圖13-3所示：圖13-1 打開form網(wǎng)頁 圖13-2 選中紅色虛線圖13-3單擊狀態(tài)欄的<form>標(biāo)簽3. 選中Form標(biāo)簽后，打開屬性面板，在“表單名

3、稱”下的文本框中輸入theform,在“動作”文本框中輸入Email地址，如mailto:webmaster,在“方法”下拉列表中選擇POST選項，在“MIME類型”下拉列表中輸入text/plain。屬性設(shè)置如圖13-4所示：圖13-4 表單屬性設(shè)置說明 如果要將表單提交到電子郵箱中，則在動作的電子郵件前必須加mailto:,否則提交無效；在“方法”下拉列表中，POST方式是將表單內(nèi)的數(shù)據(jù)放在HTTP的文件頭信息中傳送，GET方式是將表單內(nèi)的數(shù)據(jù)直接附加在URL地址之后加“？”號傳送，該方式常用于將數(shù)據(jù)傳送到數(shù)據(jù)庫中；MIME類型默認(rèn)一般有兩個選項，它們是針對服務(wù)器行為的本示例中用text/

4、plain，是為了郵件按照表單純文本的形式發(fā)送，這樣可使傳送的內(nèi)容更容易閱讀。4. 完成設(shè)置后保存網(wǎng)頁，按下F12鍵瀏覽網(wǎng)頁測試表單，在表單中輸入內(nèi)容后，單擊“提交”按鈕，表單提示將以電子郵件的方式發(fā)送，如圖13-5所示。單擊“確定”按鈕即可發(fā)送表單到郵件信箱中。5. 回到網(wǎng)頁編輯窗口，選擇菜單“窗口”“行為”命令，打開行為控制面板。說明 上面的表單是在完全輸入后提交的，如果用戶沒有輸入任何信息，單擊“發(fā)送”按鈕，表單也會發(fā)送，所以，為了阻止表單在沒有輸入任何信息的情況下發(fā)送，需要給表單添加檢測功能，以保證表單的有效性。圖13-5 表單以電子郵件的方式發(fā)送6. 將光標(biāo)放置到表單范圍內(nèi)，單擊行為

5、面板上的000加號按鈕，在彈出的菜單中選擇“檢查表單”命令。如圖13-6所示。7. 打開“檢查表單”對話框，在“命名的欄位”文本框中，選中第1行“文本”name在表單theform（R）”，然后勾選“必需的輔選框”，在“可接受”選項中單擊“任何東西”單選按鈕。如圖13-7所示。 圖13-6 行為菜單 圖13-7 檢查表單設(shè)置8. 繼續(xù)選擇“命令的欄位”文本框中的第2行“phone”，選中“必需的”復(fù)選框，下面的“可接受”按鈕選擇“數(shù)字”。選中“命令的欄位”按鈕文本框中“Email”行勾選“必需的”復(fù)選框，然后單擊“可接受”選項中的“電子郵件地址”單選按鈕，其他文本域的設(shè)置和“name”文本域完

6、全相同。設(shè)置完成后單擊“確定”按鈕，在行為面板上出現(xiàn)了onSubmit(提交表單)事件和“檢查表單”動作，如圖13-8所示9. 完成檢測表單設(shè)置后，保存網(wǎng)頁按下F12鍵瀏覽。如果用戶在不填寫表單內(nèi)容時就單擊“發(fā)送”按鈕，則瀏覽器會提示需要輸入的項目，如圖13-9所示。 圖13-8 添加的行為 圖13-9 表單提示10. 單擊插入面板上的“HTML”選項選擇“水平線”按鈕，在表單下面插入分隔線。11. 選中水平線，打開屬性面板，在“水平線”下的文本框中輸入名稱line，“寬”文本框中輸入600，“高”文本框中輸入1，在“陰影”前的復(fù)選框中去掉“”，參數(shù)設(shè)置如圖13-10所示。圖13-10 水平線

7、屬性設(shè)置12. 在水平線下面輸入文字“友情連接”，設(shè)置文字居中對齊。13. 單擊表單面板的“表單”按鈕，在水平線下面插入表單域。14. 將光標(biāo)放到表單范圍內(nèi)，單擊表單面板的“跳轉(zhuǎn)菜單”按鈕，在表單域中插入跳轉(zhuǎn)菜單。15. 彈出“插入跳轉(zhuǎn)菜單”對話框，在“文本”的文本框中輸入“新浪網(wǎng)”，在“選擇時，轉(zhuǎn)到URL”文本框中輸入網(wǎng)址；接著單擊按鈕，在新浪網(wǎng)下面嗇新項目，在“文本”文本框中輸入“企業(yè)自助網(wǎng)”，在“選擇時，轉(zhuǎn)到URL”文本框中輸入網(wǎng)址;接著以同樣的方法嗇其他友情網(wǎng)站設(shè)置。最后，在“菜單名稱”中輸入跳轉(zhuǎn)達(dá)菜單的名稱“友情連接”。完成連接設(shè)置后，單擊“確定”按鈕，參數(shù)設(shè)置如圖13-11所示。

8、說明 跳轉(zhuǎn)菜單是在菜單中選擇一個項目后，打開該項目的網(wǎng)頁，它的好處是在菜單很多的情況下節(jié)省網(wǎng)頁空間，提高瀏覽效率。在“插入跳轉(zhuǎn)菜單”對話框中，按鈕是刪除菜單項中的項目，上下箭頭是調(diào)整菜單項目的上下順序。在對話框下面的“選項”中，如果選擇了“菜單之后插入前往按鈕”選項，則在頁面的跳轉(zhuǎn)菜單右側(cè)會加入一個000按鈕，瀏覽選擇菜單后，只有單 前往按鈕，才會打開新的頁面；如果選擇“更改URL后選擇第一個項目”，則在選擇菜單后，跳轉(zhuǎn)菜單會自動回到跳轉(zhuǎn)菜單的第一個項目。 16. 設(shè)置完成跳轉(zhuǎn)菜單之后，按Ctrl+S保存網(wǎng)頁。按F12鍵瀏覽網(wǎng)頁，效果如圖13-12所示。 圖13-11 跳轉(zhuǎn)菜單設(shè)置 圖13-12 跳轉(zhuǎn)菜單實驗作業(yè)模仿1. 打開實驗13中制作完成的網(wǎng)頁form.htm，另存為formnew.htm網(wǎng)頁。2. 在頁面中設(shè)置表單的屬性，將提交表單的郵箱設(shè)置為自己的郵箱。3. 添加檢測表單的行為。4. 在表單下面插入一個跳轉(zhuǎn)菜單，項目為“”.“”等。創(chuàng)作1. 創(chuàng)建一個新網(wǎng)頁，建立表單，插入表單元素。2. 設(shè)置表單屬性和檢查表單的動作行為。3. 設(shè)置表單提交按鈕，以郵件形式發(fā)