網(wǎng)站設(shè)計(jì)與開(kāi)發(fā)技術(shù)教程 第5章 表單.ppt

創(chuàng)建表單 表單的作用是可以與站點(diǎn)的訪問(wèn)者進(jìn)行交互 或從他們那里收集信息 然后提交至服務(wù)器進(jìn)行處理 表單可以包含允許用戶進(jìn)行交互的各種對(duì)象 如文本域 列表菜單 復(fù)選框和單選按鈕等 表單中插入的主要是表單對(duì)象 表單在HTML代碼中對(duì)應(yīng)的標(biāo)簽是form 表單內(nèi)所有的元素都包含在和之間 實(shí)例 創(chuàng)建表單 一 建立一個(gè)表單的步驟如下 1 將光標(biāo)至于文檔中 選擇 插入 表單 表單 命令 或?qū)?常用 插入欄切換到 表單 插入欄 2 在 表單 插入欄中單擊 表單 按鈕 可以插入表單 在設(shè)計(jì)視圖出現(xiàn)一個(gè)紅色的虛線框 3 在 屬性 面板中可以指定處理該表單的動(dòng)態(tài)頁(yè)或腳本的路徑 表單屬性面板主要有以下參數(shù) 表單名稱 設(shè)置表單的名稱 動(dòng)作 設(shè)置處理表單的服務(wù)器端腳本 方法 設(shè)置將表單數(shù)據(jù)發(fā)送到服務(wù)器的方法 選擇 默認(rèn) 或GET 表單數(shù)據(jù)將以GET方法發(fā)送 發(fā)送時(shí)把表單數(shù)據(jù)附加到URL中 選擇POST 表單數(shù)據(jù)將以POST方法發(fā)送 發(fā)送時(shí)把表單數(shù)據(jù)嵌入到HTTP請(qǐng)求中 通常選擇POST MIME類型 用來(lái)設(shè)置發(fā)送數(shù)據(jù)的MIME編碼類型 application x www form urlencode 通常對(duì)應(yīng)POST方法 當(dāng) MIME類型 為 multipart form data 時(shí) 表示以二進(jìn)制數(shù)據(jù)形式進(jìn)行傳遞 一般當(dāng)表單中包含多媒體數(shù)據(jù)時(shí) 必須設(shè)置為 multipart form data 目標(biāo) 用來(lái)設(shè)置表單被處理后 反饋?lái)?yè)面打開(kāi)的方式 二 添加表單元素 一般在表格當(dāng)中插入多個(gè)表單元素 打開(kāi)文件 formtest asp 首先在表單內(nèi)插入11行2列表格 第一行合并單元格 并添加 用戶信息 字樣和其他文字信息 1 文本域 文本域主要應(yīng)用于單行信息的輸入 如登錄帳號(hào) 聯(lián)系電話 郵政編碼等 選擇 插入 表單 文本域 即可在文檔中插入一個(gè)文本域 在 屬性 面板中可以設(shè)置文本域的相應(yīng)屬性 1 文本域 輸入文本域的名稱 2 字符寬度 用于設(shè)置文本域的寬度 3 最多字符寬度 設(shè)置單行文本域中最多可輸入的字符數(shù) 4 文本域的類型 包括單行 多行 密碼3個(gè)選項(xiàng) 5 初始值 指定在首次載入表單時(shí)文本域中顯示的內(nèi)容 例 在第2行插入文本域 并設(shè)置屬性 2 單選按鈕和單選按鈕組 要在網(wǎng)頁(yè)中插入單選按鈕 選擇 插入 表單 單選按鈕 命令 插入單選按鈕 在 屬性 面板中設(shè)置單選按鈕的相應(yīng)屬性 1 單選按鈕 用來(lái)設(shè)置復(fù)選框的名稱 2 選定值 用來(lái)設(shè)定在復(fù)選框被選中時(shí)發(fā)送給服務(wù)器的值 3 初始狀態(tài) 用來(lái)設(shè)置復(fù)選框的初始狀態(tài)是選中還是未選中 也可以在網(wǎng)頁(yè)中插入單選按鈕組 選擇 插入 表單 單選按鈕組 命令 打開(kāi)單選按鈕組對(duì)話框 3 復(fù)選框 復(fù)選框提供多個(gè)選項(xiàng) 可以任意選擇 在網(wǎng)頁(yè)中插入復(fù)選框 選擇 插入 表單 復(fù)選框 命令 即可插入復(fù)選框 在 屬性 面板中可以設(shè)置復(fù)選框的相應(yīng)屬性 1 復(fù)選框名稱 用來(lái)設(shè)置復(fù)選框的名稱 2 選定值 用來(lái)設(shè)定在復(fù)選框被選中時(shí)發(fā)送給服務(wù)器的值 3 初始狀態(tài) 用來(lái)設(shè)置復(fù)選框的初始狀態(tài)是選中還是未選中 4 列表 菜單 列表菜單的功能與復(fù)選框和單選框的功能差不多 都可以列舉很多選項(xiàng)供瀏覽者選擇 1 列表提供一個(gè)滾動(dòng)條 通過(guò)拖動(dòng)滾動(dòng)條可以瀏覽很多項(xiàng) 并允許多重選擇 2 下拉菜單默認(rèn)僅顯示一項(xiàng) 該項(xiàng)為活動(dòng)選項(xiàng) 用戶單擊打開(kāi)菜單但只能選擇其中的一項(xiàng) 插入列表 菜單的方法如下 1 將光標(biāo)置于頁(yè)面中需要插入列表 菜單的位置 2 選擇 插入 表單 列表 菜單 命令 則在光標(biāo)所在位置插入列表 菜單 在 屬性 面板中可以設(shè)置列表 菜單的相應(yīng)屬性 列表 菜單 文本框 設(shè)置所選列表的名稱 類別 選項(xiàng) 設(shè)置列表還是菜單的顯示形式 選擇 菜單 項(xiàng) 則瀏覽者點(diǎn)擊時(shí)會(huì)產(chǎn)生展開(kāi)的下拉式菜單的效果 選擇 列表 項(xiàng) 則顯示為一列可滾動(dòng)的列表效果 初始化時(shí)選定 列表框 可以選擇列表或菜單在瀏覽器里顯示的初始值 列表值 按鈕 單擊該按鈕可以打開(kāi) 列表值 對(duì)話框 在 列表值 對(duì)話框中 可以添加選項(xiàng)或刪除選項(xiàng) 也可以調(diào)整所選列表項(xiàng)目的位置 如果以列表形式顯示 在屬性面板中的 類型 中選擇 列表 還可以設(shè)置以下兩項(xiàng) 1 高度 文本框 設(shè)置列表的高度 如輸入3 則列表框在瀏覽器中顯示為3個(gè)選項(xiàng)的高度 如果實(shí)際的項(xiàng)目數(shù)多于 高度 的項(xiàng)目數(shù) 那么列表菜單中的右側(cè)將顯示滾動(dòng)條 通過(guò)滾動(dòng)條顯示 2 選定范圍 復(fù)選框 如果選擇該復(fù)選框 則這個(gè)列表允許被多選 選擇時(shí)要結(jié)合Shift或Ctrl鍵進(jìn)行操作 如果取消該復(fù)選框選項(xiàng) 則這個(gè)列表只允許單選 瀏覽器運(yùn)行效果 5 多行文本域 多行文本域可以提供一個(gè)較大的區(qū)域 供瀏覽者輸入 用戶可以設(shè)置訪問(wèn)者最多輸入的行數(shù)以及文本區(qū)域的字符寬度 選擇 插入 表單 文本區(qū)域 命令 即可插入多行文本域 1 行數(shù) 設(shè)置所選文本域顯示的行數(shù) 可輸入數(shù)值 可用于輸入較多內(nèi)容的欄目 如反饋表 留言簿等 2 換行 設(shè)置文本框中輸入文本的換行方式 有以下四種方式 默認(rèn) 設(shè)置自動(dòng)換行 當(dāng)瀏覽者輸入的內(nèi)容超過(guò)文本區(qū)域的右邊界時(shí) 文本換到下一行 當(dāng)提交數(shù)據(jù)進(jìn)行處理時(shí) 不設(shè)置這些數(shù)據(jù)自動(dòng)換行 數(shù)據(jù)作為一個(gè)數(shù)據(jù)字符串進(jìn)行提交 和 虛擬 項(xiàng)功能相同 關(guān) 防止文本換行到下一行 當(dāng)瀏覽者輸入的內(nèi)容超過(guò)多行文本域的右邊界時(shí) 文本將向左側(cè)滾動(dòng) 按Enter鍵才能將插入點(diǎn)文本區(qū)域的下一行 虛擬 設(shè)置自動(dòng)換行 當(dāng)瀏覽者輸入的內(nèi)容超過(guò)文本區(qū)域的右邊界時(shí) 文本換到下一行 當(dāng)提交數(shù)據(jù)進(jìn)行處理時(shí) 不設(shè)置這些數(shù)據(jù)自動(dòng)換行 數(shù)據(jù)作為一個(gè)數(shù)據(jù)字符串進(jìn)行提交 實(shí)體 設(shè)置自動(dòng)換行 當(dāng)提交數(shù)據(jù)進(jìn)行處理時(shí) 也設(shè)置這些數(shù)據(jù)自動(dòng)換行 6 插入文件域 文件域可以允許用戶在域的內(nèi)部輸入本地硬盤(pán)中的文件 如word文檔 圖片和程序等 然后通過(guò)表單將這些文件上傳到服務(wù)器 文件域由一個(gè)文本框和一個(gè) 瀏覽 按鈕組成 訪問(wèn)者可以通過(guò)表單的文件域來(lái)上傳指定的文件 訪問(wèn)者可以在文件域的文本框中輸入一個(gè)文件的路徑 也可以單擊 瀏覽 按鈕來(lái)選擇一個(gè)文件 當(dāng)訪問(wèn)者提交表單時(shí) 這個(gè)文件就被上傳 插入文件域的具體操作步驟如下 1 將光標(biāo)置于頁(yè)面中需要插入文件域的位置 2 選擇 插入 表單 文件域 命令 即可在網(wǎng)頁(yè)中插入一個(gè)文本域和一個(gè) 瀏覽 按鈕 在屬性面板中設(shè)置文件域?qū)傩?選中按鈕 打開(kāi)屬性面板可以設(shè)置文件域的屬性 其中 文件域名稱 文本框用來(lái)設(shè)置所選文件域的名稱 字符寬度 文本框是設(shè)置文件域里文本框的寬度的 最多字符數(shù) 文本框可以設(shè)置文件域里文本框可輸入的最多字符數(shù)量 7 插入跳轉(zhuǎn)菜單 跳轉(zhuǎn)菜單是超鏈接的一種形式 使用跳轉(zhuǎn)菜單要比其他形式鏈接節(jié)省更多的頁(yè)面空間 跳轉(zhuǎn)菜單從菜單發(fā)展而來(lái) 瀏覽者單擊并選擇下列菜單項(xiàng)時(shí)會(huì)自動(dòng)跳轉(zhuǎn)到目標(biāo)網(wǎng)頁(yè) 插入跳轉(zhuǎn)菜單的步驟如下 1 將光標(biāo)置于要添加跳轉(zhuǎn)菜單的位置 2 選擇 插入 菜單 跳轉(zhuǎn)菜單 命令 打開(kāi)跳轉(zhuǎn)菜單對(duì)話框 3 可以通過(guò) 按鈕添加和刪除菜單項(xiàng) 在瀏覽器中運(yùn)行 8 按鈕 要在網(wǎng)頁(yè)中插入按鈕 選擇 插入 表單 按鈕 命令 插入按鈕 在屬性面板中可以設(shè)置按鈕的相應(yīng)屬性 1 按鈕名稱 在文本框中設(shè)置按鈕的名稱 如果想對(duì)按鈕添加功能效果 則必須命名然后采用