?
表單標記
<FORM> <INPUT>
INPUT 的種類： Text, Radio,Checkbox, Password, Submit/Reset, Image, File, Hidden, Button。
<SELECT> <OPTION>
<TEXTAREA>?
■ 引子
表單的用處很多，于網(wǎng)上無處不見，當然是配合 CGI 使用為佳，所以饋下有意使用或?qū)W 習(xí) CGI 的話，表單設(shè)計見必需的，這一節(jié)介紹的標記不多，但其參數(shù)變化很多。一份表單的基本架構(gòu)是：在<FORM> 標記 的包圍下加上一種或以上的表單輸入方式及一個或以上的按鍵。
■<FORM> <INPUT>：
<FORM>稱為表單標記，用以宣告此為表單模式，屬于一個容器標記，表示其它表單標記需要在它的包圍中才有效，<INPUT>便是其中的一個，用以設(shè)定各種輸入資料的方法。它 是一個空標記。
<FORM> 的參數(shù)設(shè)定（常用）：
?
例如： <form action=”http://your.isp.com/cgi-local/example.cgi” method=”POST”>
● action=”http://your.isp.com/cgi-local/example.cgi”
表單通常是與 CGI 配合使用的，參數(shù) action 便是用以指明該 CGI 程式的位置，這 樣此表單所填的資料才能正確傳給 CGI 作處理。若饋下沒有 CGI 以進行測試，可 設(shè)定此參數(shù)為ACTION=”mailto:your@email.com” 那樣該表單所填的資料將會寄至 此電郵地址（紅色部分）。
?
● method=”POST”
傳送資料給 CGI 的的方式，可選值為 POST, GET。你只需記住POST容許傳送大量資料，但 GET則只接受低于 1K 的資 料，所以你若看過別人的表單原始碼的話，你會發(fā)現(xiàn)申請表單用的是POST 而搜 找器用的是 GET。
<INPUT> 的參數(shù)設(shè)定（常用）：
由于其第一個參數(shù) type 己有很多的選擇，而不同的選擇表示出不同的輸入方式，且其它 參數(shù)亦因此而異，故以下將獨立介紹不同輸入方式及其它參數(shù)設(shè)定。
● type=”Text”
可選值為 Text, Radio,Checkbox, Password, Submit/Reset, Image, File, Hidden, Button。
輸入方式一： Text （單行文字盒）
例如<input type=”Text” name=”age” value=”20″ align=”MIDDLE” size=”2″ maxlength=”255″>
● type=”Text”
輸入方式為 Text，能產(chǎn)生一單行文字盒，上限為 255 字元。
● name=”age”
此一單行文字盒名稱，這是最重要的一個，方便 CGI 辨認由表單傳來的資料，雖 說可隨便命名，但通常 CGI 程式中都有指定名稱，若轉(zhuǎn)用其它名稱便需要修改該 CGI 程式了，名稱可為沒空白沒特別符號的英文或數(shù)字，有大小寫的分別，可以 寫成Your_Age，若有訪客于此表單此一文字盒填入 40 的話，那末傳給 CGI 的字 串便是 Your_Age=40。
● value=”20″
此一單行文字盒內(nèi)定值。若不填寫則文字盒是空白的，等待訪客親自鍵入，若 value=”20″ 的話， 20 便會出現(xiàn)在文字盒中，當然訪客可以修改之。
●align=”MIDDLE”
可選值：top, middle, bottom, left, right, texttop, baseline, absmiddle. 沒太大有處。
● size=”2″
此一單行文字盒顯示的長度，若饋下是采用 Big5 編碼的中文網(wǎng)頁便要小心，同 size 的文字盒 NC 會顯示得比 IE 狻長。
● maxlength=”255″
此一單行文字盒可輸入字元的上限，為方便編排資料或避免錯輸入等，宜設(shè)定上 限，例如輸入電話或 ICQ UIN 的可設(shè)為 8，年齡為 2 等。
例子：
始碼 <form action=”http://your.isp.com/cgi-local/example.cgi” method=”POST”>
請?zhí)钊腚娫捥柎a：<input type=”Text” name=”phone” value=”” size=”10″ maxlength=”8″>
</form> 顯示結(jié)果
?
輸入方式二： Radio （單一選擇）
例如：<input type=”Radio” name=”gender” value=”female” align=”MIDDLE” checked>
● type=”Radio”
輸入方式為 Radio，能產(chǎn)生一單一選擇，以供點選。
?
● name=”gender”
此一 Radio 名稱，參考 Text 部分的說明。
● value=”female”
內(nèi)定值。每一個 radio 必須及僅有一個 value，通常有同時采用兩個或以上同 name 不同 value 的 Radio 輸入方式，可讓使用使任選其一。
● align=”MIDDLE”
可選值：top, middle, bottom, left, right, texttop, baseline, absmiddle。
● checked
設(shè)該 Radio 為內(nèi)定被選。同 name 的各個 Radio 中只能有一個使用，或全不使用這 參數(shù)。
例子：
| 原始碼 | <form action=”http://your.isp.com/cgi-local/example.cgi” method=”POST”> 請選性別： <input type=”Radio” name=”gender” value=”Female”>女性 <input type=”Radio” name=”gender” value=”Male” checked>男性 <br>你喜歡嗎： <input type=”Radio” name=”like” value=”Yes”>喜歡 <input type=”Radio” name=”like” value=”No”>不喜歡 <input type=”Radio” name=”like” value=”NotSure”>不肯定 </form> |
| 顯示結(jié)果 |
?
?
#p#副標題#e#
?
輸入方式三： Checkbox （確認盒）
例如：<input type=”Checkbox” name=”idol” value=”Leon” align=”RIGHT” checked>
● type=”Checkbox”
輸入方式為 Checkbox，能產(chǎn)生一確認盒，以供剔選。
● name=”idol”
此一 Checkbox 名稱，參考 Text 部分的說明。
● value=”Leon”
內(nèi)定值。每一個 Checkbox 必須及僅有一個 value，當被剔選時這值便會傳及 CGI，例如所傳字串 idol=Leon 。
● align=”RIGHT”
可選值：top, middle, bottom, left, right, texttop, baseline, absmiddle。
?
● checked
設(shè)該 Checkbox 為內(nèi)定被選。每個 Checkbox 都是獨立的，所以每一個都可使用這 參數(shù)，不像 Radio。
例子：
| 原始碼 | <form action=”http://your.isp.com/cgi-local/example.cgi” method=”POST”> 你喜歡以下那些明星： <br><input type=”Checkbox” name=”idol01″ value=”Leon”>黎明 <input type=”Checkbox” name=”idol02″ value=”Noriko_Sagai”>酒井法子 <input type=”Checkbox” name=”idol03″ value=”Leon”>鄭秀文 <input type=”Checkbox” name=”idol04″ value=”BonJovi” checked>BonJovi </form> |
| 顯示結(jié)果 |
輸入方式四： Password （密碼輸方盒）
例如：<input type=”Password” name=”pw” value=”999″ align=”MIDDLE” size=”5″ maxlength=”9″>
● Password 的其他參數(shù)和 Text 是完全相同的，請參考 Text 的介紹。
兩者作用不同，Password 所輸入的字元全以 * 號表示。
例子：
| 原始碼 | <form action=”http://your.isp.com/cgi-local/example.cgi” method=”POST”> 請輸入姓名：<input type=”Text” name=”name”> <br>請輸入密碼：<input type=”Password” name=”pw” maxlength=”9″> </form> |
| 顯示結(jié)果 |
?
輸入方式五： Submit （傳送鍵）及 Reset （清除鍵）
這是表單上重要的兩個按鍵，兩者所附帶的參數(shù)相同，但用處不大。
例如：<input type=”Submit” name=”other_funtion” value=”確定” align=”MIDDLE”>
<input type=”Reset” value=”清除” align=”MIDDLE”>
● type=”Submit”
設(shè)定輸入方式為 Submit 或 Reset。
● name=”other_funtion”
Submit 的功能隨 name 的不同而不同，須和 CGI 配合。若你只需要普通的傳送 鍵，則是其內(nèi)定，不必用此參數(shù)。
● value=”確定”
這個值不是輸給 CGI 的，而是顯示在按鍵上，可以不用，傳送鍵的內(nèi)定值為 Submit Query，清除鍵的內(nèi)定值為 Reset。
● align=”MIDDLE”
可選值：top, middle, bottom, left, right, texttop, baseline, absmiddle。
例子：
| 原始碼 | <form action=”http://your.isp.com/cgi-local/example.cgi” method=”POST”> <input type=”Submit”><input type=”Reset”> <br><input type=”Submit” value=” ? ? ? ? 確定 ? ? ? ? “><input type=”Reset” value=”清除”> </form> |
| 顯示結(jié)果 |
輸入方式六： Image （圖片按鍵）
這通常用以取代 Submit 及 Reset 兩個按鍵，因為由程式產(chǎn)生的按鍵并不漂亮，這 Image 參 數(shù)便容許你采用自已制造的按鍵。
例如：<input type=”Image” name=”submit” align=”BOTTOM” src=”ex_icon.gif”>
● type=”Image”
輸入方式為 Image。
● name=”submit”
所要代表的按鍵，可以是 submit, reset, 或其它。
● align=”BOTTOM”
可選值：top, middle, bottom, left, right, texttop, baseline, absmiddle。
● src=”ex_icon.gif”
按鍵圖片來源，若此圖片文件不與該 html 文件在同一目錄下，請加上相對或絕對途徑。
| 原始碼 | <form action=”http://your.isp.com/cgi-local/example.cgi” method=”POST”> <input type=”Image” name=”submit” align=”BOTTOM” src=”ex_icon.gif”> </form> |
| 顯示結(jié)果 |
?
輸入方式七： File
例如：<input type=”File” name=”upload” align=”BOTTOM” size=”20″ maxlength=”100″ accept=”text/html”>
● input type=”File”
輸入方式為 Image。通常用以傳輸文件。
● name=”upload”
這文件傳輸?shù)拿Q，用以識別之用。
● align=”BOTTOM”
可選值：top, middle, bottom, left, right, texttop, baseline, absmiddle。
● size=”20″
所顯示文字盒的長度。
● maxlength=”100″
可輸入字元的上限。
● accept=”text/html”
所接受的文件類別，有二十六種選擇，但可不設(shè)定。
例子：
| 始碼 | <form action=”http://your.isp.com/cgi-local/example.cgi” method=”POST”> <type=”File” name=”upload” size=”30″ maxlength=”100″ accept=”text/html”> </form> |
| 顯示結(jié)果 |
輸入方式八： Hidden
例如：<input type=”Hidden” name=”ID” value=”6618″>
● type=”Hidden”
輸入方式為隱藏或內(nèi)定。它不會顯示任何輸入介面，而是一個內(nèi)定值隨表單一起 傳給 CGI，列如由 CGI 產(chǎn)生的會員號碼，或傳入可更改的參數(shù)以調(diào)整 CGI 而避免 修改 CGI 程式碼。
?● name=”ID”
這文件傳輸?shù)拿Q，用以識別之用。
● value=”6618″
內(nèi)定值，會以如 ID=6618 形式傳給 CGI。
例子： （”Hidden” 是不被顯示的，所以這處多放了一個 “Submit” 鍵，表示 Hidden 之內(nèi)定 值會隨 submit 鍵被按而傳給 CGI）
| 原始碼 | <form action=”http://your.isp.com/cgi-local/example.cgi” method=”POST”> <input type=”Hidden” name=”ID” value=”6618″> <input type=”Submit” value=”Submit”> </form> |
| 顯示結(jié)果 |
?
#p#副標題#e#
?
輸入方式九： Button
■ <SELECT> <OPTION> ：
例如：<input type=”Button” name=”useless” value=”Back”>
● type=”Button”
輸入方式為一般按鍵。常配合 Java Script 作為其啟動按鍵。
● name=”useless”
這文件傳輸?shù)拿Q，用處不大。
● value=”Back”
按鍵顯示名稱。
例子： 其中 onclick=”history.go( -1 );return true; 屬 JAVA 事件。
| 原始碼 | <form> <input type=”Button” value=”回前一頁” onclick=”history.go( -1 );return true;”> </form> |
| 顯示結(jié)果 |
■ <SELECT> <OPTION> ：
<SELECT>是卷動選單標記，每一選項皆由 <OPTION> 所標示，把它當作圍堵標記或空標 記使用都可以。
<SELECT> 的參數(shù)設(shè)定（常用）：
例如： <select name=”where” size=”6″ multiple>
● name=”where”
這卷動選單的名稱，作識別之用，將會傳及 CGI。
● size=”6″
這卷動選單的列數(shù)，即其高度，請自行修改。若使用此參數(shù)則不會有 Pop Up 效 果。
● multiple
令這卷動選單容許多重選擇。
<OPTION> 的參數(shù)設(shè)定（常用）：
?
例如： <option value=”tw” selected>
● value=”tw”
這選項的值，將會傳及 CGI。請自行修改，但不同選項必須有不同的值。
● selected
設(shè)該選項為內(nèi)定被選。一個單選卷動選單只能有一項或零可內(nèi)定被選。
例子一： （普通 POP UP 卷動選單）
| 原始碼 | <form action=”http://your.isp.com/cgi-local/example.cgi” method=”POST”> Where you com from? <select name=”where”> <option value=”hk”>Hong Kong</option> <option value=”tw” selected>Taiwan</option> <option value=”cn”>China</option> <option value=”us”>United States</option> <option value=”ca”>Canada</option> </select> </form> |
| 顯示結(jié)果 |
例子二： （容許多重選擇 的卷動選單）
?
例子三：（設(shè)定了 Size 的卷動選單）
| 原始碼 | <form action=”http://your.isp.com/cgi-local/example.cgi” method=”POST”> Where you com from? <select name=”where” size=”5″> <option value=”hk”>Hong Kong</option> <option value=”tw” selected>Taiwan</option> <option value=”cn”>China</option> <option value=”us”>United States</option> <option value=”ca”>Canada</option> </select> </form> |
| 顯示結(jié)果 |
| 原始碼 | <form action=”http://your.isp.com/cgi-local/example.cgi” method=”POST”> Where you com from? <select name=”where” multiple> <option value=”hk”>Hong Kong</option> <option value=”tw” selected>Taiwan</option> <option value=”cn”>China</option> <option value=”us”>United States</option> <option value=”ca”>Canada</option> </select> </form> |
| 顯示結(jié)果 |
■ <TEXTAREA> ：
<TEXTAREA>是表單文字區(qū)塊標記，常用于 bug report, feedback 等需要填寫大量資料的用途。
<TEXTAREA> 的參數(shù)設(shè)定（常用）：
例如： <textarea name=”comments” cols=”40″ rows=”4″ wrap=”VIRTUAL”>
● name=”comments”
這文字區(qū)塊的名稱，作識別之用，將會傳及 CGI。
● cols=”40″
這文字區(qū)塊的寬度，請自行修改。
● rows=”4″
這文字區(qū)塊的列數(shù)，即其高度，請自行修改。
● wrap=”VIRTUAL”
設(shè)定其折行問題，可選值為： off, physical, virtual。off 表示不使用此屬性，physical 時則會強迫劉覽器在送資料到 CGI（Web 伺服器端）必須將實№文字中的換行一 并送出，設(shè)為 virtual 時則送出連續(xù)成串的字（除非使用者按了鍵盤的 RETURN / ENTER）。
?例子：
原始碼 <form action=”http://your.isp.com/cgi-local/example.cgi” method=”POST”>
Give comments:
<textarea name=”comments” cols=”40″ rows=”4″ wrap=”VIRTUAL”>
這是預(yù)設(shè)的字句，通常留空的，隨你喜歡。</textarea>
</form> 顯示結(jié)果
