1.表單標記——<form>...</form>
（1）<form></form>定義表單的開始位置和結束位置，表單提交時的內容就是<form>表單的內容
（2）基本格式
<form action="服務器地址(接受表單內容的地址)" name="表單名稱" method="post|get">...</form>
（3）常用屬性
name屬性 表單名稱
method屬性 傳送數據的方式，分post和get方式
get方式：get方式提交時，會將表單的內容附加在URL地址的后面，所以限制了提交的內容的長度，不超過8192個字符，且不具備保密性
post方式：post方式提交時，將表單中的數據一並包含在表單主體中，一起傳送到服務器中處理，沒有數據大小限制
action屬性 表單數據的處理程序的URL地址
如果為空則使用當前文檔的URL地址，如果表單中不需要使用action屬性也要指定其屬性為"no"
enctype屬性 設置表單的資料的編碼方式
target屬性 和超鏈接的屬性類似，用來指定目標窗口
2.文本域和密碼——<input>標記
（1）<input>標記沒有結束標記，是一個單標記
（2）基本語法
<input type="" name="" value="" size="" maxlength="">
（3）屬性介紹
type屬性
type屬性有兩個值：text和password
當type="text"時，<input>表示一個文本輸入域
當type="password"時，<input>表示一個密碼輸入域
name屬性 定義控件的名稱
value屬性 初始化值，打開瀏覽器時，文本框中的內容
size屬性 設置控件的長度
3.提交、重置、普通按鈕
（1）提交按鈕
當<input type="submit">時，為提交按鈕
（2）重置按鈕
當<input type="reset">時，為重置按鈕
（3）普通按鈕
當<input type="button">時，為普通按鈕
4.單選框和復選框
（1）單選框
當<input type="radio">時，為單選框
（2）復選框
當<input type="checkbox">時，為復選框
（3）注意
單選框和復選框都可以使用"checked"屬性來設置默認選中項
5.隱藏域
當<input type="hidden">時，為隱藏表單域
6.多行文本域
（1）作用：使用<textarea>標記可以實現一個，能夠輸入多行文本的區域
（2）語法格式
<textarea name="name" rows="value" cols="value" value="value">... ...</textarea>
（3）rows屬性和cols屬性分別用來指定顯示的行數和列數，單位是字符個數
7.菜單下拉列表域——<select>標記
（1）語法格式
<select name="" size="value" multiple> <option value="value" selected>選項1</option> <option value="value">選項2</option> <option value="value">選項3</option> ... ... </select>
（2）屬性
name屬性 規定下拉列表的名稱
size屬性 規定下拉列表中可選項的數目
multiple屬性 規定可選擇多個選項
（3）option標記
<option>標記用來指定列表中的一個選項，需要放在<select></select>之間
value屬性 給選項賦值，指定傳送到服務器上的值
selected屬性 指定默認的選項
8.舉例說明
舉例展示會員注冊登陸填寫信息
注冊代碼demo.html：
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>會員注冊</title> 5 </head> 6 <body> 7 <center> 8 <form name="注冊" method="get" target="_self" action="demo2.html"> 9 設置賬號：<input name="zhanghao" type="text" value="" maxlength="10"> 10 <br/> 11 <br/> 12 設置密碼：<input name="mima" type="password"> 13 <br/> 14 <br/> 15 確認密碼：<input name="mima" type="password"> 16 <br/> 17 <br/> 18 <input type="submit" value="提交"> 19 20 <input type="reset" value="重置"> 21 <br/> 22 <br/> 23 </form> 24 </center> 25 </body> 26 </html>
登陸代碼demo2.html：
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>會員登陸</title> 5 </head> 6 <body> 7 <center> 8 <form name="登陸" method="get" target="_self" action="demo1.html"> 9 請輸入你的賬號：<input name="zhanghao" type="text" value="" maxlength="10"> 10 <br/> 11 <br/> 12 請輸入你的密碼：<input name="mima" type="password"> 13 <br/> 14 <br/> 15 <input type="submit" value="提交"> 16 17 <input type="reset" value="重置"> 18 <br/> 19 <br/> 20 </form> 21 </center> 22 </body> 23 </html>
填寫信息demo1.html：
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>個人信息登記</title> 5 </head> 6 <body> 7 <form action="demo.html" target="_self" name="信息登記" method="get"> 8 <center> 9 姓名： 10 <input name="name" type="text" size="4"> 11 <br/> 12 <br/> 13 性別： 14 <input type="radio" name="sex" checked>男 15 <input type="radio" name="sex">女 16 <br/> 17 <br/> 18 年齡： 19 <select> 20 <option>1-10</option> 21 <option>11-20</option> 22 <option>21-30</option> 23 <option>31-40</option> 24 <option>41-50</option> 25 <option>51-60</option> 26 <option>61-70</option> 27 <option>71-80</option> 28 </select> 29 <br/> 30 <br/> 31 愛好： 32 <input type="checkbox" name="running">跑步 33 <input type="checkbox" name="swimming">游泳 34 <input type="checkbox" name="learning">學習 35 <input type="checkbox" name="basketball">籃球 36 <br/> 37 <br/> 38 個人說明： 39 <textarea name="personal description" rows="10" cols="50"></textarea> 40 <br/> 41 <br/> 42 <input type="submit" value="提交"> 43 44 <input type="reset" value="重置"> 45 46 <input type="button" value="按鈕"> 47 </center> 48 </form> 49 </body> 50 </html>
效果展示：
