第三篇
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
>
五個主要控制標籤,來詳細逐一介紹。
請注意:
您必須要有後端程式及處理程式功能主機
才能練習程式設計與測試。
<
Form
Method
="
get
"|"
post
"
Action
="
URL
"
>
語 法 說 明
屬性值 "
get
" 中文可譯為獲得、運行、接通等意思,用於傳遞資料給後端程式做處理,一般用於搜索引擎。
使用環境變數 QUERY_STRING 取得,然後加在 URL 後面來傳遞資料。
簡單的說就是:將表單內容值以
Name1
="
Value1
" &
Name2
="
Value2
" 的格式送給後端程式處理。
屬性值 "
post
" 中文可譯為郵政、郵局、登入等意思,用於傳遞資料給後端程式做處理,大都使用此方法。
經由標準輸入 STDIN 取得資料(其長度可由環境變數 CONTENT_LENGTH 得知)。
簡單的說就是:將表單內容值包裝後送給後端程式處理。
我做 2 個實際 CGI 程式範例給您比較這兩個值的差別,這樣會清楚些喔
。
請注意:
計有兩個 CGI 檔案
ncgitest1.cgi 及 cgitest2.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 的區別與優缺點
。
您的網站也想有個互動程式寄信表單嗎?
你想免費試用多功能表單轉信系統?
五個主要控制標籤
輸入型表單
選擇型表單
區塊型表單
圖片按鈕表單
MailTo 表單