表單標(biāo)記

  <FORM> <INPUT>
  INPUT 的種類: Text, Radio,Checkbox, Password, Submit/Reset, Image, File, Hidden, Button。
  <SELECT> <OPTION>
  <TEXTAREA> 

  ■ 引子

  表單的用處很多,于網(wǎng)上無處不見,當(dāng)然是配合 CGI 使用為佳,所以饋下有意使用或?qū)W 習(xí) CGI 的話,表單設(shè)計(jì)見必需的,這一節(jié)介紹的標(biāo)記不多,但其參數(shù)變化很多。一份表單的基本架構(gòu)是:在<FORM> 標(biāo)記 的包圍下加上一種或以上的表單輸入方式及一個(gè)或以上的按鍵。

  ■<FORM> <INPUT>:

  <FORM>稱為表單標(biāo)記,用以宣告此為表單模式,屬于一個(gè)容器標(biāo)記,表示其它表單標(biāo)記需要在它的包圍中才有效,<INPUT>便是其中的一個(gè),用以設(shè)定各種輸入資料的方法。它 是一個(gè)空標(biāo)記。
  
  <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 以進(jìn)行測試,可 設(shè)定此參數(shù)為ACTION="mailto:your@email.com" 那樣該表單所填的資料將會(huì)寄至 此電郵地址(紅色部分)。
 
  ● method="POST"
  傳送資料給 CGI 的的方式,可選值為 POST, GET。你只需記住POST容許傳送大量資料,但 GET則只
接受低于 1K 的資 料,所以你若看過別人的表單原始碼的話,你會(huì)發(fā)現(xiàn)申請(qǐng)表單用的是POST 而搜 找器用的是 GET。

  <INPUT> 的參數(shù)設(shè)定(常用):

  由于其第一個(gè)參數(shù) type 己有很多的選擇,而不同的選擇表示出不同的輸入方式,且其它 參數(shù)亦因此而異,故以下將獨(dú)立介紹不同輸入方式及其它參數(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"
  此一單行文字盒名稱,這是最重要的一個(gè),方便 CGI 辨認(rèn)由表單傳來的資料,雖 說可隨便命名,但通常 CGI 程式中都有指定名稱,若轉(zhuǎn)用其它名稱便需要修改該 CGI 程式了,名稱可為沒空白沒特別符號(hào)的英文或數(shù)字,有大小寫的分別,可以 寫成Your_Age,若有訪客于此表單此一文字盒填入 40 的話,那末傳給 CGI 的字 串便是 Your_Age=40。

  ● value="20"
  此一單行文字盒內(nèi)定值。若不填寫則文字盒是空白的,等待訪客親自鍵入,若 value="20" 的話, 20 便會(huì)出現(xiàn)在文字盒中,當(dāng)然訪客可以修改之。

  ●align="MIDDLE"
  可選值:top, middle, bottom, left, right, texttop, baseline, absmiddle. 沒太大有處。

  ● size="2"
  此一單行文字盒顯示的長度,若饋下是采用 Big5 編碼的中文網(wǎng)頁便要小心,同 size 的文字盒 NC 會(huì)顯示得比 IE 狻長。

  ● maxlength="255"
  此一單行文字盒可輸入字元的上限,為方便編排資料或避免錯(cuò)輸入等,宜設(shè)定上 限,例如輸入電話或 ICQ UIN 的可設(shè)為 8,年齡為 2 等。

  例子:

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

 

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

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

  ● type="Radio"
  輸入方式為 Radio,能產(chǎn)生一單一選擇,以供點(diǎn)選。
 
  ● name="gender"
  此一 Radio 名稱,參考 Text 部分的說明。

  ● value="female"
  內(nèi)定值。每一個(gè) radio 必須及僅有一個(gè) value,通常有同時(shí)采用兩個(gè)或以上同 name 不同 value 的   Radio 輸入方式,可讓使用使任選其一。

  ● align="MIDDLE"
  可選值:top, middle, bottom, left, right, texttop, baseline, absmiddle。

  ● checked
  設(shè)該 Radio 為內(nèi)定被選。同 name 的各個(gè) Radio 中只能有一個(gè)使用,或全不使用這 參數(shù)。

  例子:

原始碼<form action="http://your.isp.com/cgi-local/example.cgi" method="POST">
請(qǐng)選性別:
<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é)果
請(qǐng)選性別: 女性 男性
你喜歡嗎: 喜歡 不喜歡 不肯定

 

 

標(biāo)簽:HTML語言

隨機(jī)推薦