乡下人产国偷v产偷v自拍,国产午夜片在线观看,婷婷成人亚洲综合国产麻豆,久久综合给合久久狠狠狠9

  • <output id="e9wm2"></output>
    <s id="e9wm2"><nobr id="e9wm2"><ins id="e9wm2"></ins></nobr></s>

    • 分享

      HTML語言剖析(九)表單標記

       吉祥如意988 2012-05-05

      HTML語言剖析

      九、表單標記

      <FORM> <INPUT>
      INPUT 的種類: Text, Radio,Checkbox, Password, Submit/Reset, Image, File, Hidden, Button。
      <SELECT> <OPTION>
      <TEXTAREA>
      ■ 引子
      表單的用處很多,于網(wǎng)上無處不見,當然是配合 CGI 使用為佳,所以饋下有意使用或?qū)W 習 CGI 的話,表單設計見必需的,這一節(jié)介紹的標記不多,但其參數(shù)變化很多。一份表單的基本架構(gòu)是:在 <FORM> 標記 的包圍下加上一種或以上的表單輸入方式及一個或以上的按鍵。
      <FORM> <INPUT> :
       
      <FORM>稱為表單標記,用以宣告此為表單模式,屬于一個容器標記,表示其它表單標記需要在它的包圍中才有效,<INPUT>便是其中的一個,用以設定各種輸入資料的方法。它 是一個空標記。

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

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

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


      輸入方式一: 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"
        此一單行文字盒可輸入字元的上限,為方便編排資料或避免錯輸入等,宜設定上 限,例如輸入電話或 ICQ UIN 的可設為 8,年齡為 2 等。

      例子:

      原始碼 <form action="http://your./cgi-local/example.cgi" method="POST">
      請?zhí)钊腚娫捥柎a:<input type="Text" name="phone" value="" size="10" maxlength="8">
      </form>
      顯示結(jié)果
      請?zhí)钊腚娫捥柎a:

      輸入方式二: 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
        設該 Radio 為內(nèi)定被選。同 name 的各個 Radio 中只能有一個使用,或全不使用這 參數(shù)。

      例子:

      原始碼 <form action="http://your./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é)果
      請選性別: 女性 男性
      你喜歡嗎: 喜歡 不喜歡 不肯定

      輸入方式三: 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
        設該 Checkbox 為內(nèi)定被選。每個 Checkbox 都是獨立的,所以每一個都可使用這 參數(shù),不像 Radio。

      例子:

      原始碼 <form action="http://your./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é)果
      你喜歡以下那些明星:
      黎明 酒井法子 鄭秀文 BonJovi

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

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

      • Password 的其他參數(shù)和 Text 是完全相同的,請參考 Text 的介紹。
        兩者作用不同,Password 所輸入的字元全以 * 號表示。

      例子:

      原始碼 <form action="http://your./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"
        設定輸入方式為 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./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./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"
        所接受的文件類別,有二十六種選擇,但可不設定。

      例子:

      原始碼 <form action="http://your./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./cgi-local/example.cgi" method="POST">
      <input type="Hidden" name="ID" value="6618">
      <input type="Submit" value="Submit">
      </form>
      顯示結(jié)果

      輸入方式九: Button

      例如:<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> 的參數(shù)設定(常用):
      例如: <select name="where" size="6" multiple>

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

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

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

      例子一: (普通 POP UP 卷動選單)

      原始碼 <form action="http://your./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é)果
      Where you com from?

      例子二: (容許多重選擇 的卷動選單)

      原始碼 <form action="http://your./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é)果
      Where you com from?

      例子三:(設定了 Size 的卷動選單)

      原始碼 <form action="http://your./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é)果
      Where you com from?

       

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

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

      • name="comments"
        這文字區(qū)塊的名稱,作識別之用,將會傳及 CGI。
      • cols="40"
        這文字區(qū)塊的寬度,請自行修改。
      • rows="4"
        這文字區(qū)塊的列數(shù),即其高度,請自行修改。
      • wrap="VIRTUAL"
        設定其折行問題,可選值為: off, physical, virtual。off 表示不使用此屬性,physical 時則會強迫劉覽器在送資料到 CGI(Web 伺服器端)必須將實№文字中的換行一 并送出,設為 virtual 時則送出連續(xù)成串的字(除非使用者按了鍵盤的 RETURN / ENTER)。

      例子:

      原始碼 <form action="http://your./cgi-local/example.cgi" method="POST">
      Give comments:
      <textarea name="comments" cols="40" rows="4" wrap="VIRTUAL">
      這是預設的字句,通常留空的,隨你喜歡。</textarea>
      </form>
      顯示結(jié)果
      Give comments:

        本站是提供個人知識管理的網(wǎng)絡存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導購買等信息,謹防詐騙。如發(fā)現(xiàn)有害或侵權內(nèi)容,請點擊一鍵舉報。
        轉(zhuǎn)藏 分享 獻花(0

        0條評論

        發(fā)表

        請遵守用戶 評論公約

        類似文章 更多