《Web應(yīng)用開(kāi)發(fā)》課件-10 表單

本章簡(jiǎn)介：表單的出現(xiàn)已經(jīng)使網(wǎng)頁(yè)從單向的信息傳遞，發(fā)展到能夠?qū)崿F(xiàn)與用戶(hù)交互對(duì)話(huà)，使網(wǎng)頁(yè)的交互性越來(lái)越強(qiáng)。本章主要講解表單的使用方法和應(yīng)用技巧，通過(guò)這些內(nèi)容的學(xué)習(xí)，可以利用表單輸入信息或進(jìn)行選擇，使用包括文本域、密碼域、單選按鈕/多選按鈕、列表框、跳轉(zhuǎn)菜單、按鈕等表單對(duì)象，將表單相應(yīng)的信息提交給服務(wù)器進(jìn)行處理。使用表單可以實(shí)現(xiàn)網(wǎng)上投票、網(wǎng)站注冊(cè)、信息發(fā)布、網(wǎng)上交易等功能。10表單的使用課堂學(xué)習(xí)目標(biāo)掌握創(chuàng)建表單的方法掌握設(shè)置表單屬性的方法掌握創(chuàng)建列表和菜單的方法掌握創(chuàng)建跳轉(zhuǎn)菜單的方法掌握創(chuàng)建文本域和圖像域的方法掌握創(chuàng)建按鈕的方法10.1表單的使用創(chuàng)建表單表單的屬性單行文本域課堂案例—用戶(hù)登錄界面單選按鈕單選按鈕組復(fù)選框課堂案例—人力資源網(wǎng)頁(yè)創(chuàng)建列表和菜單創(chuàng)建跳轉(zhuǎn)菜單創(chuàng)建圖像域創(chuàng)建文件域創(chuàng)建按鈕10.1.1創(chuàng)建表單在文檔中插入表單的具體操作步驟如下。（1）在文檔窗口中，將插入點(diǎn)放在希望插入表單的位置。（2）彈出“表單”命令，文檔窗口中出現(xiàn)一個(gè)紅色的虛輪廓線(xiàn)用來(lái)指示表單區(qū)域。創(chuàng)建表單10.1.2表單的屬性在文檔窗口中選擇表單，“屬性”面板中出現(xiàn)表單屬性?！皩傩浴泵姘?0.1.3單行文本域1．插入單行文本域單行文本域通常提供單字或短語(yǔ)響應(yīng)，如姓名或地址。2．插入密碼文本域密碼域是特殊類(lèi)型的文本域。當(dāng)用戶(hù)在密域中輸入時(shí)，所輸入的文本被替為星號(hào)或項(xiàng)目符號(hào)，以隱藏該文本，保護(hù)這些信息不被看到。3．插入多行文本域多行文本域?yàn)樵L(fǎng)問(wèn)者提供一個(gè)較大的區(qū)域，供其輸入響應(yīng)。可以指定訪(fǎng)問(wèn)者最多輸入的行數(shù)以及對(duì)象的字符寬度。如果輸入的文本超過(guò)這些設(shè)置，則該域?qū)凑論Q行屬性中指定的設(shè)置進(jìn)行滾動(dòng)。10.1.3單行文本域10.1.4課堂案例—用戶(hù)登錄界面使用“表單”按鈕，插入表單；使用“表格”按鈕，插入表格；使用“文本字段”按鈕，插入文本字段；使用“屬性”面板設(shè)置表格、文本字段的屬性。效果圖10.1.5復(fù)選框插入復(fù)選框有以下幾種方法。單擊“插入”面板“表單”選項(xiàng)卡中的“復(fù)選框”按鈕，在文檔窗口的表單中出現(xiàn)一個(gè)復(fù)選框。選擇“插入>表單>復(fù)選框”命令，在文檔窗口的表單中出現(xiàn)一個(gè)復(fù)選框。10.1.6單選按鈕插入單選按鈕有以下幾種方法。單擊“插入”面板“表單”選項(xiàng)卡中的“單選按鈕”按鈕，在文檔窗口的表單中出現(xiàn)一個(gè)單選按鈕。選擇“插入>表單>單選按鈕”命令，在文檔窗口的表單中出現(xiàn)一個(gè)單選按鈕。10.1.7單選按鈕組先將光標(biāo)放在表單輪廓內(nèi)需要插入單選按鈕組的位置，然后啟用“單選按鈕組”對(duì)話(huà)框。彈出“單選按鈕組”對(duì)話(huà)框有以下幾種方法。單擊“插入”面板中“表單”選項(xiàng)卡的“單選按鈕組”按鈕。選擇“插入>表單>單選按鈕組”命令。10.1.8課堂案例—人力資源網(wǎng)頁(yè)使用“單選按鈕”按鈕，插入單選按鈕；使用“復(fù)選框”按鈕，插入復(fù)選框。效果圖10.1.9創(chuàng)建列表和菜單1．插入下拉菜單插入下拉菜單有以下幾種方法。單擊“插入”面板“表單”選項(xiàng)卡中的“列表/菜單”按鈕，在文檔窗口的表單中出現(xiàn)下拉菜單。選擇“插入>表單>列表/菜單”命令，在文檔窗口的表單中會(huì)出現(xiàn)下拉菜單。2．插入滾動(dòng)列表若要在表單域中插入滾動(dòng)列表，先將光標(biāo)放在表單輪廓內(nèi)需要插入滾動(dòng)列表的位置，然后插入滾動(dòng)列表。插入滾動(dòng)列表有以下幾種方法。單擊“插入”面板“表單”選項(xiàng)卡的“列表/菜單”按鈕，在文檔窗口的表單中出現(xiàn)滾動(dòng)列表。選擇“插入>表單>列表/菜單”命令，在文檔窗口的表單中出現(xiàn)滾動(dòng)列表。10.1.10創(chuàng)建跳轉(zhuǎn)菜單在網(wǎng)頁(yè)中插入跳轉(zhuǎn)菜單的具體操作步驟如下。（1）將光標(biāo)放在表單輪廓內(nèi)需要插入跳轉(zhuǎn)菜單的位置。（2）選擇“插入跳轉(zhuǎn)菜單”命令，彈出“插入跳轉(zhuǎn)菜單”對(duì)話(huà)框，啟用“插入跳轉(zhuǎn)菜單”對(duì)話(huà)框有以下幾種方法。在“插入”面板“表單”選項(xiàng)卡中單擊“跳轉(zhuǎn)菜單”按鈕。選擇“插入>表單>跳轉(zhuǎn)菜單”命令。10.1.11創(chuàng)建圖像域彈出“選擇圖像源文件”對(duì)話(huà)框有以下幾種方法。單擊“插入”面板“表單”選項(xiàng)卡中的“圖像域”按鈕。選擇“插入>表單>圖像域”命令。10.1.12創(chuàng)建文件域插入文件域有以下幾種方法。將光標(biāo)置于單元格中，單擊“插入”面板“表單”選項(xiàng)卡中的“文件域”按鈕，在文檔窗口中的單元格中出現(xiàn)一個(gè)文件域。選擇“插入>表單>文件域”命令，在文檔窗口的表單中出現(xiàn)一個(gè)文件域。10.1.13創(chuàng)建按鈕插入按鈕有以下幾種方法。單擊“插入”面板“表單”選項(xiàng)卡中的“按鈕”按鈕，在文檔窗口的表單中出現(xiàn)一個(gè)按鈕。選擇“插入>表單>按鈕”命令，在文檔窗口的表單中出現(xiàn)一個(gè)按鈕。課堂練習(xí)—智能掃地機(jī)器人網(wǎng)頁(yè)使用“文本字段”按鈕，制作用戶(hù)名、手機(jī)、密碼和驗(yàn)證