9.2 插入輸入類表單對象

可以使用Dreamweaver創建帶有文本域、密碼域、單選按鈕、復選框、選擇、按鈕及其他輸入類型的表單，這些輸入類型又稱為表單對象。

9.2.1 插入表單域

使用表單必須具備的條件有兩個：一個是含有表單元素的網頁文檔，另一個是具備服務器端的表單處理應用程序或客戶端腳本程序，它能夠處理用戶輸入到表單的信息。下面創建一個基本的表單，具體操作步驟如下：

01 啟動Dreamweaver CC，打開網頁文檔，如圖9-1所示。將光標置于文檔中要插入表單的位置。

02 執行“插入”|“表單”|“表單”命令，如圖9-2所示。

03 執行命令后，頁面中就會出現紅色的虛線，這個虛線就是表單，如圖9-3所示。

04 選中表單，在“屬性”面板中，設置表單的屬性，如圖9-4所示。

9.2.2 插入文本域

文本域接受任何類型的字母及數字輸入內容。文本域主要用于單行信息的輸入，創建文本域的具體操作步驟如下：

01 將光標置于表單中，執行“插入”|“表格”命令，彈出“表格”對話框，在對話框中將“行數”設置為10、“列”設置為2，如圖9-5所示。

02 單擊“確定”按鈕，插入表格，如圖9-6所示。

03 將光標置于表格的第1行1列單元格中，輸入相應的文字，如圖9-7所示。

04 將光標置于表格的第1行第2列單元格中，執行“插入”|“表單”|“文本”命令，插入文本域，如圖9-8所示。

05 選中插入的文本域，打開“屬性”面板，在面板中設置文本域的相關屬性，如圖9-9所示。

9.2.3 插入密碼域

使用密碼域輸入的密碼及其他信息在發送到服務器時并不會進行加密處理，所傳輸的數據可能會以字母、數字、文本的形式被截獲并被讀取。因此，始終應對要確保安全的數據進行加密。創建密碼域的具體操作步驟如下：

01 將光標置于表格的第2行第1列中，輸入相應的文字，如圖9-10所示。

02 將光標置于表格的第2行第2列單元格中，執行“插入”|“表單”|“密碼”命令，插入密碼域，如圖9-11所示。

9.2.4 插入多行文本域

如果希望創建多行文本域，則需要使用文本區域。插入文本區域的具體操作步驟如下：

01 將光標置于第9行第1列單元格中，輸入相應的文字，如圖9-12所示。

02 將光標置于第9行第2列單元格中，執行“插入”|“表單”|“文本區域”命令，插入文本區域，如圖9-13所示。

03 選中插入的文本區域，打開“屬性”面板，在面板中設置其屬性，如圖9-14所示。

9.2.5 插入隱藏域

可以使用隱藏域存儲并提交非用戶輸入信息，該信息對用戶而言是隱藏的。將光標置于要插入隱藏域的位置，執行“插入”|“表單”|“隱藏域”命令，插入隱藏域，如圖9-15所示。

9.2.6 插入復選框

復選框允許用戶在一組選項中選擇多個選項，每個復選框都是獨立的，所以必須有一個唯一的名稱。插入復選框的具體操作步驟如下：

01 將光標置于表格的第3行第1列單元格中，輸入文字“預訂客服類型：”，如圖9-16所示。

02 將光標置于表格的第3行第2列單元格中，執行“插入”|“表單”|“復選框”命令，插入復選框，如圖9-17所示。

03 選中復選框，在“屬性”面板中設置復選框的屬性，如圖9-18所示。

04 將光標置于復選框的右邊，輸入文字“高級客房”，如圖9-19所示。

05 將光標置于文字的右邊，插入其他的復選框，并輸入相應的文字，如圖9-20所示。

9.2.7 插入單選按鈕

單選按鈕只允許從多個選項中選擇一個選項。單選按鈕通常成組地使用，在同一個組中的所有單選按鈕必須具有相同的名稱。插入單選按鈕的具體操作步驟如下：

01 將光標置于表格的第4行第1列單元格中，輸入文字“性別：”，如圖9-21所示。

02 將光標置于第4行第2列單元格中，執行“插入”|“表單”|“單選按鈕”命令，插入單選按鈕，如圖9-22所示。

03 選中插入的單選按鈕，打開“屬性”面板，在屬性面板中設置相關屬性，如圖9-23所示。

04 將光標置于單選按鈕的右邊，輸入文字“男”，如圖9-24所示。

05 按照步驟02～04的方法，插入第二個單選按鈕，并輸入文字，如圖9-25所示。

9.2.8 插入選擇框

選擇框使訪問者可以從列表中選擇一個或多個項目。當空間有限，但需要顯示許多項目時，選擇框非常有用。如果想要對返回給服務器的值予以控制，也可以使用選擇框。選擇框與文本域不同，在文本域中用戶可以隨心所欲地輸入任何信息，甚至包括無效的數據，而使用選擇框則可以設置某個菜單返回的確切值。具體操作步驟如下：

01 將光標置于表格的第5行第1列單元格中，輸入文字“房間數量：”，如圖9-26所示。

02 將光標置于表格的第5行第2列單元格中，執行“插入”|“表單”|“選擇”命令，插入選擇，如圖9-27所示。

03 選中選擇框，在“屬性”面板中單擊按鈕，如圖9-28所示。

04 彈出“列表值”對話框，在對話框中單擊按鈕添加相應的內容，如圖9-29所示。

05 單擊“確定”按鈕，添加列表值，如圖9-30所示。

9.2.9 課堂小實例——插入URL

創建URL的具體操作步驟如下：

01 將光標置于表格的第6行第1列單元格中，輸入文字“相關頁面：”，如圖9-31所示。

02 將光標置于第6行第2列單元格中，執行“插入”|“表單”|“URL”命令，如圖9-32所示。

03 選中插入的URL，打開屬性面板，在面板中進行相應的設置，如圖9-33所示。

9.2.10 插入圖像域

在Dreamweaver中，可以使用指定的圖像作為按鈕。如果使用圖像來執行任務而不是提交數據，則需要將某種行為附加到表單對象上。創建圖像按鈕的具體操作步驟如下：

01 將光標置于表格的第7行第1列單元格中，輸入文字，如圖9-34所示。

02 將光標置于表格的第7行第2列單元格中，執行“插入”|“表單”|“日期”命令，插入日期域，如圖9-35所示。

03 將光標置于日期域的右邊，執行“插入”“|表單”|“圖像按鈕”命令，彈出“選擇圖像源文件”對話框，選擇圖像源文件images/icon_04. gif，如圖9-36所示。

04 單擊“確定”按鈕，插入圖像按鈕，如圖9-37所示。

05 選中插入的圖像按鈕，打開“屬性”面板，在面板中設置相關屬性，如圖9-38所示。

9.2.11 插入文件域

利用Dreamueawer可以創建文件域，文件域使瀏覽者可以選擇其計算機上的文件，如處理文檔或圖像文件，并將該文件上傳到服務器。文件域的外觀與文本域類似，只是文件域還包含一個“瀏覽”按鈕。瀏覽者可以手動輸入要上傳的文件的路徑，也可以使用“瀏覽”按鈕定位并選擇該文件。具體操作步驟如下：

01 將光標置于表格的第8行第1列單元格中，輸入文字“上傳圖片：”，如圖9-39所示。

02 將光標置于第8行第2列單元格中，執行“插入”|“表單”|“文件”命令，插入文件域，如圖9-40所示。

03 選中插入的文件域，打開“屬性”面板，在面板中進行相應的設置，如圖9-41所示。

9.2.12 插入按鈕

按鈕控制表單操作，使用表單按鈕，可以將輸入表單的數據提交到服務器，或者重置該表單。

對表單而言，按鈕是非常重要的，它能夠控制對表單內容的操作，如“提交”或“重置”。要將表單內容發送到遠端服務器上，使用“提交”按鈕；要清除現有的表單內容，使用“重置”按鈕。插入按鈕的具體操作步驟如下：

01 將光標置于表格的第10行第2列單元格中，執行“插入”|“表單”|“提交按鈕”命令，插入提交按鈕，如圖9-42所示。

02 選中插入的提交按鈕，打開“屬性”面板，在面板中可以設置相關屬性，如圖9-43所示。

03 將光標置于提交按鈕右邊，執行“插入”“|表單”|“重置按鈕”命令，插入重置按鈕，并在“屬性”面板中設置相關屬性，如圖9-44所示。

04 保存文檔，完成表單對象的制作。