CHAPTER 12 互動式網頁表單的設計.

CHAPTER 12 互動式網頁表單的設計

認識表單瀏覽網站時，為了讓網頁觀眾留下自己的意見，少不了留言版和討論區的功能，另一個可以收集大家意見的就是網頁上的表單。透過特定資料的收集，讓網站設計人員可以更明確的掌握網頁觀眾的想法。

圖網頁中的表單

表單的用途將問券的內容製作為表單就可以收集眾人的意見，更加掌握瀏覽網頁者的習性差異，來作為更新網站或是提供服務的參考。
網路購物、線上申請等服務，也都可以利用表單來達成。

互動式表單的需求多數的表單是利用CGI和ASP等程式來進行網頁的互動。
將資料以電子郵件的方式傳送到自己的電子信箱中，則是較為常見且簡單的作法。

CGI程式 CGI(Common Gateway Interface ) 可以透過程式的處理，將瀏覽器所回應的資料，轉換為HTML格式再傳回電腦中。是目前應用相當廣的程式。限制： CGI程式撰寫不易伺服器主機不支援不同Web Server所使用的程式並不相容

ASP程式 ASP(Active Server Pages)技術的運作方式看起來和CGI差不多，都是將瀏覽器所回傳的資料透過ASP所對應的Script程式轉換為HTML程式，再加以回傳到瀏覽器中。優點：撰寫環境較簡單相容性高

事先規劃表單的內容先想好要製作的表單之類型和內容，並且先設計表單的內容再動手製作表單，可以簡化製作表單的過程。

蒐集哪些意見先設定好表單的目的再開始動手設計表單，才能達到自己的目的，並發揮表單的功能。例如：產品的滿意度消費者的個人資料

適時的回饋如果沒有誘因的話，多數的瀏覽者不會願意留下資料，而給予適時的回饋會有助於得到更多的回應。
個人的小型可以等到網站的人氣開始聚集之後，再來考慮使用表單。

表單的基本輸入設定設計表單要利用<FORM></FORM>標籤，所有表單的內容，包括文字、使用者輸入的欄位等，都是放在這個標籤中。同一個網頁中可以有多個表單，但表單中不能再有第二個表單。

簡易表單製作輸入欄位大多是透過<INPUT>標籤來設定，隨著屬性和屬性值的不同，就會出現不同的輸入欄位。常用屬性： TYPE
NAME VALUE SIZE MEXLENGTH

文字方塊在表單中輸入單行文字內容的欄位就是文字方塊。設定的屬性為『TYPE=TEXT』，必須輸入SIZE才會出現大小相符的文字方塊。

按鈕按鈕是用來輸出表單內容或重新填寫資料的必須物件。
送出按鈕的屬性設定為『TYPE=SUBMIT』，它不用設定NAME屬性，而初始值所設定的是按鈕上的文字。重設按鈕的屬性設定為『TYPE=RESET』，它也不需要設定NAME屬性，而VALUE所設定的就是按鈕的名稱。

認識表單的資料類型常見的表單欄位：文字區域選項按鈕核選方塊下拉式方塊

進階表單設定底下介紹的幾個進階的表單設定，可以美化表單的內容。其次，由於不少人習慣使用表格來編排網頁，所以也可以將表單的內容放在表格中喔！

群組方塊它可以將同一個群組的表單欄位放在同一個群組方塊中，讓表單的內容更為整齊。

密碼輸入欄密碼的輸入欄位也是透過表單來完成，設定的屬性為『TYPE=PASSWORD』。

圖片設定按鈕時可以使用自己所建立的圖檔作為按鈕圖。其設定的屬性為『TYPE=IMAGE』。

檔案上傳檔案上傳欄位之後會自動加上「瀏覽」按鈕，讓使用者可以瀏覽要上傳的檔案，其屬性的設定為『type=file』。

設定表單文字的大小表單中的文字是預設的大小，可以透過標籤來進行設定，設定的屬性為STYLE=FONT-SIZE。

設定表單文字的色彩 STYLE屬性可以設定表單元件的背景色彩，設定的屬性值為『BACKGROUND-COLOR』，其後面還要加上色彩的代碼。

進階表單範例

透過表格來排列表單將表單的內容放在表格中，即可透過表格來排列表單的內容，並控制表單欄位的位置。
要將表單的內容加入表格的時候，必須將表單的語法放在<TR>和<TD>標籤中。

12-4 表單的處理工作如果使用者無法將資料傳送給你，則表單也無法發揮功用。
表單的處理工作如果使用者無法將資料傳送給你，則表單也無法發揮功用。當瀏覽者輸入資料並按下送出按鈕後，資料會被送回WWW伺服器，再透過伺服器上的程式來處理這些資料。表單資料可以用電子郵件來寄送。

表單處理方式的設定 <FORM>標籤的屬性： ACTION屬性 METHOD屬性 ENCTYPE屬性以郵件方式寄出表單資料

Presentation on theme: "CHAPTER 12 互動式網頁表單的設計."— Presentation transcript: