世界速看：HTML表單有什么作用？HTML表單 (form) 的作用解釋

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

(資料圖)

下面對表單的三個部分分別進行說明。

一、表單標簽

1. 功能

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

2. 標簽格式

基本格式：

基本語法格式：

......

上述屬性解釋如下：

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

注： 1、關于 GET 與 POST：

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

二、表單域

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

1. 文本框

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

屬性解釋如下：

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

示例如下：

2. 多行文本框

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

屬性解釋如下：

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

示例如下：

3. 密碼框

密碼框是一種特殊的文本域，用于輸入密碼。當訪問者輸入文字時，文字會被星號或其它符號代替，而輸入的文字會被隱藏。代碼格式如下：

屬性解釋如下：

type=”password”：定義密碼框；name：定義密碼框的名稱，要保證數據的準確采集，必須定義一個獨一無二的名稱；size：定義文本框的寬度，單位是單個字符寬度；maxlength：定義最多輸入的字符數；

示例如下：

4. 隱藏域

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

屬性解釋如下：

type=”hidden”：定義隱藏域；name：定義隱藏域的名稱，要保證數據的準確采集，必須定義一個獨一無二的名稱；value：定義隱藏域的值；

示例如下：

5. 復選框

復選框允許在待選項中選中一項以上的選項。每個復選框都是一個獨立的元素，都必須有一個唯一的名稱。代碼如下：

屬性解釋如下：

type=”checkbox”：定義復選框；name：定義復選框的名稱，要保證數據的準確采集，必須定義一個獨一無二的名稱；value：定義復選框的值；

示例如下：

xxxcom

6. 單選框

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

屬性解釋如下：

type=”radio”：定義單選框；name：定義單選框的名稱，要保證數據的準確采集，單選框都是以組為單位使用的，在同一組中的單選項都必須用同一個名稱；value：定義單選框的值，在同一組中，它們的域值必須是不同的；

示例如下：

7. 文件上傳框

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

屬性解釋如下：

type=”file”：定義文件上傳框；name：定義文件上傳框的名稱，要保證數據的準確采集，必須定義一個獨一無二的名稱；size：定義文件上傳框的寬度，單位是單個字符寬度；maxlength：定義最多輸入的字符數；

示例如下：

8. 下拉選擇框

下拉選擇框允許你在一個有限的空間設置多種選項。代碼格式如下：

......

屬性解釋如下：

size：定義下拉選擇框的行數；name：定義下拉選擇框的名稱；multiple：表示可以多選，如果不設置本屬性，那么只能單選；value：定義選擇項的值；selected：表示默認已經選擇本選項；

示例1如下：

Try oneTry two

示例2如下：

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

屬性解釋如下：

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

示例如下：

2. 復位按鈕

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

屬性解釋如下：

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

示例如下：

3. 一般按鈕

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

屬性解釋如下：

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

示例如下：