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

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