CHAPTER 12 互動式網頁表單的設計
12-1 認識表單 瀏覽網站時，為了讓網頁觀眾留下自己的意見，少不了留言版和討論區的功能，另一個可以收集大家意見的就是網頁上的表單。透過特定資料的收集，讓網站設計人員可以更明確的掌握網頁觀眾的想法。
圖12-1 網頁中的表單
表單的用途 將問券的內容製作為表單就可以收集眾人的意見，更加掌握瀏覽網頁者的習性差異，來作為更新網站或是提供服務的參考。 網路購物、線上申請等服務，也都可以利用表單來達成。
互動式表單的需求 多數的表單是利用CGI和ASP等程式來進行網頁的互動。 將資料以電子郵件的方式傳送到自己的電子信箱中，則是較為常見且簡單的作法。
CGI程式 CGI(Common Gateway Interface ) 可以透過程式的處理，將瀏覽器所回應的資料，轉換為HTML格式再傳回電腦中。是目前應用相當廣的程式。 限制： CGI程式撰寫不易 伺服器主機不支援 不同Web Server所使用的程式並不相容
ASP程式 ASP(Active Server Pages)技術的運作方式看起來和CGI差不多，都是將瀏覽器所回傳的資料透過ASP所對應的Script程式轉換為HTML程式，再加以回傳到瀏覽器中。 優點： 撰寫環境較簡單 相容性高
事先規劃表單的內容 先想好要製作的表單之類型和內容，並且先設計表單的內容再動手製作表單，可以簡化製作表單的過程。
蒐集哪些意見 先設定好表單的目的再開始動手設計表單，才能達到自己的目的，並發揮表單的功能。 例如： 產品的滿意度 消費者的個人資料
適時的回饋 如果沒有誘因的話，多數的瀏覽者不會願意留下資料，而給予適時的回饋會有助於得到更多的回應。 個人的小型可以等到網站的人氣開始聚集之後，再來考慮使用表單。
12-2 表單的基本輸入設定 設計表單要利用<FORM></FORM>標籤，所有表單的內容，包括文字、使用者輸入的欄位等，都是放在這個標籤中。 同一個網頁中可以有多個表單，但表單中不能再有第二個表單。
簡易表單製作 輸入欄位大多是透過<INPUT>標籤來設定，隨著屬性和屬性值的不同，就會出現不同的輸入欄位。 常用屬性： TYPE NAME VALUE SIZE MEXLENGTH
文字方塊 在表單中輸入單行文字內容的欄位就是文字方塊。 設定的屬性為『TYPE=TEXT』，必須輸入SIZE才會出現大小相符的文字方塊。
按鈕 按鈕是用來輸出表單內容或重新填寫資料的必須物件。 送出按鈕的屬性設定為『TYPE=SUBMIT』，它不用設定NAME屬性，而初始值所設定的是按鈕上的文字。 重設按鈕的屬性設定為『TYPE=RESET』，它也不需要設定NAME屬性，而VALUE所設定的就是按鈕的名稱。
認識表單的資料類型 常見的表單欄位： 文字區域 選項按鈕 核選方塊 下拉式方塊
12-3 進階表單設定 底下介紹的幾個進階的表單設定，可以美化表單的內容。其次，由於不少人習慣使用表格來編排網頁，所以也可以將表單的內容放在表格中喔！
群組方塊 它可以將同一個群組的表單欄位放在同一個群組方塊中，讓表單的內容更為整齊。
密碼輸入欄 密碼的輸入欄位也是透過表單來完成，設定的屬性為『TYPE=PASSWORD』。
圖片 設定按鈕時可以使用自己所建立的圖檔作為按鈕圖。其設定的屬性為『TYPE=IMAGE』。
檔案上傳 檔案上傳欄位之後會自動加上「瀏覽」按鈕，讓使用者可以瀏覽要上傳的檔案，其屬性的設定為『type=file』。
設定表單文字的大小 表單中的文字是預設的大小，可以透過標籤來進行設定，設定的屬性為STYLE=FONT-SIZE。
設定表單文字的色彩 STYLE屬性可以設定表單元件的背景色彩，設定的屬性值為『BACKGROUND-COLOR』，其後面還要加上色彩的代碼。
進階表單範例
透過表格來排列表單 將表單的內容放在表格中，即可透過表格來排列表單的內容，並控制表單欄位的位置。 要將表單的內容加入表格的時候，必須將表單的語法放在<TR>和<TD>標籤中。
12-4 表單的處理工作 如果使用者無法將資料傳送給你，則表單也無法發揮功用。 12-4 表單的處理工作 如果使用者無法將資料傳送給你，則表單也無法發揮功用。 當瀏覽者輸入資料並按下送出按鈕後，資料會被送回WWW伺服器，再透過伺服器上的程式來處理這些資料。 表單資料可以用電子郵件來寄送。
表單處理方式的設定 <FORM>標籤的屬性： ACTION屬性 METHOD屬性 ENCTYPE屬性 以郵件方式寄出表單資料