2008-06-07 21:38:10| 分類：
html | 標(biāo)簽： |字號大中小
表單在HTML頁面中起著重要作用，它是與用戶交互信息的主要手段。一個(gè)表單至少應(yīng)該包括說明性文字、用戶填寫的表格、提交和重填按鈕等內(nèi)容。用戶填寫了所需的資料之后，按下“提交資料”按鈕，這樣所填資料就會(huì)通專門的CGI接口傳到Web服務(wù)器上。網(wǎng)頁的設(shè)計(jì)者隨后就能在Web服務(wù)器上看到用戶填寫的資料，從而完成了從用戶到作者之間的反饋和交流。對于免費(fèi)個(gè)人網(wǎng)站，往往服務(wù)器不提供CGI功能，也可以電子郵件來接收用戶的反饋信息。
表單中主要包括下列元素：
button——普通按鈕
radio ——單選按鈕
checkbox——復(fù)選框
select ——下拉式菜單
text ——單行文本框
textarea——多行文本框
submit——提交按鈕
reset—— 重填按鈕
用HTML設(shè)計(jì)表單常用的標(biāo)記是：<form>、< input>、<Option>、<Select>、<textarea>和<isindex>等標(biāo)記。
1、<form>表單標(biāo)記
該標(biāo)記的主要作用是設(shè)定表單的起止位置，并指定處理表單數(shù)據(jù)程序的url地址。其基本語法結(jié)構(gòu)如下：
<form
action＝url
method=get|post
name＝value
onreset=function
onsubmit＝function
target=window>
</form>
其中action：用于設(shè)定處理表單數(shù)據(jù)程序url的地址。這樣的程序通常是CGI應(yīng)用程序，采用電子郵件方式時(shí)，用action="mailto:你的郵件地址"。
method：指定數(shù)據(jù)傳送到服務(wù)器的方式。有兩種主要的方式，當(dāng)method=get時(shí)，將輸入數(shù)據(jù)加在action指定的地址后面?zhèn)魉偷椒?wù)器；當(dāng)method=post時(shí)則將輸入數(shù)據(jù)按照HTTP傳輸協(xié)議中的post傳輸方式傳送到服務(wù)器，用電子郵件接收用戶信息采用這種方式。
name：用于設(shè)定表單的名稱。onrest和onsubmit是主要針對“reset”按鈕和“submit”按鈕來說的，分別設(shè)定了在按下相應(yīng)的按鈕之后要執(zhí)行的子程序。
target：指定輸入數(shù)據(jù)結(jié)果顯示在那個(gè)窗口，這需要與<frame>標(biāo)記配合使用。
2、<input>表單輸入標(biāo)記
此標(biāo)記在表單中使用頻繁，大部分表單內(nèi)容需要用到此標(biāo)記。其語法如下：
<inPut
aligh=left|righ|top|middle|bottom
name=value
type=text|textarea|password|checkbox|radio|submit|reset|file|hidden|image|button
value=value
src=url
checked
maxlength=n
size=n
onclick=function
onselect=function>
align：是用于設(shè)定表單的位置是靠左（left）、靠右（right）、居中（middle）、靠上 top）還是靠底（bottom）。
name：設(shè)定當(dāng)前變量名稱。
type：決定了輸入數(shù)據(jù)的類型。其選項(xiàng)較多，各項(xiàng)的意義是：
type=text：表示輸入單行文本；
typet=textarea：表示輸入多行文本；
type=password:表示輸入數(shù)據(jù)為密碼，用星號表示；
type－checkbox：表示復(fù)選框；
type－radio：表示單選框；
type一submit：表示提交按鈕，數(shù)據(jù)將被送到服務(wù)器；
tyPe－reset：表示清除表單數(shù)據(jù)，以便重新輸入；
type－file：表示插入一個(gè)文件；
type－h(huán)idden：表示隱藏按鈕；
type＝image：表示插入一個(gè)圖像；
type一button：表示普通按鈕；
value：用于設(shè)定輸入默認(rèn)值，即如果用戶不輸入的話，就采用此默認(rèn)值；
src：是針對type=image的情況來說的，設(shè)定圖像文件的地址；
checked：表示選擇框中，此項(xiàng)被默認(rèn)選中；
maxlength：表示在輸入單行文本的時(shí)候，最大輸入字符個(gè)數(shù)；
size：用于設(shè)定在輸入多行文本時(shí)的最大輸入字符數(shù)，采用width，height方式；
onclick：表示在按下輸入時(shí)調(diào)用指定的子程序；
onselect：表示當(dāng)前項(xiàng)被選擇時(shí)調(diào)用指定的子程序。
3、<select>下拉菜單標(biāo)記
用<select>標(biāo)記可以在表間中插入一個(gè)下拉菜單，它需與<option>標(biāo)記聯(lián)用，因?yàn)橄吕藛沃械拿總€(gè)選項(xiàng)要用<option>標(biāo)記來定義。<select>標(biāo)記的語法如下：
<select
name=nametext
size=n
multiple>
其中name：設(shè)定下拉式菜單的名稱；
size：設(shè)定菜單框的高度，也就是一次顯示幾個(gè)菜單項(xiàng)，一般取默認(rèn)值（size="1"）；
multiple：設(shè)定為可以進(jìn)行多選。
4、<option>選項(xiàng)標(biāo)記
該標(biāo)記為下拉菜單中一個(gè)選項(xiàng)，語法很簡單：
<option
selected
value=value>
其中selected：表示當(dāng)前項(xiàng)被默認(rèn)選中；
value：表示該項(xiàng)對應(yīng)的值，在該項(xiàng)被中之后，該項(xiàng)的值就會(huì)被送到服務(wù)器進(jìn)行處理。
5、<textarea>多行文本輸入標(biāo)記
這是一個(gè)建立多行文本輸入框的專用標(biāo)記，其語法如下：
<textarea
name=name
cols=n
rows=n
wrap=off|hard|soft>
各參數(shù)含義：name：文本框名稱；clos：寬度；rows：高度（行數(shù)）；wrap：換行控制，off：不自動(dòng)換行；hard：自動(dòng)硬回車換行，換行標(biāo)記一同被傳送到服務(wù)器中去；soft：自動(dòng)軟回車換行，換行標(biāo)記不會(huì)傳送到服務(wù)器中去。
表單所涉及的標(biāo)記較多，參數(shù)也較復(fù)雜，而實(shí)際制作表單時(shí)就是這些標(biāo)記的組合應(yīng)用，但一般的表單不可能涉及所有參數(shù)，我們還是那個(gè)原則，能用默認(rèn)值的盡量用默認(rèn)值，絕不設(shè)定一個(gè)不用的參數(shù)。我在后面的文章中將通過實(shí)例介紹一些常用參數(shù)的應(yīng)用技巧。
評論這張
轉(zhuǎn)發(fā)至微博
轉(zhuǎn)發(fā)至
