中文版DreamweaverCS5網(wǎng)頁(yè)設(shè)計(jì)實(shí)用教程認(rèn)識(shí)表單15.1第15章

表單15.3Spry表單15.2表單元素的使用15.1認(rèn)識(shí)表單如圖15-1所示，單擊插入面板的“表單”標(biāo)簽，在表單選項(xiàng)卡中列出了表單的各項(xiàng)元素。圖15-1表單的各項(xiàng)元素15.2表單元素的使用一、插入表單二、插入文本域三、插入復(fù)選框四、插入單選按鈕和

單選按鈕組五、插入列表六、插入跳轉(zhuǎn)菜單七、插入圖像域八、插入文件域九、插入按鈕一、插入表單（1）新建一個(gè)HTML文檔，確定要插入表單域的位置，切換插入面板到表單選項(xiàng)卡，單擊“表單”按鈕，插入點(diǎn)位置出現(xiàn)紅色虛線框，即為表單，如圖15-2所示。（2）單擊編輯界面中的表單，可在如圖15-2所示的屬性面板中進(jìn)行相關(guān)設(shè)置（屬性多為服務(wù)器端腳本使用，目前只需知道就可以了）。圖15-2表單二、插入文本域（1）新建一個(gè)HTML文檔，切換插入面板到表單標(biāo)簽下。單擊“表單”按鈕，插入一個(gè)表單。（2）在表單域內(nèi)單擊鼠標(biāo)，輸入文字“用戶名：”。單擊“文本字段”按鈕，插入一個(gè)文本域，如圖15-3所示。如果在插入文本域之前，未插入表單，則會(huì)提示是否添加表圖15-3插入一個(gè)文本域二、插入文本域（3）在設(shè)計(jì)視圖中，單擊添加的文本域，然后在屬性面板中設(shè)置文本域的屬性。本例選擇類型為單行，字符寬度為12，最多字符數(shù)為15，初始值為空。（4）將鼠標(biāo)光標(biāo)移到文本域的右側(cè)，單擊鼠標(biāo)，然后按【Enter】鍵。（5）輸入文字“密碼：”，再單擊“文本字段”按鈕，插入一個(gè)文本域。在屬性面板的類型欄中選擇“密碼”，字符寬度為12，最多字符數(shù)為10，初始值為000000。（6）將鼠標(biāo)光標(biāo)移至第二個(gè)文本域的右側(cè)，單擊鼠標(biāo)，然后按【Enter】鍵。（7）單擊“文本字段”按鈕，插入一個(gè)文本域。如圖15-4所示，在屬性面板中設(shè)置類型為“多行”，字符寬度為30，行數(shù)為5，初始值為“請(qǐng)多提寶貴意見(jiàn)，我們期待您的來(lái)信!”。文本框最大顯示的行數(shù)，超出部分將自動(dòng)出現(xiàn)垂直滾動(dòng)條行數(shù)。二、插入文本域圖15-4設(shè)置文本字段二、插入文本域（8）保存網(wǎng)頁(yè)。按【F12】鍵，預(yù)覽網(wǎng)頁(yè)，結(jié)果如圖15-5所示。圖15-5保存網(wǎng)頁(yè)三、插入復(fù)選框（1）新建一個(gè)HTML文檔，先插入表單。（2）在表單內(nèi)輸入文字“你的興趣：”。單擊“復(fù)選框”按鈕，插入一個(gè)復(fù)選框。在這個(gè)復(fù)選框后面輸入“旅游”。照此方法制作多個(gè)復(fù)選框，如圖15-6所示。圖15-6制作復(fù)選框三、插入復(fù)選框（1）新建一個(gè)HTML文檔，先插入表單。（2）在表單內(nèi)輸入文字“你的興趣：”。單擊“復(fù)選框”按鈕，插入一個(gè)復(fù)選框。在這個(gè)復(fù)選框后面輸入“旅游”。照此方法制作多個(gè)復(fù)選框，如圖15-6所示。（3）選中目標(biāo)復(fù)選框，可在屬性面板中進(jìn)行以下相關(guān)設(shè)置，如圖15-6所示。圖15-6制作復(fù)選框四、插入單選按鈕和單選按鈕組（1）新建一個(gè)HTML文檔。插入表單。（2）在表單內(nèi)輸入文字“性別：”，單擊“單選按鈕”，插入一個(gè)單選按鈕，在其后輸入“男”。再次單擊“單選按鈕”，插入第二個(gè)單選按鈕，在其后輸入“女”。（3）選中第一個(gè)單選按鈕，在屬性面板中設(shè)置初始狀態(tài)“未選中”，如圖15-7所示。圖15-7設(shè)置初始狀態(tài)“未選中”四、插入單選按鈕和單選按鈕組（4）還可以使用更方便的方法加入一組單選按鈕。在表單域內(nèi)單擊鼠標(biāo)，輸入“你最想學(xué)習(xí)哪方面的知識(shí)?”，按【Enter】鍵。再單擊“單選按鈕組”按鈕，打開圖15-8所示的“單選按鈕組”對(duì)話框，在對(duì)話框中輸入目標(biāo)選項(xiàng)名稱。圖15-8“單選按鈕組”對(duì)話框四、插入單選按鈕和單選按鈕組（5）默認(rèn)單選按鈕框中已經(jīng)有了兩個(gè)單選按鈕，單擊單選按鈕欄的“加號(hào)”按鈕，添加第3個(gè)單選按鈕。單擊“標(biāo)簽”下面的目標(biāo)行，輸入單選按鈕對(duì)應(yīng)的文字，如“Dreamweaver”、“Flash”、“Fireworks”。選中“換行符”選項(xiàng)。根據(jù)需要設(shè)置各個(gè)單選按鈕的值。單擊“確定”按鈕，關(guān)閉對(duì)話框，設(shè)置結(jié)果如圖15-9所示。圖15-9設(shè)置結(jié)果五、插入列表

列表框即以列表形式提供一組選項(xiàng)，按照顯示方式的不同可將列表框分為兩類：菜單和列表，如圖15-10所示。圖15-10菜單和列表五、插入列表（1）新建一個(gè)HTML文檔。（2）插入表單。在表單內(nèi)輸入文字“所在城市：”。（3）單擊“列表/菜單”按鈕，插入一個(gè)列表框。（4）在屬性面板中保持類型為“菜單”，如圖15-11所示。圖15-11保持類型為“菜單”五、插入列表（5）單擊屬性面板中的“列表值”按鈕，打開圖15-12所示“列表值”對(duì)話框。在“項(xiàng)目標(biāo)簽”下的輸入欄中輸入第一個(gè)列表項(xiàng)“北京”。單擊“加號(hào)”按鈕，添加新的列表項(xiàng)。根據(jù)需要設(shè)置各個(gè)列表項(xiàng)的值。單擊“確定”按鈕，關(guān)閉對(duì)話框。（6）回到屬性面板，在“初始化時(shí)選定”欄中選擇“北京”，即設(shè)置“北京”為默認(rèn)選項(xiàng)。（7）保存文件，按【F12】鍵在IE瀏覽器中查看效果。插入菜單與插入列表的操作基本相同，只是在單擊“列表/菜單”按鈕后，在屬性面板中選擇類型為“菜單”。圖15-12“列表值”對(duì)話框六、插入跳轉(zhuǎn)菜單（1）新建一個(gè)HTML文檔，先插入表單。（2）在表單內(nèi)輸入文字“熱點(diǎn)網(wǎng)站：”，單擊“跳轉(zhuǎn)菜單”按鈕，打開“插入跳轉(zhuǎn)菜單”對(duì)話框。（3）如圖15-13所示，在“文本”欄中輸入文字“搜狐”，在“選擇時(shí)，轉(zhuǎn)到URL”欄中輸入“”，在“打開URL于”欄中設(shè)置打開的目標(biāo)窗口；然后單擊“加號(hào)”按鈕，添加新的菜單項(xiàng)，分別輸入“網(wǎng)易”、“”、“今日在線”、“”。六、插入跳轉(zhuǎn)菜單圖15-13“插入跳轉(zhuǎn)菜單”對(duì)話框六、插入跳轉(zhuǎn)菜單（4）單擊“插入跳轉(zhuǎn)菜單”對(duì)話框的“確定”按鈕，插入跳轉(zhuǎn)菜單。（5）如圖15-14所示，在屬性面板的“初始化時(shí)選定”欄中選擇目標(biāo)項(xiàng)。圖15-14選擇目標(biāo)項(xiàng)六、插入跳轉(zhuǎn)菜單要修改菜單項(xiàng)文字及鏈接地址，可單擊屬性面板的“列表值”按鈕；如果要修改其他特性，則需要通過(guò)行為面板來(lái)完成，具體方法如下：（1）選中要編輯的跳轉(zhuǎn)菜單。（2）按【Shift+F4】組合鍵，打開行為面板。如圖15-15所示，單擊“添加行為”按鈕，在彈出菜單中選擇“跳轉(zhuǎn)菜單”。（3）在打開的“跳轉(zhuǎn)菜單”對(duì)話框中，編輯如文本值、轉(zhuǎn)到URL等值。（4）編輯完成后，單擊“確定”按鈕，關(guān)閉對(duì)話框。圖15-15選擇“跳轉(zhuǎn)菜單”七、插入圖像域要在表單上插入圖像，可用下面的方法來(lái)實(shí)現(xiàn)：（1）打開或新建一個(gè)HTML文檔，先插入表單。單擊“圖像域”按鈕，打開如圖15-16所示的“選擇圖像源文件”對(duì)話框，選擇所需的圖像文件后，關(guān)閉對(duì)話框。（2）選中插入的圖像，在屬性面板中進(jìn)行相關(guān)設(shè)置。圖15-16“選擇圖像源文件”對(duì)話框八、插入文件域文件域一般用于上傳文檔時(shí)從磁盤上提取文檔的路徑和文件名。（1）新建一個(gè)HTML文檔，插入表單。單擊“文件域”按鈕，插入一個(gè)文件域，如圖15-17所示。（2）在屬性面板中進(jìn)行相關(guān)設(shè)置即可。圖15-17插入一個(gè)文件域九、插入按鈕按鈕可以分為兩種類型：提交按鈕和重設(shè)按鈕。（1）新建一個(gè)HTML文檔，先插入表單。（2）制作相關(guān)表單元素，如單選、多選等。（3）如圖15-18所示，單擊“按鈕”按鈕，插入一個(gè)“提交”按鈕，在屬性面板中設(shè)置動(dòng)作為“提交表單”。圖15-18設(shè)置動(dòng)作為“提交表單”15.3Spry表單下面以添加Spry驗(yàn)證文本域?yàn)槔f(shuō)明