基本介紹
- 中文名：表單
- 外文名：英文：Form
- 作用：採集數據
- 組成：表單標籤、表單域、表單按鈕
代碼,表單標籤,文本框,多行文本框,密碼框,隱藏域,複選框,單選框,檔案上傳框,下拉選擇框,表單按鈕,表單控制項,
代碼
表單標籤
<form></form>
功能：用於申明表單，定義採集數據的範圍，也就是<form>和</form>裡面包含的數據將被提交到伺服器或者電子郵件里。
語法：<FORM ACTION="URL" METHOD="GET|POST" ENCTYPE="MIME" TARGET="...">. . .</FORM>
屬性解釋見下表：
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方式；
表單域
文本框
文本框是一種讓訪問者自己輸入內容的表單對象，通常被用來填寫單個字或者簡短的回答，如姓名、地址等。
代碼格式：<input type="text" name="..." size="..." maxlength="..." value="...">
屬性解釋：
type="text"定義單行文本輸入框；
name屬性定義文本框的名稱，要保證數據的準確採集，必須定義一個獨一無二的名稱；
size屬性定義文本框的寬度，單位是單個字元寬度；
maxlength屬性定義最多輸入的字元數。
value屬性定義文本框的初始值
樣例1：
樣例1代碼：
<input type="text" name="example1" size="20" maxlength="15" />
多行文本框
也是一種讓訪問者自己輸入內容的表單對象，只不過能讓訪問者填寫較長的內容。
代碼格式：<TEXTAREA name="..." cols="..." rows="..." wrap="VIRTUAL"></TEXTAREA>
屬性解釋：
name屬性定義多行文本框的名稱，要保證數據的準確採集，必須定義一個獨一無二的名稱；
cols屬性定義多行文本框的寬度，單位是單個字元寬度；
rows屬性定義多行文本框的高度，單位是單個字元寬度；
wrap屬性定義輸入內容大於文本域時顯示的方式，可選值如下：
默認值是文本自動換行；當輸入內容超過文本域的右邊界時會自動轉到下一行，而數據在被提交處理時自動換行的地方不會有換行符出現； Off，用來避免文本換行，當輸入的內容超過文本域右邊界時，文本將向左滾動，必須用Return才能將插入點移到下一行； Virtual，允許文本自動換行。 Physical，讓文本換行，當數據被提交處理時換行符也將被一起提交處理。
樣例2：
樣例2代碼：
<TEXTAREA name="example2" cols="20" rows="2" wrap="PHYSICAL"></TEXTAREA>
密碼框
是一種特殊的文本域，用於輸入密碼。當訪問者輸入文字時，文字會被星號或其它符號代替，而輸入的文字會被隱藏。
代碼格式：<input type="password" name="..." size="..." maxlength="...">
屬性解釋：
type="password"定義密碼框；
name屬性定義密碼框的名稱，要保證數據的準確採集，必須定義一個獨一無二的名稱；
size屬性定義密碼框的寬度，單位是單個字元寬度；
maxlength屬性定義最多輸入的字元數。
樣例3：
樣例3代碼：
<input type="password" name="example3" size="20" maxlength="15">
隱藏域
代碼格式：<input type="hidden" name="..." value="...">
屬性解釋：
type="hidden"定義隱藏域；
name屬性定義隱藏域的名稱，要保證數據的準確採集，必須定義一個獨一無二的名稱；
value屬性定義隱藏域的值
例如：<input type="hidden" name="ExPws" value="dd">
複選框
複選框允許在待選項中選中一項以上的選項。每個複選框都是一個獨立的元素，都必須有一個唯一的名稱。
代碼格式：<INPUT type="checkbox" name="..." value="...">
屬性解釋：
type="checkbox"定義複選框；
name屬性定義複選框的名稱，要保證數據的準確採集，必須定義一個獨一無二的名稱；
value屬性定義複選框的值
樣例4：
樣例4代碼：
<input type="checkbox" name="yesky" value="09">xxxcom
<input type="checkbox" name="Chinabyte" value="08">
單選框
當需要訪問者在單選項中選擇唯一的答案時，就需要用到單選框了。
代碼格式：<input type="radio" name="..." value="...">
屬性解釋：
type="radio"定義單選框；
name屬性定義單選框的名稱，要保證數據的準確採集，單選框都是以組為單位使用的，在同一組中的單選項都必須用同一個名稱；
value屬性定義單選框的值，在同一組中，它們的域值必須是不同的。
樣例5：
樣例5代碼：
<input type="radio" name="myFavor" value="1">
<input type="radio" name="myFavor" value="2">
檔案上傳框
有時候，需要用戶上傳自己的檔案，檔案上傳框看上去和其它文本域差不多，只是它還包含了一個瀏覽按鈕。訪問者可以通過輸入需要上傳的檔案的路徑或者點擊瀏覽按鈕選擇需要上傳的檔案。
注意：在使用檔案域以前，請先確定你的伺服器是否允許匿名上傳檔案。表單標籤中必須設定ENCTYPE="multipart/form-data"來確保檔案被正確編碼；另外，表單的傳送方式必須設定成POST。
代碼格式：<input type="file" name="..." size="15" maxlength="100">
屬性解釋：
type="file"定義檔案上傳框；
name屬性定義檔案上傳框的名稱，要保證數據的準確採集，必須定義一個獨一無二的名稱；
size屬性定義檔案上傳框的寬度，單位是單個字元寬度；
maxlength屬性定義最多輸入的字元數。
樣例6：
樣例6代碼：
<input type="file" name="myfile" size="15" maxlength="100">
下拉選擇框
下拉選擇框允許你在一個有限的空間設定多種選項。
代碼格式：
<select name="..." size="..." multiple>
<option value="..." selected>...</option>
...
</select>
屬性解釋：
size屬性定義下拉選擇框的行數；
name屬性定義下拉選擇框的名稱；
multiple屬性表示可以多選，如果不設定本屬性，那么只能單選；
value屬性定義選擇項的值；
selected屬性表示默認已經選擇本選項。
樣例7：
樣例7代碼：
<select name="mySel" size="1">
<option value="1" selected></option>
<option value="d2"></option>
</select>
樣例8：
按Ctrl可以多選
樣例8代碼：
<select name="mySelt" size="3" multiple>
<option value="1" selected></option>
<option value="d2"></option>
<option value="3"></option>
</select>
表單按鈕
表單按鈕控制表單的運作。
1.3.1 提交按鈕
提交按鈕用來將輸入的信息提交到伺服器。
代碼格式：<input type="submit" name="..." value="...">
屬性解釋：
type="submit"定義提交按鈕；
name屬性定義提交按鈕的名稱；
value屬性定義按鈕的顯示文字；
樣例9：
樣例9代碼：
<input type="submit" name="mySent" value="傳送">
1.3.2 復位按鈕
復位按鈕用來重置表單。
代碼格式：<input type="reset" name="..." value="...">
屬性解釋：
type="reset"定義復位按鈕；
name屬性定義復位按鈕的名稱；
value屬性定義按鈕的顯示文字；
樣例10：
樣例10代碼：
<input type="reset" name="myCancle" value="取消">
1.3.3 一般按鈕
一般按鈕用來控制其他定義了處理腳本的處理工作。
代碼格式：<input type="button" name="..." value="..." onClick="...">
屬性解釋：
type="button"定義一般按鈕；
name屬性定義一般按鈕的名稱；
value屬性定義按鈕的顯示文字；
onClick屬性，也可以是其它的事件，通過指定腳本函式來定義按鈕的行為；
樣例11：
樣例11代碼：
<input type="button" name="myB" value="保存" onClick="javascript:alert('it is a button')">
二．表單
表單是用來提交資料、意見，規範流程執行過程的格式。
表單控制項
Button Objx：是最全面的類似按鈕的控制項。不僅可以取代Windows按鈕控制項來創建強大的按鈕，還可以創建完全自定義的活動按鈕和工具列，以及自定義形狀的容器。還可以動態的更改圖像和形狀，以及在自定義形狀的區域中添加多個聚焦點，或使用它提供的各種特性完全自定義您的用戶界面。此外還包括Balloon控制項，它是使用最簡單和最廣泛的控制項，通過使用標準或定製形狀添加可自定義的幫助氣球（工具提示）到應用程式中。
Input Pro：可以輕鬆地創建專家級的數據錄入界面。該軟體具有六種格式化編輯控制項，方便快速驗證數據，可以使用布爾控制項來顯示用戶外觀的真/假/灰度值，或者使用備忘錄控制項來顯示大量的文本信息。
Component One:行業認可最佳VisualStudio控制項集，不僅全部支持 WinForms、WPF、Silverlight 和 ActiveX，還支持 iPhone、Windows Mobile 等移動設備平台。它包含數百個控制項，如 Grids、Charts、Reports、Schedules、Menus、Toolbars、Ribbon、PDF 等.可以輕鬆創建類似微軟 Office 顯示風格的用戶界面。例如，使用 C1Ribbon實現 Office 2010 的選單和工具條風格；使用 C1 SplitterContainer進行應用程式工作區分割；C1NavBar 實現導航欄；使用C1Calendar 實現具有強大日程安排功能癿日曆等等。
