表單在網(wǎng)頁中主要負(fù)責(zé)的是數(shù)據(jù)采集功能，一個(gè)表單基本由三部分組成：表單標(biāo)簽：這里面包含了處理表單數(shù)據(jù)所用 CGI （Common Gateway Interface，通用網(wǎng)關(guān)接口）程序的 URL （Uniform Resource Location，統(tǒng)一資源定位符）以及數(shù)據(jù)提交到服務(wù)器的方法。表單域：包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等。表單按鈕：包括提交按鈕、復(fù)位按鈕和一般按鈕；用于將數(shù)據(jù)傳送到服務(wù)器上的CGI腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。

(資料圖)

下面對(duì)表單的三個(gè)部分分別進(jìn)行說明。

一、表單標(biāo)簽

1. 功能

表單標(biāo)簽用于申明表單，定義采集數(shù)據(jù)的范圍。也就是說< form>和< /form > 里面包含的數(shù)據(jù)將被提交到服務(wù)器或者電子郵件里。

2. 標(biāo)簽格式

基本格式：

基本語法格式：

......

上述屬性解釋如下：

action=url：用來指定處理提交表單的格式。它可以是一個(gè)URL地址（提交給程式），或一個(gè)電子郵件地址；method=get | post：指明提交表單的 HTTP 方法，可能的值有 POST 或 GET，在數(shù)據(jù)傳輸過程中分別對(duì)應(yīng)了 HTTP 協(xié)議中的 GET 和 POST 方法。雖然它們都是數(shù)據(jù)的提交方式，但是在實(shí)際傳輸時(shí)確有很大的不同，并且可能會(huì)對(duì)數(shù)據(jù)產(chǎn)生嚴(yán)重的影響；其他說明見注；enctype=cdata：指明用來把表單提交給服務(wù)器時(shí)（當(dāng) method 值為 POST）的互聯(lián)網(wǎng)媒體形式。這個(gè)特性的缺省值是”application/x-www-form-urlencoded”；TARGET=”…”：指定提交的結(jié)果文檔顯示的位置： _blank：在一個(gè)新的、無名瀏覽器窗口調(diào)入指定的文檔；_self：在指向這個(gè)目標(biāo)的元素的相同的框架中調(diào)入文檔； _parent ：把文檔調(diào)入當(dāng)前框的直接的父 FRAMESET 框中；這個(gè)值在當(dāng)前框沒有父框時(shí)等價(jià)于_self；_top ：把文檔調(diào)入原來的最頂部的瀏覽器窗口中(因此取消所有其它框架)；這個(gè)值等價(jià)于當(dāng)前框沒有你框時(shí)的_self.

注： 1、關(guān)于 GET 與 POST：

GET 是用來從服務(wù)器上獲得數(shù)據(jù)，而 POST 是用來向服務(wù)器上傳遞數(shù)據(jù)；GET 將表單中的數(shù)據(jù)按照 variable=value的形式，添加到 action 所指向的 URL 后面，并且兩者使用“?”連接，而各個(gè)變量之間使用“&”連接；POST 是將表單中的數(shù)據(jù)放在 form 的數(shù)據(jù)體中，按照變量和值相對(duì)應(yīng)的方式，傳遞到 action 所指向 URL；GET 是不安全的：因?yàn)樵趥鬏斶^程，數(shù)據(jù)被放在請(qǐng)求的 URL 中，而如今現(xiàn)有的很多服務(wù)器、代理服務(wù)器或者用戶代理都會(huì)將請(qǐng)求 URL 記錄到日志文件中，然后放在某個(gè)地方。這樣就可能會(huì)有一些隱私的信息被第三方看到。另外，用戶也可以在瀏覽器上直接看到提交的數(shù)據(jù)，一些系統(tǒng)內(nèi)部消息將會(huì)一同顯示在用戶面前。POST的所有操作對(duì)用戶來說都是不可見的；GET 傳輸?shù)臄?shù)據(jù)量小，這主要是因?yàn)槭?URL 長度限制；而 POST 可以傳輸大量的數(shù)據(jù)，所以在上傳文件只能使用 POST；GET 限制 Form 表單的數(shù)據(jù)集的值必須為 ASCII 字符；而 POST 支持整個(gè) ISO10646 字符集；GET 是 Form 的默認(rèn)方法；使用 POST 傳輸?shù)臄?shù)據(jù)，可以通過設(shè)置編碼的方式正確轉(zhuǎn)化中文；而 GET 傳輸?shù)臄?shù)據(jù)卻沒有變化，在以后的程序中，我們一定要注意這一點(diǎn)。

二、表單域

表單域包含了文本框、多行文本框、密碼框、隱藏域、復(fù)選框、單選框和下拉選擇框等，用于采集用戶的輸入或選擇的數(shù)據(jù)，下面分別講述這些表單域的代碼格式。

1. 文本框

文本框是一種讓訪問者自己輸入內(nèi)容的表單對(duì)象，通常被用來填寫單個(gè)字或者簡短的回答，如姓名、地址等。代碼格式如下：

屬性解釋如下：

type=”text”：定義單行文本輸入框；name：定義文本框名稱； 要保證數(shù)據(jù)的準(zhǔn)確采集，必須定義一個(gè)獨(dú)一無二的名稱；size：定義文本框的寬度，單位是單個(gè)字符寬度；maxlength：定義最多輸入的字符數(shù)；value：定義文本框的初始值；

示例如下：

2. 多行文本框

多行文本框也是一種讓訪問者自己輸入內(nèi)容的表單對(duì)象，只不過能讓訪問者填寫較長的內(nèi)容。代碼格式如下：

屬性解釋如下：

name：定義多行文本框的名稱，要保證數(shù)據(jù)的準(zhǔn)確采集，必須定義一個(gè)獨(dú)一無二的名稱；cols：定義文本框的寬度，單位是單個(gè)字符寬度；rows：定義文本框的高度，單位是單個(gè)字符寬度；wrap：定義輸入內(nèi)容大于文本域時(shí)顯示的方式，可選值如下： 默認(rèn)值：文本自動(dòng)換行；當(dāng)輸入內(nèi)容超過文本域的右邊界時(shí)會(huì)自動(dòng)轉(zhuǎn)到下一行，而數(shù)據(jù)在被提交處理時(shí)自動(dòng)換行的地方不會(huì)有換行符出現(xiàn)；Off：用來避免文本換行，當(dāng)輸入的內(nèi)容超過文本域右邊界時(shí)，文本將向左滾動(dòng)，必須用Return才能將插入點(diǎn)移到下一行；Virtual：允許文本自動(dòng)換行；Physical：讓文本換行，當(dāng)數(shù)據(jù)被提交處理時(shí)，換行符也將被一起提交處理。

示例如下：

3. 密碼框

密碼框是一種特殊的文本域，用于輸入密碼。當(dāng)訪問者輸入文字時(shí)，文字會(huì)被星號(hào)或其它符號(hào)代替，而輸入的文字會(huì)被隱藏。代碼格式如下：

屬性解釋如下：

type=”password”：定義密碼框；name：定義密碼框的名稱，要保證數(shù)據(jù)的準(zhǔn)確采集，必須定義一個(gè)獨(dú)一無二的名稱；size：定義文本框的寬度，單位是單個(gè)字符寬度；maxlength：定義最多輸入的字符數(shù)；

示例如下：

4. 隱藏域

隱藏域是用來收集或發(fā)送信息的不可見元素，對(duì)于網(wǎng)頁的訪問者來說，隱藏域是看不見的。當(dāng)表單被提交時(shí)，隱藏域就會(huì)將信息用你設(shè)置時(shí)定義的名稱和值發(fā)送到服務(wù)器上。代碼格式如下：

屬性解釋如下：

type=”hidden”：定義隱藏域；name：定義隱藏域的名稱，要保證數(shù)據(jù)的準(zhǔn)確采集，必須定義一個(gè)獨(dú)一無二的名稱；value：定義隱藏域的值；

示例如下：

5. 復(fù)選框

復(fù)選框允許在待選項(xiàng)中選中一項(xiàng)以上的選項(xiàng)。每個(gè)復(fù)選框都是一個(gè)獨(dú)立的元素，都必須有一個(gè)唯一的名稱。代碼如下：

屬性解釋如下：

type=”checkbox”：定義復(fù)選框；name：定義復(fù)選框的名稱，要保證數(shù)據(jù)的準(zhǔn)確采集，必須定義一個(gè)獨(dú)一無二的名稱；value：定義復(fù)選框的值；

示例如下：

xxxcom

6. 單選框

單選框用于訪問者在選項(xiàng)中選擇唯一答案的情況。代碼如下：

屬性解釋如下：

type=”radio”：定義單選框；name：定義單選框的名稱，要保證數(shù)據(jù)的準(zhǔn)確采集，單選框都是以組為單位使用的，在同一組中的單選項(xiàng)都必須用同一個(gè)名稱；value：定義單選框的值，在同一組中，它們的域值必須是不同的；

示例如下：

7. 文件上傳框

有時(shí)候，需要用戶上傳自己的文件，文件上傳框看上去和其它文本域差不多，只是它還包含了一個(gè)瀏覽按鈕。訪問者可以通過輸入需要上傳的文件的路徑或者點(diǎn)擊瀏覽按鈕選擇需要上傳的文件。 注：在使用文件域以前，請(qǐng)先確定你的服務(wù)器是否允許匿名上傳文件。表單標(biāo)簽中必須設(shè)置ENCTYPE=”multipart/form-data”來確保文件被正確編碼；另外，表單的傳送方式必須設(shè)置成POST。 代碼格式如下：

屬性解釋如下：

type=”file”：定義文件上傳框；name：定義文件上傳框的名稱，要保證數(shù)據(jù)的準(zhǔn)確采集，必須定義一個(gè)獨(dú)一無二的名稱；size：定義文件上傳框的寬度，單位是單個(gè)字符寬度；maxlength：定義最多輸入的字符數(shù)；

示例如下：

8. 下拉選擇框

下拉選擇框允許你在一個(gè)有限的空間設(shè)置多種選項(xiàng)。代碼格式如下：

......

屬性解釋如下：

size：定義下拉選擇框的行數(shù)；name：定義下拉選擇框的名稱；multiple：表示可以多選，如果不設(shè)置本屬性，那么只能單選；value：定義選擇項(xiàng)的值；selected：表示默認(rèn)已經(jīng)選擇本選項(xiàng)；

示例1如下：

Try oneTry two

示例2如下：

Default23三、表單按鈕表單按鈕控制表單的運(yùn)作。1. 提交按鈕提交按鈕用來將輸入的信息提交到服務(wù)器。代碼如下：

屬性解釋如下：

type=”submit”：定義提交按鈕；name：定義提交按鈕的名稱；value：定義按鈕的顯示文字；

示例如下：

2. 復(fù)位按鈕

復(fù)位按鈕用來重置表單。代碼如下：

屬性解釋如下：

type=”reset”：定義復(fù)位按鈕；name：定義復(fù)位按鈕的名稱；value：定義按鈕的顯示文字；

示例如下：

3. 一般按鈕

一般按鈕用來控制其他定義了處理腳本的處理工作。

屬性解釋如下：

type=”button”：定義一般按鈕；name：定義一般按鈕的名稱；value：定義一般按鈕的顯示文字；onClick：可以是其它事件，通過制定腳本函數(shù)來定義按鈕的行為；

示例如下：