选项按钮群组.pptVIP

10.1 表單元件的介紹 在網頁之中常會有許多輸入資料的欄位，最後只要按 送出 鈕即可將所填寫的資料送給程式處理，這個輸入資料的地方即是表單。 10.1.1 表單加入的標準流程 在網頁互動的設計中，表單的製作是一個相當重要的動作，一個不良的表單設計，往往會造成程式的錯誤或是資料的遺失。表單的製作步驟如下： 1. 設定表單區域。 2. 插入表單元件、設定元件名稱及輸入值。 3. 插入送出表單按鈕及設定表單送出動作。 10.1.2 表單元件的說明與使用 在 Dreamweaver 中插入表單，必須將 插入 面板切換至 表單 項目，以下是表單相關工具的簡介及說明： 1. 表單：在文件中插入一個用紅色虛線所建立的表單範圍，當按 送出 鈕時會將該區域內同一組的資料全部送出。要注意這是建置表單的必備條件，加入表單就必須要有這個物件。 2. 文字欄位：可以接受任何類型的中文、英數項目。輸入的文字可以顯示為單行、多行或密碼 (輸入時在畫面上顯示 * 號)。 3. 隱藏欄位：若是有些參考值或是系統值資料想隨著表單送出，而不想被使用者修改與預覽時，可以將值儲存在這個欄位中。 4. 文字區域：可用於輸入多行文字的欄位。 5. 核取方塊：一次插入一個核取方塊，有多個選項時要重複插入。在同一個表單將多個核取方塊設定相同名稱即視為一個群組，可允許使用者在群組中複選。例如表單中設定「興趣」或是「專長」時都有多個選項並允許複選時使用。 6. 核取方塊群組：一次可以插入一個核取方塊群組，這些方塊擁有相同的名稱，顯示格式可以是 斷行符號 (即一列一個選項)，也可以是 表格 形式。 7. 選項按鈕：一次插入一個選項按鈕，有多個選項時要重複插入。在同一個表單將多個選項按鈕設定相同名稱即視為一個群組，使用者只能在群組中單選。例如表單中設定問題答案為「是」、「否」或是性別為「男」、「女」單選的選項。 8. 選項按鈕群組：一次可以插入一個選項按鈕群組，這些按鈕共用相同的名稱，顯示格式可以是 斷行符號，也可以是 表格 形式。 9. 清單/選單：可以在清單或是選單中建立選項供使用者選擇。選單 會用捲軸顯示彈出式選單，只允許使用者選取單一選項。清單 會顯示出條列式清單，若 高 值小於選項會自動顯示捲軸；若在 選取範圍 屬性核選 允許多重，則可允許按 Ctrl 鍵不放選取多個項目。 10. 跳頁選單：嚴格來說 跳頁選單 並不能算是表單元素，而是 Dreamweaver 特有的表單加上 JavaScript 跳頁的特效。它的呈現方式是插入一個選單項目，其中每個選項都可連結到指定文件或檔案或 URL (網址）。 11. 影像欄位：可在表單中插入影像欄位，用來取代 送出 按鈕，作成圖形式按鈕 (但無法做為 「重設表單」 或 「無」)。 12. 檔案欄位：會在文件中插入空白的文字欄位和 瀏覽 按鈕。讓使用者可以瀏覽找到硬碟上的檔案，並將檔案視為表單資料上傳。 13. 按鈕：會在表單內插入文字按鈕。按鈕會在被按時執行工作，如 「送出」或「重設」 表單。使用時可以在按鈕上加入自訂名稱或標籤文字，或者使用其中一個預先定義好的「送出」或「重設」標籤文字。 10.2 表單的加入與設定 介紹完表單加入的標準流程，並認識表單元件之後，以下的範例將實際製作一個實用的表單，在操作的過程中可以了解不同的表單元件設定與注意事項。 10.2.1 規劃表單內容 表單中所填入的資料是要送往處理的頁面或是程式，所以在插入表單前必須先規劃每個欄位內容做一個規劃，如此製作的過程中就不會手足無措了！在本章的範例中將要製作的是一個聯絡管理者的表單，其表單元件規劃如下： 10.2.2 加入表單 一、 加入表單區域 請進入「東京慢旅行」範例網站開啟 contact.htm 檔案，表單設定的第一步必須要先規範表單區域，往後要加入的表單元件都必須放置在這個區域中。 二、 加入文字欄位 請將插入點放置在表單區域內，首先要加入輸入姓名的文字欄位。 三、 加入選項按鈕群組 將插入點移至「姓名」文字欄位的後方按 Enter 鍵移往下一行，接著要加入輸入性別的選項按鈕。因為性別的選項只能單選男或女二個選項，所以使用選項按鈕最符合需求。若不怕麻煩當然可以使用 選項按鈕 一一加入選項，這裡建議使用 選項按鈕群組一次設定完畢。 四、 加入清單/選單 將插入點移至「聯絡電話」文字欄位的後方按 Enter 鍵移往下一行，接著要加入選擇最喜歡的單元選項。這裡希望將所有單元的選項放置到一個下拉式的選單中，可以使用 清單/選單 中的選單。 五、 加入核取方塊群組 將插