在網站建設中，表單對象在頁面中呈現不同的UI效果，具有不同的數據輸入體驗，但是它們的功能都是相同的，即接收數據。表單將根據不同表單對象接收并傳遞數據。服務器也將以表單對象作為信息單元對表單數據進行捕獲。

1. 文本框

文本框比較常用，任何類型的信息都可以通過文本框實現交互。文本框包含很多屬性，常用屬性及其語法格式如下：

<input    name="textfield"              <!--必設屬性-->    type="text"                   <!--必設屬性-->    id="textfield"                <!--可選屬性-->    value="單行文本框"            <!--默認值，可選屬性-->    size="20"                     <!--定義文本框的寬度，即文本框的顯示長度-->    maxlength="20"                <!--定義文本框的大小，即最多接收字符數-->/>

2. 密碼域

密碼域也是一種文本框，不過它是一種特殊用途的文本框，與普通文本框不同之處就在于它在頁面中不顯示所有輸入字符，而是全部用星號代替這樣的設計目的是為了防止密碼不被旁觀者惡意竊取。

3. 文本區

域文本區域就是多行文本框，由于它能夠多行顯示輸入的信息，常被設計為接收大容量信息的項目。例如，個人簡介、對象說明、詳細計劃、圖書目錄、多行列表等。

與文本框不同，文本區域使用textarea元素定義。文本區域的代碼格式如下：

<textarea    name="textarea"                 <!--必設屬性-->    cols="20"                       <!--定義文本區域顯示的列數（寬度），以字符為單位-->    rows="5"                        <!--定義文本區域顯示的行數（高度）-->    wrap="physical">                <!--定義換行方式  -->    <!--這里是文本區域顯示的輸入信息，也可以在此設置默認顯示信息--></textarea>

4. 單選按鈕

單選按鈕傳遞的信息非常簡單，可以用一個字節來表示，如1、0、true或false。從開發的角度分析，由于單選按鈕傳遞的信息比較單純，很容易被服務器處理，常常被用于腳本中實現邏輯判斷。例如，判斷是男是女、是對是錯、是否同意等。

通過設置相同的name屬性值，可以把多個單選按鈕捆綁在一起，設計為單選按鈕組。例如，下面代碼設計一個性別選項。

<fieldset data-role="controlgroup">    <legend>性別</legend>    <label>        <input name="sex" type="radio" value="男" checked />男</label>    <label>        <input name="sex" type="radio" value="女" />女</label></fieldset>

5. 復選框

復選框傳遞的信息也比較單一，但是當多個復選框捆綁在一起時，可以設計多項選擇，方便用戶快速選擇，而不用手動輸入信息。捆綁復選框的方法是為多個復選框定義相同的name屬性值，例如，下面代碼定義了一個復選框組：

<fieldset data-role="controlgroup">    <legend>興趣</legend>    <label>        <input name="interest" type="checkbox" value="體育" />體育</label>    <label>        <input name="interest" type="checkbox" value="音樂" />音樂</label>    <label>        <input name="interest" type="checkbox" value="計算機" /> 計算機</label></fieldset>

設計復選框時，應把一組復選框排列在一起，并命名為有規律的名字，以方便后臺處理。因為在腳本中需要逐一獲取每個復選框傳遞的值，并根據復選框是否被選中來決定采用哪些選項值。

6. 列表菜單

列表框與單選按鈕和復選框一樣都是屬于選擇性表單對象，所接收的信息一般都是固定的，通過用戶的選擇來向服務器傳遞指定信息。但是它們在使用上也有區別。   

?單選按鈕和復選框能夠在頁面中顯示全部選項，這樣方便瀏覽，對于選項比較少時，使用單選按鈕或復選框會比較經濟。如果選項過多，就會占用過多的頁面，而浪費空間。   

?列表框能夠把所有選項包含在一個框內，可以隱藏部分或全部選項。這對于選項很多時，就顯得很實用。例如，在選擇國籍、省份、區號等大量選項的信息時，一般都會采用下拉菜單來設計。

列表框和下拉菜單同屬于一個表單元素（se-lect），只不過它們的顯示樣式不同。

7. 文件域

文件域是一個復合控件，由文本框和瀏覽按鈕組成，文件域常用來傳遞二進制數據流，如文件、圖片等。文件域用法如下

<label>上次文件    <input name="file" type="file" /></label>

8. 按鈕

按鈕不負責接收和傳遞數據，僅作為執行具體操作的事件。單擊按鈕時將觸發一個動作，并執行相應的行為，以完成某項任務。按鈕有多種類型，例如：

負責提交表單數據的提交按鈕：<input name="" type="submit" value="提交" />

負責恢復表單域的默認顯示的重設按鈕：<input name="" type="reset" value="重置" />

沒有包含特定行為的普通按鈕：<input name="" type="button" value="普通按鈕" />

9. 圖像域

圖像域實際上就是一個提交按鈕，它允許用戶選擇圖像作為按鈕的顯示界面，因此適合設計個性按鈕樣式。例如，下面代碼使用圖像域設計一個提交按鈕

<input name="submit" type="image" value="提交" src="images/submit.gif" alt="提交" align="middle" height="40" />

10. 隱藏域隱藏域主要用來在表單中傳遞固定的值，該對象不會顯示在頁面中，但是其值可以在網頁源代碼中查看。一般使用隱藏域來傳遞一些配置信息或者輔助信息，以彌補提交表單時，很多數據在表單中無法傳遞的問題，但是要避免使用隱藏域傳遞個人隱私信息，或者傳遞一些完整的、大容量信息。因為這樣既不安全，也給數據傳輸增加負荷。

隱藏域使用比較簡單，代碼格式如下：

<input    name="id"                     <!--必設屬性，指定隱藏域的名稱-->    type="hidden"                 <!--必設屬性，指定隱藏域的類型-->    value="100"                   <!--必設屬性，指定要傳遞的值-->/>