表單是一個在網頁中常被用來和使用者溝通的工具。HTML中所有的表單內容都是放在</FORM>。。。</FORM>之中,例如:加入文字輸入欄位、輸入圓鈕或按鈕等等。表單的標記格式如:
<FROM Action="N1"
Method="N2" EncType="N3" Name="N4">
這個標記是用來宣告表單元素的,其中的四個屬性介紹如下:
Action:設定這個FORM元素的處理動作,N1普通為處理這個表單的CGI程式。如:
<FORM
Action="http://www.vtc.gov.tw/cgi-bin/test.exe"......
上述資料表示 Client 端的瀏覽器將資料傳送出去後,是由
Server 端的test.exe程式來處理。
Method:設定資料傳送的方式,你有兩種選擇,第一種是「GET」,處理方式為將表單內的資料加在URL之後,再將資料傳送出去,而Server
在接到資料後,會把資料存在QUERY-STRING 這個環境變數中,供
CGI 程式使用,這種方法雖然簡單,但缺點是資料不能超過 512
Bytes。第二種方法是「POST」,當使用者填完資料後,瀏覽器會將資料變成一個封包
(Packet) ,送到 Action 所指定的 URL 之下,如此一來,使突破了
512 Bytes的限制。
EncType:設定將要送出的資料進行編碼的的方式。
Name:給予這個表單一個名稱,將來在程式應用(如JavaScript的設計時)才能指定特定的表單元件。
大多數的表單輸入欄位可用標籤<INPUT TYPE="欄位格式"
NAME="欄位名稱 VALUE="初始值"
ALIGN="對齊方式">來表示,它宣告了一個接受輸入的標記,使用瀏覽器可以接受使用者所欲傳送出的資料,範例如下:
<FORM METHOD="POST" ACTION="Mailto:xxx@vv.bb.nn.mm"
>
請輸入你的名字:
<INPUT TYPE="text" NAME="username"><br>
請輸入你的密碼:
<INPUT TYPE="password" NAME="password"><br>
<INPUT TYPE="submit" NAME="Submit_Button" VALUE="送出">
<INPUT TYPE="reset" NAME="Reset_Button" VALUE="重設">
</FORM>
|
顯示結果如下:
上述的範例解釋如下:
標籤<FORM>中的ACTION屬性可以設計此表單的處理程式,一般格式如下:
ACTION="http://www.vtc.gov.tw/cgi-bin/manag.asp",上例以電子郵件來處理處例表單。屬性METHOD設定表單資料傳遞的方式,有GET及POST兩種方式。
標籤<INPUT TYPE=text NAME=username SIZE=10 MAXLENGTH=20>會在表單中出現一個文字輸入欄位,讓使用者輸入文字或是數字,而標籤的名稱(NAME)為name,文字欄位的顯示長度(SIZE)為10個字元寬,最多(MAXLENGTH)可輸入20個字元。
標籤<INPUT TYPE=passowrd NAME=password SIZE=10 MAXLENGTH=20>同樣會在表單中出現一個文字輸入欄位,讓使用者輸入文字或是數字,但輸入文字後,畫面顯示為*。標籤的名稱為password,文字欄位的顯示長度為10個字元寬,最多可輸入20個字元。
標籤<TYPE="SUBMIT" NAME="Submit_Button"
VALUE="送出">顯示一個提送表單(SUBMIT)的按鈕,按鈕的名稱為"按鈕",顯示在按鈕上的文字為送出。
標籤<TYPE="RESET" NAME="Reset_Button" VALUE="重設">顯示一個重新設定(RESET)表單資料的按鈕,按鈕的名稱為"按鈕",顯示在按鈕上的文字為重設。
這是一個可以利用電子郵件送出訊息的表單,你可以將
ACTION 部份的 E-mail
改成你的信箱來測試,一定要測試,否則你不了解下面的內容。
如果你設計了如同以上的表單,當你利用 OutLook來接收信件時,你會收到一封主旨為『從
Microsoft Internet Explorer
公告表格』的信件,但它存成附件的形式,你可以用記事本來開啟,如果使用者輸入英文,That's
OK,但如果是輸入中文,你會看到如以下的亂碼:
username=%BEG%B3%D5%A4%B8&password=sdfsdfsd&Submit_Bottom=%B0e%A5X
你可以將上面的表單的語法改成:<FORM METHOD="POST"
enctype="text/plain" ACTION="Mailto:xxx@vv.bb.nn.mm?subject=網友來函"
> 就可以直接在OutLook中直接看到信件的內容了。