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

中文名

表單

外文名

Form

作????用

采集數據組????成

表單標簽、表單域、表單按鈕

對????象

文本框，密碼框等

控件分類

Button Objx，Input Pro等

表單代碼

編輯

語音

表單表單標簽

功能：用于申明表單，定義采集數據的范圍，也就是

和里面包含的數據將被提交到服務器或者電子郵件里。

語法：

. . .

屬性解釋見下表：

action=url用來指定處理提交表單的格式.它可以是一個URL地址(提交給程式)或一個電子郵件地址.

method=get或post指明提交表單的HTTP方法.可能的值為： post：POST方法在表單的主干包含名稱/值對并且無需包含于action特性的URL中. get：不贊成。GET方法把名稱/值對加在action的URL后面并且把新的URL送至服務器.這是往前兼容的缺省值.這個值由于國際化的原因不贊成使用.

enctype=cdata指明用來把表單提交給服務器時(當method值為"post")的互聯網媒體形式.這個特性的缺省值是"application/x-www-form-urlencoded"

TARGET="..."指定提交的結果文檔顯示的位置： _blank ：在一個新的、無名瀏覽器窗口調入指定的文檔； _self ：在指向這個目標的元素的相同的框架中調入文檔； _parent ：把文檔調入當前框的直接的父FRAMESET框中；這個值在當前框沒有父框時等價于_self； _top ：把文檔調入原來的最頂部的瀏覽器窗口中(因此取消所有其它框架)；這個值等價于當前框沒有你框時的_self.

例如：

表示表單將向以post的方式提交，提交的結果在新的頁面顯示，數據提交的媒體方式是默認的application/x-www-form-urlencoded方式；

表單域

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

表單文本框

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

代碼格式：

屬性解釋：

type="text"定義單行文本輸入框；

name屬性定義文本框的名稱，要保證數據的準確采集，必須定義一個獨一無二的名稱；

size屬性定義文本框的寬度，單位是單個字符寬度；

maxlength屬性定義最多輸入的字符數。

value屬性定義文本框的初始值

樣例1：

樣例1代碼：

表單多行文本框

也是一種讓訪問者自己輸入內容的表單對象，只不過能讓訪問者填寫較長的內容。

代碼格式：

屬性解釋：

name屬性定義多行文本框的名稱，要保證數據的準確采集，必須定義一個獨一無二的名稱；

cols屬性定義多行文本框的寬度，單位是單個字符寬度；

rows屬性定義多行文本框的高度，單位是單個字符寬度；

wrap屬性定義輸入內容大于文本域時顯示的方式，可選值如下：

默認值是文本自動換行；當輸入內容超過文本域的右邊界時會自動轉到下一行，而數據在被提交處理時自動換行的地方不會有換行符出現； Off，用來避免文本換行，當輸入的內容超過文本域右邊界時，文本將向左滾動，必須用Return才能將插入點移到下一行； Virtual，允許文本自動換行。 Physical，讓文本換行，當數據被提交處理時換行符也將被一起提交處理。

樣例2：

樣例2代碼：

表單密碼框

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

代碼格式：

屬性解釋：

type="password"定義密碼框；

name屬性定義密碼框的名稱，要保證數據的準確采集，必須定義一個獨一無二的名稱；

size屬性定義密碼框的寬度，單位是單個字符寬度；

maxlength屬性定義最多輸入的字符數。

樣例3：

樣例3代碼：

表單隱藏域

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

代碼格式：

屬性解釋：

type="hidden"定義隱藏域；

name屬性定義隱藏域的名稱，要保證數據的準確采集，必須定義一個獨一無二的名稱；

value屬性定義隱藏域的值

例如：

表單復選框

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

代碼格式：

屬性解釋：

type="checkbox"定義復選框；

name屬性定義復選框的名稱，要保證數據的準確采集，必須定義一個獨一無二的名稱；

value屬性定義復選框的值

樣例4：

樣例4代碼：

xxxcom

表單單選框

當需要訪問者在單選項中選擇唯一的答案時，就需要用到單選框了。

代碼格式：

屬性解釋：

type="radio"定義單選框；

name屬性定義單選框的名稱，要保證數據的準確采集，單選框都是以組為單位使用的，在同一組中的單選項都必須用同一個名稱；

value屬性定義單選框的值，在同一組中，它們的域值必須是不同的。

樣例5：

樣例5代碼：

表單文件上傳框

有時候，需要用戶上傳自己的文件，文件上傳框看上去和其它文本域差不多，只是它還包含了一個瀏覽按鈕。訪問者可以通過輸入需要上傳的文件的路徑或者點擊瀏覽按鈕選擇需要上傳的文件。

注意：在使用文件域以前，請先確定你的服務器是否允許匿名上傳文件。表單標簽中必須設置ENCTYPE="multipart/form-data"來確保文件被正確編碼；另外，表單的傳送方式必須設置成POST。

代碼格式：

屬性解釋：

type="file"定義文件上傳框；

name屬性定義文件上傳框的名稱，要保證數據的準確采集，必須定義一個獨一無二的名稱；

size屬性定義文件上傳框的寬度，單位是單個字符寬度；

maxlength屬性定義最多輸入的字符數。

樣例6：

樣例6代碼：

表單下拉選擇框

下拉選擇框允許你在一個有限的空間設置多種選項。

代碼格式：

...

...

屬性解釋：

size屬性定義下拉選擇框的行數；

name屬性定義下拉選擇框的名稱；

multiple屬性表示可以多選，如果不設置本屬性，那么只能單選；

value屬性定義選擇項的值；

selected屬性表示默認已經選擇本選項。

樣例7：

樣例7代碼：

樣例8：

按Ctrl可以多選

樣例8代碼：

表單表單按鈕

表單按鈕控制表單的運作。

1.3.1 提交按鈕

提交按鈕用來將輸入的信息提交到服務器。

代碼格式：

屬性解釋：

type="submit"定義提交按鈕；

name屬性定義提交按鈕的名稱；

value屬性定義按鈕的顯示文字；

樣例9：

樣例9代碼：

1.3.2 復位按鈕

復位按鈕用來重置表單。

代碼格式：

屬性解釋：

type="reset"定義復位按鈕；

name屬性定義復位按鈕的名稱；

value屬性定義按鈕的顯示文字；

樣例10：

樣例10代碼：

1.3.3 一般按鈕

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

代碼格式：

屬性解釋：

type="button"定義一般按鈕；

name屬性定義一般按鈕的名稱；

value屬性定義按鈕的顯示文字；

onClick屬性，也可以是其它的事件，通過指定腳本函數來定義按鈕的行為；

樣例11：

樣例11代碼：

二．表單

表單是用來提交資料、意見，規范流程執行過程的格式。

表單表單控件

編輯

語音

Button Objx：是最全面的類似按鈕的控件。不僅可以取代Windows按鈕控件來創建強大的按鈕，還可以創建完全自定義的活動按鈕和工具欄，以及自定義形狀的容器。還可以動態的更改圖像和形狀，以及在自定義形狀的區域中添加多個聚焦點，或使用它提供的各種特性完全自定義您的用戶界面。此外還包括Balloon控件，它是使用最簡單和最廣泛的控件，通過使用標準或定制形狀添加可自定義的幫助氣球(工具提示)到應用程序中。

Input Pro：可以輕松地創建專家級的數據錄入界面。該軟件具有六種格式化編輯控件，方便快速驗證數據，可以使用布爾控件來顯示用戶外觀的真/假/灰度值，或者使用備忘錄控件來顯示大量的文本信息。

Component One:行業認可最佳VisualStudio控件集[1]

，不僅全部支持 WinForms、WPF、Silverlight 和 ActiveX，還支持 iPhone、Windows Mobile 等移動設備平臺。它包含數百個控件，如 Grids、Charts、Reports、Schedules、Menus、Toolbars、Ribbon、PDF 等.可以輕松創建類似微軟 Office 顯示風格的用戶界面。例如，使用 C1Ribbon實現 Office 2010 的菜單和工具條風格；使用 C1 SplitterContainer進行應用程序工作區分割；C1NavBar 實現導航欄；使用C1Calendar 實現具有強大日程安排功能癿日歷等等。

參考資料

1.

最佳控件集

．ComponentOne[引用日期2013-03-26]

總結

以上是生活随笔為你收集整理的html表单自动提交表单提交表单数据类型,表单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。