回到學院首頁選擇製網課程教學與製網有關的語言選擇輔助課程選擇網頁材料了解 HKIWC
The Best Web Hosting Company
 今昔HTML
 HTML概念
 標記一覽
 文件標記
 排版標記
 字體標記
 清單標記
 表格標記
 表單標記Here
 圖形標記
 連結標記
 框架標記
 影像地圖
 多媒體
 其他標記
 特殊字元
 調色原理
 StyleSheets
 加入實例
 本節實例
 疑難討論
 聯絡學院
 網絡辭典
歡迎到訪 PenPal Garden
ICQ 國際交友會
  ■ 本節主要介紹的標記:
<FORM> <INPUT>
INPUT 的種類: Text, Radio,Checkbox, Password, Submit/Reset, Image, File, Hidden, Button
<SELECT> <OPTION>
<TEXTAREA>

欲明白本篇【HTML剖析】之標記分類請看 【標記一覽】。
亦請先明白圍堵標記與空標記的分別請看 【HTML概念】。

■ 引子
表單的用處很多,於網上無處不見,當然是配合 CGI 使用為佳,所以閣下有意使用或學 習 CGI 的話,表單設計見必需的,CGI 的知識請看【CGI 集】及【CGI 剖析】。
這一節介紹的標記不多,但其參數變化很多。一份表單的基本架構是:在 <FORM> 標記 的包圍下加上一種或以上的表單輸入方式及一個或以上的按鍵。
<FORM> <INPUT> :
<FORM>稱為表單標記,用以宣告此為表單模式,屬於一個容器標記,表示其它表單標記 需要在它的包圍中才有效,<INPUT>便是其中的一個,用以設定各種輸入資料的方法。它 是一個空標記。

<FORM> 的參數設定(常用):
例如: <form action="http://your.isp.com/cgi-local/example.cgi" method="POST">

  • action="http://your.isp.com/cgi-local/example.cgi"
    表單通常是與 CGI 配合使用的,參數 action 便是用以指明該 CGI 程式的位置,這 樣此表單所填的資料才能正確傳給 CGI 作處理。若閣下沒有 CGI 以進行測試,可 設定此參數為 ACTION="mailto:your@email.com" 那樣該表單所填的資料將會寄至 此電郵地址(紅色部分)。
  • method="POST"
    傳送資料給 CGI 的的方式,可選值為 POST, GET,它們的分別會在【CGI剖析】 再詳細敘述。你只需記住POST容許傳送大量資料,但 GET則只接受低於 1K 的資 料,所以你若看過別人的表單原始碼的話,你會發現申請表單用的是POST 而搜 找器用的是 GET

<INPUT> 的參數設定(常用):
由於其第一個參數 type 己有很多的選擇,而不同的選擇表示出不同的輸入方式,且其它 參數亦因此而異,故以下將獨立介紹不同輸入方式及其它參數設定。


輸入方式一: Text (單行文字盒)

例如<input type="Text" name="age" value="20" align="MIDDLE" size="2" maxlength="255">

  • type="Text"
    輸入方式為 Text,能產生一單行文字盒,上限為 255 字元。
  • name="age"
    此一單行文字盒名稱,這是最重要的一個,方便 CGI 辨認由表單傳來的資料,雖 說可隨便命名,但通常 CGI 程式中都有指定名稱,若轉用其它名稱便需要修改該 CGI 程式了,名稱可為沒空白沒特別符號的英文或數字,有大小寫的分別,可以 寫成 Your_Age,若有訪客於此表單此一文字盒填入 40 的話,那末傳給 CGI 的字 串便是 Your_Age=40。
  • value="20"
    此一單行文字盒內定值。若不填寫則文字盒是空白的,等待訪客親自鍵入,若 value="20" 的話, 20 便會出現在文字盒中,當然訪客可以修改之。
  • align="MIDDLE"
    可選值:top, middle, bottom, left, right, texttop, baseline, absmiddle. 沒太大有處。
  • size="2"
    此一單行文字盒顯示的長度,若閣下是採用 Big5 編碼的中文網頁便要小心,同 size 的文字盒 NC 會顯示得比 IE 頗長。
  • maxlength="255"
    此一單行文字盒可輸入字元的上限,為方便編排資料或避免錯輸入等,宜設定上 限,例如輸入電話或 ICQ UIN 的可設為 8,年齡為 2 等。

例子:
原始碼 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST">
請填入電話號碼:<input type="Text" name="phone" value="" size="10" maxlength="8">
</form>
顯示結果
請填入電話號碼:


輸入方式二: Radio (單一選擇)

例如:<input type="Radio" name="gender" value="female" align="MIDDLE" checked>

  • type="Radio"
    輸入方式為 Radio,能產生一單一選擇,以供點選。
  • name="gender"
    此一 Radio 名稱,參考 Text 部分的說明
  • value="female"
    內定值。每一個 radio 必須及僅有一個 value,通常有同時採用兩個或以上同 name 不同 value 的 Radio 輸入方式,可讓使用使任選其一。
  • align="MIDDLE"
    可選值:top, middle, bottom, left, right, texttop, baseline, absmiddle。
  • checked
    設該 Radio 為內定被選。同 name 的各個 Radio 中只能有一個使用,或全不使用這 參數。

例子:
原始碼 <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>
顯示結果
請選性別:女性 男性
你喜歡嗎:喜歡 不喜歡 不肯定


輸入方式三: Checkbox (確認盒)

例如:<input type="Checkbox" name="idol" value="Leon" align="RIGHT" checked>

  • type="Checkbox"
    輸入方式為 Checkbox,能產生一確認盒,以供剔選。
  • name="idol"
    此一 Checkbox 名稱,參考 Text 部分的說明
  • value="Leon"
    內定值。每一個 Checkbox 必須及僅有一個 value,當被剔選時這值便會傳及 CGI,例如所傳字串 idol=Leon 。
  • align="RIGHT"
    可選值:top, middle, bottom, left, right, texttop, baseline, absmiddle。
  • checked
    設該 Checkbox 為內定被選。每個 Checkbox 都是獨立的,所以每一個都可使用這 參數,不像 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>
顯示結果
你喜歡以下那些明星:
黎明 酒井法子 鄭秀文 BonJovi


輸入方式四: Password (密碼輸方盒)

例如:<input type="Password" name="pw" value="999" align="MIDDLE" size="5" maxlength="9">

  • Password 的其他參數和 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>
顯示結果
請輸入姓名:
請輸入密碼:


輸入方式五: Submit (傳送鍵)及 Reset (清除鍵)

這是表單上重要的兩個按鍵,兩者所附帶的參數相同,但用處不大。

例如:<input type="Submit" name="other_funtion" value="確定" align="MIDDLE">
<input type="Reset" value="清除" align="MIDDLE">

  • type="Submit"
    設定輸入方式為 Submit 或 Reset。
  • name="other_funtion"
    Submit 的功能隨 name 的不同而不同,須和 CGI 配合。若你只需要普通的傳送 鍵,則是其內定,不必用此參數。
  • value="確定"
    這個值不是輸給 CGI 的,而是顯示在按鍵上,可以不用,傳送鍵的內定值為 Submit Query,清除鍵的內定值為 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>
顯示結果


輸入方式六: Image (圖片按鍵)

這通常用以取代 Submit 及 Reset 兩個按鍵,因為由程式產生的按鍵并不漂亮,這 Image 參 數便容許你採用自已製造的按鍵。

例如:<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>
顯示結果


輸入方式七: File

例如:<input type="File" name="upload" align="BOTTOM" size="20" maxlength="100" accept="text/html">

  • input type="File"
    輸入方式為 Image。通常用以傳輸檔案。
  • name="upload"
    這檔案傳輸的名稱,用以識別之用。
  • align="BOTTOM"
    可選值:top, middle, bottom, left, right, texttop, baseline, absmiddle。
  • size="20"
    所顯示文字盒的長度。
  • maxlength="100"
    可輸入字元的上限。
  • accept="text/html"
    所接受的檔案類別,有二十六種選擇,但可不設定。

例子:
原始碼 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST">
<type="File" name="upload" size="30" maxlength="100" accept="text/html">
</form>
顯示結果


輸入方式八: Hidden

例如:<input type="Hidden" name="ID" value="6618">

  • type="Hidden"
    輸入方式為隱藏或內定。它不會顯示任何輸入介面,而是一個內定值隨表單一起 傳給 CGI,列如由 CGI 產生的會員號碼,或傳入可更改的參數以調整 CGI 而避免 修改 CGI 程式碼。
  • name="ID"
    這檔案傳輸的名稱,用以識別之用。
  • value="6618"
    內定值,會以如 ID=6618 形式傳給 CGI。

例子: ("Hidden" 是不被顯示的,所以這處多放了一個 "Submit" 鍵,表示 Hidden 之內定 值會隨 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>
顯示結果


輸入方式九: Button

例如:<input type="Button" name="useless" value="Back">

  • type="Button"
    輸入方式為一般按鍵。常配合 Java Script 作為其啟動按鍵。
  • name="useless"
    這檔案傳輸的名稱,用處不大。
  • value="Back"
    按鍵顯示名稱。

例子: 其中 onclick="history.go( -1 );return true; 屬 JAVA 事件。
原始碼 <form>
<input type="Button" value="回前一頁" onclick="history.go( -1 );return true;">
</form>
顯示結果

<SELECT>是捲動選單標記,每一選項皆由 <OPTION> 所標示,把它當作圍堵標記或空標 記使用都可以。

<SELECT> 的參數設定(常用):
例如: <select name="where" size="6" multiple>

  • name="where"
    這捲動選單的名稱,作識別之用,將會傳及 CGI。
  • size="6"
    這捲動選單的列數,即其高度,請自行修改。若使用此參數則不會有 Pop Up 效 果。
  • multiple
    令這捲動選單容許多重選擇。

<OPTION> 的參數設定(常用):
例如: <option value="tw" selected>

  • value="tw"
    這選項的值,將會傳及 CGI。請自行修改,但不同選項必須有不同的值。
  • selected
    設該選項為內定被選。一個單選捲動選單只能有一項或零可內定被選。

例子一: (普通 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>
顯示結果
Where you com from?

例子二: (容許多重選擇 的捲動選單)
原始碼 <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>
顯示結果
Where you com from?

例子三:(設定了 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>
顯示結果
Where you com from?

<TEXTAREA> :
<TEXTAREA>是表單文字區塊標記,常用於 bug report, feedback 等需要填寫大量資料的用 途。

<TEXTAREA> 的參數設定(常用):
例如: <textarea name="comments" cols="40" rows="4" wrap="VIRTUAL">

  • name="comments"
    這文字區塊的名稱,作識別之用,將會傳及 CGI。
  • cols="40"
    這文字區塊的寬度,請自行修改。
  • rows="4"
    這文字區塊的列數,即其高度,請自行修改。
  • wrap="VIRTUAL"
    設定其折行問題,可選值為: off, physical, virtual。off 表示不使用此屬性,physical 時則會強迫劉覽器在送資料到 CGI(Web 伺服器端)必須將實際文字中的換行一 併送出,設為 virtual 時則送出連續成串的字(除非使用者按了鍵盤的 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">
這是預設的字句,通常留空的,隨你喜歡。</textarea>
</form>
顯示結果
Give comments:

The Best Web Hosting Company
Download Internet Explorer Download Netscape Netvigator