插入文字栏位.ppt

第15章 互動表單製作 15-1　認識表單元件 15-2　插入表單元件 15-3　Spry 即時驗證表單 15-4　表單內容的傳送 15-1　認識表單元件 表單：用來建立表單的區域範圍。若未按「表單」鈕設定範圍，在選用表單元件時，也會自動加入。 文字欄位：多用在姓名、電話、地址、或密碼等之輸入。 隱藏欄位：插入隱藏式的表單欄位，瀏覽者不需看到的內容。 文字區域：可輸入多行文字，多為意見欄之使用。 核取方塊/ 群組：插入多選鈕，可做複選之用，或是插入多個選項。 選項按鈕/ 群組：可插入單選鈕，或是插入多個選項。 清單/ 選單：可做下拉的選擇，也可以同時顯現所有的選單。 跳頁選單：能連結到指定的網頁。 影像欄位：可插入影像，代替「送出」鈕的功能。 檔案欄位：能讓瀏覽者選擇電腦中的檔案，並作上傳的動作。 按鈕：可加入「送出」與「重設」鈕。 標籤標記：可為表單項目加上說明文字。 欄位集：能將相關的表單選項加上外框作為分類。 15-2　插入表單元件 建立表單區域範圍 插入文字欄位(1) 單行：多用於個人的姓名、身分證字號、電話、手機、電子郵件、或地址?等個人資料上。 插入文字欄位(2) 多行：多用在意見表達或留言之用，通常可輸入多行的文字內容，而瀏覽者填寫的文字內容若超過所設定的欄寬，它會自動折行。 插入文字欄位(3) 密碼：用來設定個人密碼或帳號之用，為了避免輸入過程中被他人得知，通常輸入後，它會以「*」或「●」來替代。 插入文字欄位(4) 也可以根據文字字數的多寡，來設定字元的寬度和最多可以輸入的字元數。如圖示： 插入文字欄位(5) 實際利用「插入」面板來學習「文字欄位」的插入，並透過屬性面板來設定屬性。 插入選項按鈕或選項按鈕群組 插入核取方塊或核取方塊群組 插入清單/ 選單(1) 清單和選單大都用在單選的選項上，不過，「清單」是將所有的選項列在同一欄位中，而「選單」則為下拉式的欄位。如圖示： 插入清單/ 選單(2) 如果各位從「屬性」面板上選擇以「清單」的類型呈現，那麼還可以設定欄位的高度。如圖示： 插入清單/ 選單(3) 屬性面板上如果有勾選「允許多重」的選項， 那麼瀏覽者可以透過「Ctrl」鍵來選取多個不相連的選項，「Shift」鍵可選取相連的選項。如圖示： 插入按鈕(1) 插入按鈕(2) 除了一般常用的「重設」與「送出」鈕外，如果需要製作其他的按鈕，只要在「屬性」面板中將「動作」設為「無」，並由「值」中輸入按鈕名稱，也就可以辦到喔！ 插入其它表單元件(1) 檔案欄位 插入其它表單元件(2) 影像按鈕 插入其它表單元件(3) 跳頁選單 插入其它表單元件(4) 欄位集 15-3　Spry 即時驗證表單 Spry 驗證項目 在Dreamweaver 裡，Spry 所提供的驗證項目包括文字欄位、文字區域、核取方塊、選取、密碼、選項按鈕群組等。這些也都放置在「插入」面板的「表單」類別中，如圖示： 加入Spry 驗證文字欄位 驗證時機設定 請開啟「屬性」面板，各位可以根據需求來選擇適合的驗證時機。 onBlur：當填寫資料者將滑鼠點選到其他欄位，或是在欄位之外按下滑鼠時，就進行欄位資料的驗證。 onChange：當填寫資料者變更欄位中的內容時，就進行驗證。 onSubmit：當填寫資料者按下「送出」鈕提交表單時，就進行資料的驗證。 15-4　表單內容的傳送 動作：設為「mailto: 電子郵件位置?subject= 郵件主旨」。 方法：Dreamweaver 提供「POST」和「GET」兩種方法， 通常都設為「POST」。 編碼類型：必需設為「text/plain」，才能以純文字的方式傳送資料。 本章結束 * * * * * * *