前面
前面我們已經(jīng)熟悉了網(wǎng)頁上一些常見的元素姥闪，如在網(wǎng)頁上顯示一段文字、一張圖片肌毅、一個列表筷转、一張表格等等。這些東西都是事先編輯好顯示在頁面上只提供給用戶看的悬而，實(shí)際上呜舒，我們可以把這樣的頁面稱之為靜態(tài)頁面。有“靜”就有”動”摊滔，自然也就有了動態(tài)頁面阴绢，所謂動態(tài)頁面就是在頁面上能提供與用戶產(chǎn)生交互的元素，比如：我們想注冊成為某個網(wǎng)站的會員艰躺，就要填寫注冊信息提交給網(wǎng)站后臺呻袭；我們在網(wǎng)上發(fā)表評論；我們在網(wǎng)上填寫一些調(diào)查問卷等等腺兴。
上圖的163郵箱注冊頁面就是一個表單左电，在表單中有文本框、下拉列表页响、按鈕等元素篓足，我們可以通過這些元素完成數(shù)據(jù)的輸入。那么闰蚕，輸入的數(shù)據(jù)該如何收集呢栈拖？這個就不是HTML所討論的問題了，屬于后臺開發(fā)没陡，如果您感興趣涩哟，我們得另開一欄。這里我們先了解一下表單上的常見元素盼玄。
表單元素
??<form> 標(biāo)簽：用于創(chuàng)建一個表單贴彼，表單里面可以包含文本框、按鈕埃儿、下拉列表等元素器仗。
??<input> 元素（輸入元素）：是表單里面最常用的元素，它有多種不同的類型（比如：單行文本框童番、密碼框精钮、單選按鈕、復(fù)選框等等）剃斧，可以通過【type】屬性來設(shè)置轨香。下表列出了常見的類型及說明。
示例代碼：
<!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 /><!--換行-->
<!--下面是單選按鈕弹沽，有兩個選項(xiàng)檀夹，二選一--> 性別：<input type="radio" name="sex" value="male"/>男 <input type="radio" name="sex" value="female"/>女 <br /><!--換行-->
<!--下面是復(fù)選框，可多選--> 愛好：<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><!--表單結(jié)束-->
</body>
</html>
注意：單選按鈕【radio】和復(fù)選框【checkbox】里的【name】屬性必須為同一值策橘，表明這些選項(xiàng)歸屬于同一組炸渡。
??<select> 元素（下拉元素）：下拉列表能有效節(jié)約頁面的顯示空間，可在多個選項(xiàng)里選取其中一個丽已。下拉列表由兩個標(biāo)簽組成：
??<select>標(biāo)簽用于定義了一個下拉列表蚌堵；
??<option>標(biāo)簽定義了一個下拉列表里的選項(xiàng)；
示例代碼：
<!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> 請選擇您的專業(yè)： <select><!--定義一個下拉列表-->
<option>計算機(jī)應(yīng)用技術(shù)</option><!--列表選項(xiàng)-->
<option>計算機(jī)軟件與理論</option>
<option>計算機(jī)體系結(jié)構(gòu)</option>
<option>軟件工程</option>
</select>
</form>
</body>
</html>
??<textarea> 元素（多行文本）：****我們可以利用<textarea>元素創(chuàng)建一個文本塊輸入控件沛婴，用于輸入多行文本吼畏，可輸入的字?jǐn)?shù)不受限制∴业疲可以通過【rows】和【cols】屬性來規(guī)定 textarea 的行數(shù)和列數(shù)（尺寸大行何谩），也可以使用 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 {/*設(shè)置ID為textarea2的多行文本框的寬性雄、高尺寸*/ width:200px; height:80px;
}
</style>
</head>
<body>
<form> 個人簡介：<br /><!--該多行文本框的大小為5行30列-->
<textarea rows="5" cols="30">請介紹一下你自己</textarea>
<br /> 學(xué)習(xí)心得：<br /><!--用CSS設(shè)置該多行文本框的大小-->
<textarea id="textarea2">學(xué)習(xí)心得（不少于400字）</textarea>
</form>
</body>
</html>
小結(jié)一下
小結(jié)一下：表單元素的標(biāo)簽我們初步記住三個即可：
1、輸入元素<input>：這個里面包括了很多不同類型的標(biāo)簽羹奉，比如：單行文本框秒旋、密碼框、按鈕诀拭、單選按鈕迁筛、多選框等等，它們用【type】屬性加以區(qū)分耕挨。
2细卧、下拉列表< select >：就是個下拉列表框，沒有其它類別俗孝。由兩部分組成：定義標(biāo)簽< select >和選項(xiàng)標(biāo)簽< option >酒甸，
3魄健、多行文本< textarea >：就是多行文本框赋铝，也沒有其它類別。
其實(shí)如果我們學(xué)習(xí)后臺開發(fā)沽瘦，比如利用微軟的VS平臺革骨，在它的工具箱里有所有的標(biāo)簽控件，我們可以直接拉到編輯窗口直接使用析恋。
自己整理了一份最全前端學(xué)習(xí)資料,從最基礎(chǔ)的HTML+CSS+JS [炫酷特效良哲，游戲，插件封裝助隧，設(shè)計模式]到移動端HTML5的項(xiàng)目實(shí)戰(zhàn)的學(xué)習(xí)資料都有筑凫，送給每一位前端小伙伴。企鵝裙：685910553（前端資料分享）。有想學(xué)習(xí)web前端的巍实，或是轉(zhuǎn)行滓技，或是大學(xué)生，還有工作中想提升自己能力的棚潦，正在學(xué)習(xí)的小伙伴歡迎加入學(xué)習(xí)令漂。
