Html的表單基礎知識

f66666602

Html的表單基礎知識
組成Cgi程序的是兩部分，一部分是html頁面，就是用戶看到的東西。另一部分則是運行在
服務器上的程序。一般來說，我們先些html頁面，再些程序。所以我們的學習頁是這樣，先看看表單的寫法，再去學習CGI程序。
對於html的表單，有比較復雜和詳細的規定。但由於它們是屬於html標准裡的東西，所以我不打算詳細講解。最好是你自己找本書看看。

Html表單

<Form></Form>標記把輸入域組合起來,並且說明了表單提交的方式和地點.Form標簽有許多屬性,比如NAME等等.具體的屬性,將在使用的時候說明.

在FORM裡還有許多不同的標簽,正是它們組成了表單的各種成分.


<INPUT [TYPE=TEXT] NAME="TEXT-ID" [SIZE=NN] [MAXLENGTH=NN] [VALUE='DEFAULT TEXT']>
該語句在HTML裡產生一個文本標簽,[]裡表示該屬性是可選的.

<INPUT TYPE=SUBMIT [NAME='BUTTON-ID'][VALUE="BUTTON LABLE TEXT"]>
該語句產生一個提交按鍵,用於表單的提交.它提供一個發送表單的按紐,信息發向<FORM>標記裡 ACTION屬性裡給出的URL.根據表單方法(METHOD)指定的HTTP請求類型 提交信息.在以後我將詳細講解.

<INPUT TYPE=RESET[VALUE='BUTTON LABEL TEXT']>
具有TYPE=RESET屬性的INPUT將產生一個按鈕,它能重置表單各個域 的內容到初始狀態.

<INPUT TYPE=RADIO NAME="RADIO-SET -ID" vALUE="CHOICE-ID" [CHECKED]>
表單可以用此標記提示用戶從幾個選擇項裡作出選擇.麼個選擇項目都是一個單選按鈕它們具有相同的NAME值.在任何時候只要有一個被選中.此標記有一個VALUE屬性,如果它被選中,則發送表單時將以"RADIO-SET-ID=CHOICE-ID"的形式發送.


<INPUT TYPE=CHECKBOX NAME='BOX-SET-ID' VALUE='CHOICE-ID' [CHECKED]>
此標簽將產生一個'OFF'或'ON'的開關.它同RADIO相似,但是可以多選.當提交表單的時候如果一個復選框是選中的餓，那麼它的VALUE屬性作為BOX-SET-ID表單數據的值被提交.幾個擁有同樣NAME屬性的復選框為一組.它們用','分開的列表.

傳送方法
所謂方法是指調用CGI程序的途徑。事實上，要執行程序時，你用一種
方法向服務器提出請求，此請求定義了程序如何接受數據。 下面介紹
最常用的兩種方法：get和post
1.GET 當使用這種方法時，CGI程序從環境變量QUERY_STRING獲取數據。
QUERY_STRING 被稱為環境變量，就是這種環境變量把客戶端的數據傳
給服務器。為了解釋和執行 程序，CGI必須要分析（處理）此字符串。
當你想從服務器獲得數據並且不改變服務 器上的數據時，你應該選用GET。
但如果你的字符串長度超過了一定長度，那麼還是選用POST方法。

2.POST 使用POST方法時，WEB服務器通過stdin(標准輸入)，向CGI程序
傳送數據。服務器 在數據的最後沒有使用EOF字符標記，因此程序為了
正確的讀取stdin,必須使用CONTENT_LENGTH 。當你發送的數據將改變
Web服務器端的數據或者你想給CGI程序傳送的數據超過了1024 字節，
這是url的極限長度，你應該使用post方法。

3.實現方法：
上次講過html中的<Form>標簽，對於傳送數據方法的定義也在這個標簽
裡定義。 如下：

<form name="guyi's form" action="http://www.eyny.com/cgi/your.cgi" method=GET>
定義了一個以get方法傳送數據的form，它的服務端程序是http://www.eyny.com/cgi/your.cgi.
同樣的如下的定義將使用post方法。
<form method=post>

基本調試環境的建立：
我想不是每個閱讀教程的朋友有機會接觸到服務器之類的東西的。所以在接下去的
閱讀過程中沒有調試環境的朋友將會非常吃力。為了解決這個問題，我特別介紹一
種在 win95或nt上建立WEB SITE的方法，以便各位能很好的閱讀程序。不過本方法
內使用的軟件都比較大，如果你不是一個真正的網絡發燒友，或許你會放棄這個教
程。這個我也沒有辦法，要知道喜歡一樣東西總是要付出代價的。

1.win95&winnt的Server軟件：
首先我要各位弄清楚一個概念，所謂Sever只是指在一台電腦上安裝了一個特別的
軟件。該軟件可以提供internet web site服務。這台電腦不一定要是什麼特別好
的機 器，只要它能夠很好的運行Server軟件就可以了。比如我們的個人電腦就可
以承擔這個任務。 在Windows95下運行的server軟件不是很多，而且是屬於“業余
”的。就是說離真正的商業使用有很大的距離。這主要是windows95平台的局限，
比如很差的安全性，不穩定的內存分配系統，混亂的文件系統以及最差的進程管理。
不過這些不影響我們使用CGI程序，特別是一個人調試自己的程序，而不是放在
internet給數萬個人訪問。其代表是MS在windows OSR離提供的pws(person web
server)。你可以通過控制面版-->網絡-->服務-->Ms-->個人WEB服務器安裝它。不
過我希望你們最好還是不要使用這個東西，因為它對我們下面的課程沒有什麼幫助。
我曾試驗過用它來和我的perl程序相連，但很顯然不支持perl。雖然有消息說修改
注冊表可以解決這個問題，但我到現在還是沒有找到方法。
相對而言，Windows NT因為其定位的不同而可以提供較理想的操作平台。而且NT自
帶有IIS(Internet Information Server)。不過是2.0版的，如果你有IIS3.0就更好
了。到本文寫成的時候，IIS已經有了4.0版本。當然我相信不是所有人會去下載這
個東西，因為有 104M。
上面講了這麼多，實際上我要給各位推薦的是WebSite for win95&NT。就是說兩個
操作系統都可以使用它。現在的版本是2.1，有17M。顯然是一個很大的軟件，不過
正如我說的， 喜歡一樣東西是有代價的。你可以在網裡找
到這個程序。 WebSite支持winCGI，也支持perl寫的CGI程序。顯然這是一個好東西，
可以滿足我們的要求。雖然大了些，不過要是你能找到website 1.1的話也不錯，它
大概有4M左右。不過我在網上從沒發現有下載的地方。

2.Perl for win32
Perl,讓人激動的名字。我想再也找不到一個編程語言可以如此出色的完成基本CGI程
序的開發了。我感謝那些為perl移植做出貢獻的朋友們，是他們讓我們可以在win平
台上使用如此如此強大的Unix工具。 你可以在perl的主頁上找到perl for win32版本，
當前版本是5.02。你也可以在web找到perl for win32版
本。大概是2.5M。
3.VB
VB是我們寫WinCGI程序最好的選擇。我推薦各位使用vb4。不是因為vb5不好，只是在 Internet上支持它的文檔和免費代碼太少了。
4.C&C++
這個教程裡幾乎沒有用C&C++寫的代碼，因為它更適合高級程序員而不是我們這些業余選手。不過你要是一定使用它我也沒有意見。


安裝
好了，我們開始建立基本環境。就是說我們要在自己的機器上建立一個WEB SITE!
首先安裝Website。按照它標准的安裝界面，你可以輕松的完成這個工作。缺省
情況下它將被安裝到c:\website下。我提醒各位注意這幾個目錄：

cgi-shl:這個是基本的cgi目錄，也就是各位朝思暮想的地方！
cgi-win:這個cgi目錄裡放的是WinCgi程序。 其他的各位自己研究吧。

好了，在裝完Website後請確認它已經運行。在狀態攔地右下角會有一個齒輪地圖標，
它表示website正在運行。接下去請打開你地瀏覽器，在url輸入你機器的ip地址，
如果沒有 ip，請輸入:127.0.0.1。注意，做這些動作的時候，最好請你使用netscape，
而且你不必連上網絡！ 如果一切順利的話，你將看到website的標記，那證明你已經
成功了！
接下去我們安裝perl。 下載後的perl是一個自解開文件，它會問你安裝到哪個目錄。
缺省是c:\perl，接著它展開並產生幾個自目錄。在安裝結束的時候，它會修改autoexec.bat，把c:\perl\bin加如 path，請一定要這麼做，道理我會在下面解釋。
最後請隨便寫一個以.cgi或.pl結尾的文本文件。直接雙擊它，並為它加上關聯。
.pl或 .cgi的關聯文件是c:\perl\bin\perl.exe。這步很重要，不然你無法完成接下去
的學習。 那麼為什麼我們要加路徑呢？因為perl是一種文本解釋型語言，就是說它沒
有編譯的過程， 只有在運行的時候解釋。解釋一句運行一句。所以我們必須讓系統知
道perl.exe在哪裡。

測試
最後我們進行一個測試。請把下面的兩個程序下載並運行它們：
1.html文件：這是測試程序的客戶端內容，請以test.htm保存它。並把它放在c:\website\hotdocs\ 下，那是你的website缺省的根目錄。
test.htm:


<html>
<title>你的第一個perl測試程序</title>
<body>
<h1>你的第一個perl測試程序<h1><br>
<h2>win 平台的環境變量測試</h2><br>
<form method="get" acton="http://127.0.0.1/cgi-shl/env.pl">
<input type=submit value="查看CGI環境變量">
</form>
</body>
</html>

2.Perl文件：請使用任意一個文本編輯器，輸入後以env.pl保存到
c:\website\cgi-shl\下。

#! perl

print"Content-type:text/html\n\n";
print"<title>Windows環境變量</title>";
print"<body>恭喜你的website已經成功<br>";
foreach $key(sort keys %ENV){
print"$key=$ENV{$key}<br>"; }
PRINT"</BODY>";

在完成上面的工作後，請打開瀏覽器，輸入http://127.0.0.1/test.htm。
當然如果你的機器是以tcp/ip方式 連在局域網上，請把127.0.0.1改成你
的ip地址（還有test.htm裡的。）然後按下那個鍵，當你的瀏覽器去向另
一個 頁面的時候，今天的任務就算是完成了。

和服務器有關環境變量
服務器與CGI程序交換信息的協作方式是通過環境變量實現的。無論什麼請求，CGI程序總能在特定位置找到某些信息。無論環境變量怎樣定義，總有一些變量有著特定含義。
環境變量是一寫保存用戶信息的內存區。例如，所有的機器都有一個PATH環境變量，當在當前目錄找布道文件時就要查找PATH變量。當服務器收到一個請求後，它首先要收集它能得到的所有相關信息，並把它放入內存。那麼，服務器要收集什麼信息呢？

關於服務器自身的詳細信息
關於用戶的信息信息
關於用戶請求的信息

服務器不知道CGI程序到底需要那些信息，所以它把這些信息一起收集，那麼如果有什麼重要的東西就不會遺漏了。
為了向你展示服務器收集那些環境變量，在上一期的教程裡我已經為各位寫了一個程序，該程序將幾乎所有的信息都反映在了瀏覽器裡。所以在進一步學習變量的時候，請首先把程序調試好。

環境變量
1.與服務器相關的環境變量

GATEWAY_INTERFACE 服務器遵守的CGI版本
SERVER_NAME 服務器的IP或名字
SERVER_PORT 主機的端口號
SERVER_SOFTWARE 服務器軟件的名字

與客戶機相關的環境變量
服務器了解你的CGI程序，但它一定不知道你的客戶機環境。正因為如此，同客戶機有關的變量才是最重要的。因為它涉及到你的瀏覽器等等。
ACCEPT 例出能被次請求接受的應答方式
ACCEPT_ENCODING 列出客戶機支持的編碼方式
ACCEPT_LANGUAGE 表明客戶機可接受語言的ISO代碼
AUTORIZATION 表明被證實了的用戶
FORM 列出客戶機的EMAIL地址
IF_MODIFIED_SINGCE 當用get方式請求並且只有當文檔比指定日期更早時才返回數據
PRAGMA 設定將來要用到的服務器代理
REFFERER 指出連接到當前文檔的文檔的URL
USER_AGENT 標明客戶使用的軟件

與請求相關的環境變量
每次服務器受到的請求都不可能是一樣的。這意味著有許多CGI程序必須注意的信息。這些與請求相關的信息包含有用戶調用的信息，用戶如何發送請求，以及作為請求的一部分傳送了多少（什麼）信息。這些對你的程序來說是非常重要的，因此我們將化些時間詳細地討論一下其中的一些變量。特別是下面寫出的三個變量。這三個變量相當重要。
REQUEST_METHOD
QUERY_STRING
CONTENT_LENGTH
你必須熟悉這三個變量，因為它們用來表示數據是如何送到CGI程序的；然後你所要要做的事情就是在這三個變量裡取出數據，進行下一步的編程。其他的一些變量的用處很多，你可以了解你的競爭對手正在調用你的程序，你可以辨別用戶是否注冊，或者你可以設置連接到你的CGI程序以便要求附加路徑信息包含在請求之中----因此你不必猜測你的用戶正在你的服務器的哪個頁面上。
AUTH_TYPE 服務器用的確認模式
CONTENT_FILE 含有CGI程序的數據文件
CONTENT_LENGTH POST請求中向標准輸入（STDIN）發送的字節數
CONTENT_TYPE 被發送數據的類型
PATH_INFO CGI程序的附加路徑
PATH_TRANSLATED PATH_INFO對應的絕對路徑
QUERY_STRING 傳送給CGI程序的URL的問號（？）之後的那一部分
REMOTE_ADDR 最終用戶的IP或主機名
REMOTE_USER 如果用戶合法，則是用戶的組名
REQUEST_LINE 發送給服務器的完整URL請求
REQUEST_METHOD 作為HTTP的一部分請求而傳送數據的方法，比如get。
SCRPT_NAME 運行的腳本名字

一個實例：調查表
對於本周的程序----選票程序，我不想多說什麼。我只是想在本程序內教給大家如何使用perl語言或C語言如何處理字符串的實例。讓我們先看看代碼：
頁面文件--pote.html
<HTML>
<TITLE>投票程序</TITLE>
<h1>投票程序</h1>
<FORM METHOD="post" ACTION="/cgi-bin/vote.pl">
一.你喜歡誰?<br>
<input type="radio" name="idol" value="A" checked>張德陪<br>
<input type="radio" name="idol" value="B">阿加西<br>
<input type="radio" name="idol" value="C">桑普拉斯<br>
<input type="radio" name="idol" value="D">貝克<br>
<input type="radio" name="idol" value="D">顧懿<br>
<input type="submit" value="執行">
<input type="reset" value="取消">
</form>
查詢<a href="/cgi-bin/vote.pl?command=view">選舉投票結果</a>
</html>
CGI程序：--vote.pl
#!perl
print"Content-type:text/html\n\n";
print"<titel>投票系統</title>";

if($ENV{'REQUEST_METHOD'}eq"POST"){
read(STDIN,$buffer,$ENV{'CONTENT_LENGTH'});
}elsif($ENV{'REQUEST_METHOD'}eq"GET"){
$buffer=$ENV{'QUERY_STIRNG'};
}

@pairs=split(/&/,$buffer);
foreach $pair(@pairs){
($name,$value)=split(/=/,$pair);
$value=~tr/+//;
$value=~s/%([a-f A-F 0-9][a-f A-f 0-9])/pack("C",hex($1))/eg;
$FORM{$name}=$value;}

$filename="/vote.dat";
%NAME=("A","張德陪","B","阿加西","C","桑普拉斯","D","貝克","E","顧懿");

if($ENV{'REQUEST_METHOD'}eq"POST"){
print"Content-type:text/html\n\n";
print"<titel>投票系統</title>";
print"<h1>投票系統的例子</h1>";
open(FILE,"<$filename")||die"不能打開文件，請和管理員聯系\n";

for($i=0;$i<2;$i++){
$file[$i]=<FILE>;
$file[$i]=~s/\n$//;
}
close(FILE);

@item=split(/:/,$file[0]);
@vote=split(/:/,$file[1]);

for($i=0;$i<@item;$i++){
if($FORM{'idol'}eq$item[$i]){
$vote[$i]++;
last;
}
}
open(FILE,">filename")||die"Can't Open the file";
$item=join(":",@item);
$vote=join(":",@vote);
pirnt FILE "$item\n";
print FILE "$vote\n";

close (FILE);

print"<h2>您是投票給$NAME{$FORM{'idol'}},謝謝您的選票！<h2>";
print"查詢<a href=\"/cgi-bin/vote.pl?command=viem\">投票結果系統</a>";

}

if($FORM{'command'}eq"view"){
print "HTTP/1.0 200\n";
print "Content-type:text/html\n\n";
print"<title>投票結果</title>";
print"<h1>投票結果</h1>";
open (FILE,"$filename")||die"文件打開錯誤";

for($i=0;$i<2;$i++){
$file[$i]=<FILE>;
$file[$i]=~s/\n$//;
}
close(FILE);

@item=split(/:/,$file[0]);
@vote=split(/:/,$file[1]);

print"<table border=1>";

for($i=0;$i<@item;$i++){
print"<tr><td>姓名</td><td>$NAME{$item[$i]}</td><td>票數</td>,td>$vote[$i]</td><tr>";

}
print "</table>";
}

這個程序是要各位學習Perl的分解字符串的功能。在Perl中，字符串操作是非常簡單的。
我對幾句重要語句做一個分析：
if($ENV{'REQUEST_METHOD'}eq"POST"){
read(STDIN,$buffer,$ENV{'CONTENT_LENGTH'});
}elsif($ENV{'REQUEST_METHOD'}eq"GET"){
$buffer=$ENV{'QUERY_STIRNG'};
}
這是一個非常常見的功能塊，幾乎所有的CGI程序都會用到它。它判斷頁面使用何種方式提交變量。如果是post，就從STDIN裡把變量讀出，存到變量buffer裡。注意在perl裡，變量是用$開頭的。而$ENV{'CONTENT_LENGTH'}則是讀出該變量的長度，請注意CONTENT_LENGTH
是一個環境變量。第二個if則處理get情況，在get情況下，頁面提交的信息是存放在環境變量QUERY_STIRNG中的。所以$buffer也就是頁面提交的信息。環境變量REQUEST_METHOD表示方式，它的值是一個字符串，前面加上$ENV則表示讀出該變量的值。

@pairs=split(/&/,$buffer);
foreach $pair(@pairs){
($name,$value)=split(/=/,$pair);
$value=~tr/+//;
$value=~s/%([a-f A-F 0-9][a-f A-f 0-9])/pack("C",hex($1))/eg;
$FORM{$name}=$value;}
以上功能塊是一個分解過程。頁面信息的提交往往是以“名稱=值”的形式，比如本例子中就是以“idol=顧懿”這樣的形式提交的，所以我們要去掉字符串中的"="等等信息，但同時要保留“idol”和"顧懿"之間的對應關系。$FORM{$name}=$value做到這一點，這是一個關聯數組。具體其中的語法，請各位自行查書。接下來的就是文件的操作，但那已經不是本課的重點。所以就不多說了。



[ 本帖最後由 f66666602 於 2007-7-31 21:10 編輯 ]