第三篇
HTML教學
網頁研習室 第九節
網頁表單
 
網頁表單基本架構標籤
請注意:
Method 預設值,一般用於搜索引擎。
請注意:
大部份的表單,都使用此方法。
<Form Method="get"|"post" Action="URL" Enctype="Media Type"> 指示表單開始宣告,內含 4 個常用屬性
<5 Main Control Tags> 指示其內可分五個主要控制標籤 範例
</Form> 指示表單結束宣告
語   法   說   明
<Form> 的主要中文解釋為,表格、構成、成立之意思,在此譯成表單,結束標籤 </Form> 絕對不能省略。
屬性 Method 譯成方式(法),也就是傳遞資料給程式處理的方式,共有二種 "get"|"post" 屬性值。
使用屬性值 "get" 時,會先解碼附於 URL 後再傳至指定伺服器處理,資料長度限制在 256 個字元內
使用屬性值 "post" 時,可將資料本身成對的可變名稱值,傳入伺服器處理,資料無長度限制
屬性 Action 譯成動作,也就是指定程式存放的所在位置及檔案。
屬性值 "URL" 可使用相對路徑或絕相對路徑,一般都是指後端處理程式。
屬性 Enctype 譯成編碼,也就是指定瀏覽器對表單中的參數進行編碼的格式,共有三種屬性值 (格式)。
屬性值 "application/x-www-form-urlencoded" 一般都使用這個值,因為是預設值,所以也可以省略。
屬性值 "text/plain" 配合寄信表單 Action="Mailto" 使用
屬性值 "multipart/form-data" 配合檔案上傳 Type="file" 表單使用
屬性 Target 指網頁開啟的視窗位置,用法與超鏈結或分割視窗標籤差不多。
請先瞭解表單運作方式,後面我們會針對 <5 Main Control Tags> 五個主要控制標籤,來詳細逐一介紹。
請注意:
您必須要有後端程式及處理程式功能主機
才能練習程式設計與測試。
請注意:
計有兩個 CGI 檔案
ncgitest1.cgi 及 cgitest2.cgi
內含簡單修改教學,請用記事本打開即可瞭解
限本站教材或教學會員
<Form Method="get"|"post" Action="URL">
語   法   說   明
屬性值 "get" 中文可譯為獲得、運行、接通等意思,用於傳遞資料給後端程式做處理,一般用於搜索引擎。
使用環境變數 QUERY_STRING 取得,然後加在 URL 後面來傳遞資料。
簡單的說就是:將表單內容值以 Name1="Value1" & Name2="Value2" 的格式送給後端程式處理。
屬性值 "post" 中文可譯為郵政、郵局、登入等意思,用於傳遞資料給後端程式做處理,大都使用此方法。
經由標準輸入 STDIN 取得資料(其長度可由環境變數 CONTENT_LENGTH 得知)。
簡單的說就是:將表單內容值包裝後送給後端程式處理。
我做 2 個實際 CGI 程式範例給您比較這兩個值的差別,這樣會清楚些喔
範例 HTML標籤 <Form Name="theForm" Method="get" Action="/cgi-bin/study/cgitest1.cgi">
測試範例 進入查看顯示結果
本 "get" 表單送出後,請查看瀏覽器上方 URL 列,會顯示送出資料編碼過後的訊息。
本表單需連線到主機後端處理,為顧及安全,所以您無法收到測試信,並請勿連續測試,謝謝配合。
範例 HTML標籤 <Form Name="theForm" Method="post" Action="/cgi-bin/study/cgitest2.cgi">
測試範例 進入查看顯示結果
本 "post" 表單送出後,因轉變為可變名稱值,所以您看不到送出資料狀況,只能看到處理後的結果。
以上 2 個表單我們使用 Enctype="application/x-www-form-urlencoded" 的預設值,所以可不用設定。
本表單需連線到主機後端處理,為顧及安全,所以您無法收到測試信,並請勿連續測試,謝謝配合。
教材或教學會員教材 CD 片內,另附更詳盡的 GET 與 POST 的區別與優缺點介紹。
並可免費取得以上 2 隻 GET 與 POST 的 CGI 程式,存放於教材 study/03/09/cgi-bin/ 目錄內
使用 GET 與 POST 的區別與優缺點
您的網站也想有個互動程式寄信表單嗎?進入查看資料
你想免費試用多功能表單轉信系統?進入查看資料