前面
前面我們已經熟悉了網頁上一些常見的元素，如在網頁上顯示一段文字、一張圖片、一個列表、一張表格等等。這些東西都是事先編輯好顯示在頁面上只提供給用戶看的，實際上，我們可以把這樣的頁面稱之為靜態頁面。有“靜”就有”動”，自然也就有了動態頁面，所謂動態頁面就是在頁面上能提供與用戶產生交互的元素，比如：我們想注冊成為某個網站的會員，就要填寫注冊信息提交給網站后台；我們在網上發表評論；我們在網上填寫一些調查問卷等等。
上圖的163郵箱注冊頁面就是一個表單，在表單中有文本框、下拉列表、按鈕等元素，我們可以通過這些元素完成數據的輸入。那么，輸入的數據該如何收集呢？這個就不是HTML所討論的問題了，屬於后台開發，如果您感興趣，我們得另開一欄。這里我們先了解一下表單上的常見元素。
表單元素
💠<form> 標簽：用於創建一個表單，表單里面可以包含文本框、按鈕、下拉列表等元素。
💠<input> 元素（輸入元素）：是表單里面最常用的元素，它有多種不同的類型（比如：單行文本框、密碼框、單選按鈕、復選框等等），可以通過【type】屬性來設置。下表列出了常見的類型及說明。
示例代碼：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <form><!--定義一個表單，表單開始--> 賬號：<input type="text"/><!--單行文本框--> <br /><!--換行--> 密碼：<input type="password"/><!--密碼文本框--> <br /><!--換行--> <!--下面是單選按鈕，有兩個選項，二選一--> 性別：<input type="radio" name="sex" value="male"/>男 <input type="radio" name="sex" value="female"/>女 <br /><!--換行--> <!--下面是復選框，可多選--> 愛好：<input type="checkbox" name="interest" value="ah1" />游泳 <input type="checkbox" name="interest" value="ah2" />籃球 <input type="checkbox" name="interest" value="ah3" />跑步 <br /><!--換行--> 簡歷：<input type="file" /><!--上傳文件--> <br /><!--換行--> <input type="submit" /><!--提交按鈕--> </form><!--表單結束--> </body> </html>
注意：單選按鈕【radio】和復選框【checkbox】里的【name】屬性必須為同一值，表明這些選項歸屬於同一組。
💠<select> 元素（下拉元素）：下拉列表能有效節約頁面的顯示空間，可在多個選項里選取其中一個。下拉列表由兩個標簽組成：
🅰<select>標簽用於定義了一個下拉列表；
🅱<option>標簽定義了一個下拉列表里的選項；
示例代碼：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <form> 請選擇您的專業： <select><!--定義一個下拉列表--> <option>計算機應用技術</option><!--列表選項--> <option>計算機軟件與理論</option> <option>計算機體系結構</option> <option>軟件工程</option> </select> </form> </body> </html>
💠<textarea> 元素（多行文本）：我們可以利用<textarea>元素創建一個文本塊輸入控件，用於輸入多行文本，可輸入的字數不受限制。可以通過【rows】和【cols】屬性來規定 textarea 的行數和列數（尺寸大小），也可以使用 CSS 的 height 和 width 屬性。
示例代碼：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> #textarea2 {/*設置ID為textarea2的多行文本框的寬、高尺寸*/ width:200px; height:80px; } </style> </head> <body> <form> 個人簡介：<br /><!--該多行文本框的大小為5行30列--> <textarea rows="5" cols="30">請介紹一下你自己</textarea> <br /> 學習心得：<br /><!--用CSS設置該多行文本框的大小--> <textarea id="textarea2">學習心得（不少於400字）</textarea> </form> </body> </html>
小結一下
小結一下：表單元素的標簽我們初步記住三個即可：
1、輸入元素<input>：這個里面包括了很多不同類型的標簽，比如：單行文本框、密碼框、按鈕、單選按鈕、多選框等等，它們用【type】屬性加以區分。
2、下拉列表< select >：就是個下拉列表框，沒有其它類別。由兩部分組成：定義標簽< select >和選項標簽< option >，
3、多行文本< textarea >：就是多行文本框，也沒有其它類別。
其實如果我們學習后台開發，比如利用微軟的VS平台，在它的工具箱里有所有的標簽控件，我們可以直接拉到編輯窗口直接使用。
-------------------------- END --------------------------