1、第8章 表單Form,萬維網(wǎng)向瀏覽者傳遞信息，使瀏覽者非常方便地從互聯(lián)網(wǎng)取得需要的信息。在交互式的網(wǎng)絡(luò)中，表單是一個不可缺少的元素，它是交互的一個入口。只要有交互出現(xiàn)的地方，就會有表單。本章將介紹表單的用法。 一個完整的交互表單由兩部分組成：一是客戶端包含的表單頁面，用于填寫瀏覽者進行交互的信息；另一個是服務(wù)端的應(yīng)用程序，用于處理瀏覽者提交的信息。,8.1 插入表單,表單是交互過程不可缺少的工具，那么如何在網(wǎng)頁中添加表單，具體步驟如下：,8.1 插入表單,單擊【表單】按鈕，完成插入表單，效果如圖左所示。按F12鍵進行預(yù)覽，如圖右所示。,插入表單效果 預(yù)覽效果,8.2 文字對象,在網(wǎng)頁的交互過程

2、中，文字是一個重要內(nèi)容。如何把文字內(nèi)容從客戶端傳送到服務(wù)端，表單的文字對象就是傳送文字的入口。文本對象有單行文本域、多行文本域和密碼文本域。單行文本域適用于輸入少量文字內(nèi)容；多行文本域適用于輸入大量文字內(nèi)容；密碼文本域用于頁面密碼驗證。,8.2.1 使用單行文本域,單行文本域適用于輸入少量文字，例如頁面驗證的用戶名及文章標(biāo)題等。如何在網(wǎng)頁中加入單行文本域？具體步驟如下：,【輸入標(biāo)簽輔助功能屬性】對話框 單行文本域效果圖,8.2.1 使用單行文本域,按Ctrl+F3組合鍵，打開【屬性】面板，如圖上所示。在【初始值】文本框中輸入“文本內(nèi)容”，視圖如圖下所示。,【屬性】面板,輸入文本內(nèi)容效果,8.2

3、.2 使用多行文本域,前面介紹了單行文本域，了解了如何把客戶端的內(nèi)容通過單行文本域提交到服務(wù)端。但是單行文本域提交的內(nèi)容畢竟是有限的。如果需要提交更多的內(nèi)容，則要用到多行文本域。使用多行文本域的具體步驟如下：,【輸入標(biāo)簽輔助功能屬性】對話框 多行文本域效果,8.2.2 使用多行文本域,選中多行文本域，按Ctrl+F3組合鍵，打開【屬性】面板，如圖上所示。在【字符寬度】文本框中輸入10，在【行數(shù)】文本框中輸入5，在【初始值】多行文本域中輸入“多行文本域”，按Enter鍵，效果如圖下所示。,【屬性】面板,設(shè)置屬性效果,8.2.3 使用密碼文本域,在網(wǎng)頁提交的內(nèi)容中包含密碼，用于驗證用戶身份。這時就

4、要用到密碼文本域，這是因為提交的密碼不能以明文顯示。如何在網(wǎng)頁中添加密碼文本域，具體步驟如下：,密碼文本域效果,8.2.4 使用隱藏域,在網(wǎng)頁的制作過程中，有時需要提交預(yù)先設(shè)置好的內(nèi)容，但這些內(nèi)容又不宜顯示給用戶，因此隱藏域是一個不錯的選擇。如何向網(wǎng)頁添加隱藏域，具體步驟如下：,隱藏域效果,8.3 選擇標(biāo)簽,在網(wǎng)頁中除了需要提交輸入的文字，還有許多內(nèi)容需要做成選項，從而為用戶提供多種選擇，使用起來更方便。在選擇的時候可以是單選，也可以是多選。單選時使用單選按鈕，多選時使用復(fù)選框。本小節(jié)將介紹如何對這兩種選擇方式進行操作。,8.3.1 使用單選按鈕,單選按鈕用于在眾多選項中只能選取一個。例如填寫

5、個人信息的性別，只能是男或女，不可能同時是男又是女，此時需要用到單選按鈕。插入單選按鈕的具體步驟如下：,【輸入標(biāo)簽輔助功能屬性】對話框功夫 單選按鈕效果圖,8.3.1 使用單選按鈕,從圖中可以看出，單選按鈕的初始狀態(tài)是未選中的。修改單選按鈕可以改變初始值。,【屬性】面板,初始選中狀態(tài)效果,8.3.2 使用單選按鈕組,前面介紹了如何操作單選按鈕。通過上面的方法可以插入一個單選按鈕組，但顯示卻有點繁瑣。Dreamweaver提供了一個更簡便的方法，可以直接插入一個單選按鈕組，具體步驟如下：,【單選按鈕組】對話框 單選按鈕組效果,8.3.3 使用復(fù)選框,前面介紹了如何操作單選按鈕和單選按鈕組。有時在

6、選擇時需要同時選擇多個選項，例如用戶提交的個人興趣愛好，可以同時選擇音樂、旅游和體育等，此時可以使用復(fù)選框，具體步驟如下：,【輸入標(biāo)簽輔助功能屬性】 復(fù)選框效果,8.4 列表與菜單,在網(wǎng)頁中除了單選按鈕和復(fù)選框供用戶選擇，還可以通過列表和菜單的方式提供選擇。本小節(jié)將介紹如何在網(wǎng)頁中添加列表與菜單。,8.4.1 使用菜單,像應(yīng)用程序中的菜單一樣，可以在很小的空間內(nèi)為用戶提供多種選擇和操作。在網(wǎng)頁添加菜單的具體步驟如下：,【列表值】對話框 菜單預(yù)覽效果,8.4.2 使用列表,前面介紹了菜單的操作，本小節(jié)介紹列表的操作，其操作的前8個步驟與插入菜單的步驟一樣，這里就從第9步開始介紹，具體步驟如下：,

7、列表效果 列表預(yù)覽效果,8.4.3 使用跳轉(zhuǎn)菜單,在網(wǎng)頁中可以設(shè)計一個下拉跳轉(zhuǎn)菜單，從而為網(wǎng)頁節(jié)省很多空間。設(shè)計跳轉(zhuǎn)菜單可能需要腳本編程，但在Dreamweaver中通過簡單的步驟便可實現(xiàn)。具體步驟如下：,插入跳轉(zhuǎn)菜單效果 跳轉(zhuǎn)菜單預(yù)覽效果,8.5 表單按鈕,表單按鈕用于控制網(wǎng)頁中的表單。提交按鈕用于提交已經(jīng)填寫好的表單內(nèi)容，重置按鈕用于重新填寫表單的內(nèi)容，它們是表單按鈕的兩個最基本的功能。除此之外還可以用作完成其他的任務(wù)，例如，通過單擊按鈕產(chǎn)生一個事件，調(diào)用腳本程序等。,8.5.1 表單按鈕,填寫好表單內(nèi)容，最終要提交到服務(wù)端，此時單擊提交按鈕把表單內(nèi)容發(fā)送到服務(wù)端。本小節(jié)將介紹如何在網(wǎng)頁中

8、插入表單按鈕，具體步驟如下：,【重置】按鈕效果 普通按鈕效果,8.5.2 圖像域,上一小節(jié)介紹了如何插入表單按鈕，但這些按鈕的外觀都是由系統(tǒng)預(yù)設(shè)的。如果需要插入自定義的個性按鈕，可以使用圖像域，具體步驟如下：,插入圖像域效果,【屬性】面板,8.6 文件域和字段集,在網(wǎng)站中需要把文件傳送到服務(wù)端，從而供用戶使用，如相冊和演示文件等。此時就需要使用文件域，把客戶端的文件上傳。為了方便用戶的使用，需要把同類表單放在一起，并進行標(biāo)識，此時需要使用字段集。,8.6.1 使用文件域,文件域用于提交文件，在網(wǎng)頁中插入文件域的具體步驟如下：,文件域效果,8.6.2 使用字段集,字段集能使表單按類進行排放，從而使網(wǎng)頁結(jié)構(gòu)更清晰。在此舉一簡單實例，具體步驟如下：,字段集效果 字段集預(yù)覽效果,8.7 專家總結(jié),本章介紹了如何操作