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

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