建立網站基礎

第六篇
如何有效及完整學會網頁表單製作

適合程度: 初學者 一般程度 進階者 以上均宜
壹、報導前言:
在互動式網頁中最重要的 HTML 標籤就是(Form)表單,不論你使用任何網頁程式語言,都必需先要搞懂表單(Form)標籤。
學會表單(Form)標籤並不會太難,只要觀念清楚,用任何編輯器都難不倒你,大多數人碰上比較困難的是程式語言部份。
學習網頁製作脫離不了,網頁 HTML 語法 + 網頁美工 + 程式語言,想要在這個領域達到一定程度,以上三者缺一不可。
給本報初學者建議:如果你要想輕鬆使用(Form)表單各種功能,請務必先學會基本 HTML 語法功力及一種網頁程式語言。
希望本篇報導能重新帶領網友快速有效的複習表單(Form)標籤,並適切引導初學者如何使用網程式語言與選用程式主機。
本報資料內容十分豐富,HTML 教學 + 四期電子報,你絕對不可能在短期內瀏覽完所有相關的資料,為此特別重新整理。
如果你對於學習程式語言上有所困難?最後面我們也提供簡易的學習方式與替代方案,目的就希望你能輕鬆的學習下去。

貳、基本架構:
掌握網頁表單基本架構,你就已學會一半的表單標籤。
表單基本架構:<Form ... ><5 Main Control Tags></Form>,其內可分五個主要控制標籤。
五個主要控制標籤如下:
一、輸入型表單:語法 <Input ... >,這是使用最多的一種標籤,其內共有 10 個主要標籤與屬性,不需結束標籤。
二、選擇型表單:語法 <Select ...>,如果你有單一 (Raido) 選項與多重 (CheckBox) 選項需求時,就可使用這組標籤。
三、區塊型表單:語法 <TextArea ...>,希望提供訪客有較大的區域,可填寫更多文字資料時使用。
四、圖片按鈕表單:語法 <Button ...><Img Src="URL"></Button>,用於想使用圖檔來美化表單的按鈕時。
五、MailTo 表單:語法 <Form Action="MailTo:yourname@yourmail.com">,使用瀏覽器內設寄信程式,替代伺服端處理程式。

學習注意事項:
同一個網頁內,如需使用 2 個以上 (Form) 表單時,要避免產生錯誤 (不合法) 的巢狀包覆狀況 Go
基本上輸入型 <Input ... > 標籤,Type="指定欄位型式"及 Name="資料欄位名稱"為必要標籤與屬性,絕對不能省略。
表單標籤很多,建議不用背他,但一定要知道他的功用與位置,需要用時到網頁研習室 HTML 教學網站來找語法用套就行。

更多詳細教學與範例,請詳閱網頁研習室【HTML教學】C0309 - 網頁表單 Go
本項相關報導資料,請參考本站資源 Go


參、如何運作:
互動表單是網頁與伺服器溝通的橋樑,我們透過互動表單及網頁程式語言,將訪客的各種信息進行傳遞、編譯、交換與呈現。
網頁架構中的表單處理,可以分為客戶端 (Client) 和伺服端 (Server) 兩個層面:
客戶端 (Client) 處理:運用各種 Script 語言,簡單的在客戶端先行處理輸入的資料。
譬如:驗證輸入資料是否正確?
伺服端 (Server) 處理:將訪客輸入的資料藉由 Action 傳送到程式伺服器。
譬如:處理 CGI 與 PHP 的 Linux 主機或 ASP 的 Windows主機。

程式表單運作方式示意圖: Go
本項相關報導資料,請參考本站資源 Go


肆、錯誤觀念:
HTML 標籤中有一個 Mailto 標籤,不懂網頁程式語言者大都採用這個方式處理表單傳送工作,這是一件非常錯誤的做法。
幾乎所有瀏覽器都支援 Mailto 標籤,遺憾的是所有客戶端都必須自己先完成電子郵件軟體設定,否則無法使用寄信功能。
而且 IE 瀏覽器與其他廠牌的覽器運作過程也略有不同,我看到很多商務網站使用 Mailto 標籤來做客服聯繫,真的很糟糕。
據調查有一半以上網友使用免費信箱,且大多數免費信箱都不支援 POP3 收信,所以就無法(不懂的)設定 Outlook 等收信軟體。
採用 Mailto 呼叫 Outlook Express 運作時,有些瀏覽器或不同版本會將 8 bits 的中文會變成 7 bit,寄回的資料便會是亂碼。
網站使用 Mailto 標籤,你將失去 80% 的客源,請利用這次機會,好好學會一種網頁程式語言,提升你的網站互動功能。

使用 Mailto 注意事項與缺點分析: Go
本項相關報導資料,請參考本站資源 Go


伍、選用程式:
網站想要能有更好的製作或服務水準,適度的採用聯絡我們、留言版、討論版等互等動程式功能,絕對有助於網站價值的提升。
由於網際網路的發達,出現各種免費或付費的互動程式平台,讓那些無法寫程式的站長們,也能輕鬆擁有,缺點就是不易整合。
目前市面上常見之網頁設計程式語言有 Perl、PHP、Asp、Asp.Net…等等,每種程式語言都可以製做出您想要的各種系統功能。
至於網站要選擇那一種程式語言比較好,基本上是取決你本身的專業或偏好,以及所使用的網站空間是屬於什麼作業系統平台。
如果網站只會用到單純的 HTML 碼或 Flash 動畫,或簡易的 JavaScript + DHHTML 客戶端程式語言,就無需後端式的程式語言。

本項相關報導資料,請參考本站資源 Go


陸、選用主機:
網站平台指的就是放置網站的伺服器主機,提供網站運作的作業系統及環境,網路上常見的作業系統為 Linux 及 Windows 兩種。
每種平台都有最適合的程式語言,如果你的網站內容是單純的 HTML 或 Flash 動畫網頁,那麼使用那種平台並沒有什麼差別。
如果你的網站空間使用的是 Linux 平台的話,當然建議使用 Linux 專用的 Perl、MySQL 或 PHP 程式語言來進行開發。
如果你的網站空間使用的是微軟 Windows 平台,建議可使用同為微軟開發的 Asp 或 Asp.Net、Access 來進行製作。
一般能運作的程式語言的主機都很貴,如果你的網站內容只單純的 HTML 碼,沒必要為一個聯絡我們表單去租這樣主機。

本項相關報導資料,請參考本站資源 Go


柒、特殊技巧:
單純的 HTML 表單標籤很枯燥,沒有甚麼變化,特別蒐集一些網頁表單設計上比校常用的 JavaScript 及 CSS 等技巧給你參考。
不會設計表單?不想學習網頁程式語言?特別蒐集整理出,國外比較有名的八個線上建立表單服務(英文)網站給你參考。
除此之外,還有我自己製作的多功能表單轉信系統,可先免費試用五 ∼ 一個月,另外也整理一些相關教學資料給你參考。

進去看看


捌、本站資源:
這裡彙整網頁研習室 - HTML 教材及各期電子報有關於網頁表單製作等相關報導資料,讓你更方便瀏覽與學習。
特別提共兩隻 Method="Get" 與 Method="Post" 實際運作範例給你線上測試,讓你真正瞭解互動表單是如何運作。
除此之外,提供給你一個完整學習網頁 CGI 程式語言的機會,你可選專人指導或由我幫你修改、安裝、設定。

進去看看


玖、如何取得:

拾、結論與建議: