form表單（塊級標簽）
功能：
表單用於向服務器傳輸數據，從而實現用戶與Web服務器的交互
表單能夠包含input系列標簽，比如文本字段、復選框、單選框、提交按鈕等等。
表單還可以包含textarea、select、fieldset和 label標簽。
表單屬性
| 屬性 | 描述 |
|---|---|
| accept-charset | 規定在被提交表單中使用的字符集（默認：頁面字符集）。 |
| action | 規定向何處提交表單的地址（URL）（提交頁面）。 |
| autocomplete | 規定瀏覽器應該自動完成表單（默認：開啟）。 |
| enctype | 規定被提交數據的編碼（默認：url-encoded）。 |
| method | 規定在提交表單時所用的 HTTP 方法（默認：GET）。 |
| name | 規定識別表單的名稱（對於 DOM 使用：document.forms.name）。 |
| novalidate | 規定瀏覽器不驗證表單。 |
| target | 規定 action 屬性中地址的目標（默認：_self）。 |
表單元素
基本概念：
HTML表單是HTML元素中較為復雜的部分，表單往往和腳本、動態頁面、數據處理等功能相結合，因此它是制作動態網站很重要的內容。
表單一般用來收集用戶的輸入信息
表單工作原理：
訪問者在瀏覽有表單的網頁時，可填寫必需的信息，然后按某個按鈕提交。這些信息通過Internet傳送到服務器上。
服務器上專門的程序對這些數據進行處理，如果有錯誤會返回錯誤信息，並要求糾正錯誤。當數據完整無誤后，服務器反饋一個輸入完成的信息。
屬性：
name：表單的名稱，用於JS來操作或控制表單時使用；id：表單的名稱，用於JS來操作或控制表單時使用；action：指定表單數據的處理程序，一般是PHP，如：action=“login.php”method：表單數據的提交方式，一般取值：get(默認)和post
form標簽里面的action屬性和method屬性，在后面課程給大家講解。稍微說一下：action屬性就是表示，表單將提交到哪里。 method屬性表示用什么HTTP方法提交，有get、post兩種。
get提交和post提交的區別：
GET方式：
將表單數據，以"name=value"形式追加到action指定的處理程序的后面，兩者間用"?"隔開，每一個表單的"name=value"間用"&"號隔開。
特點：只適合提交少量信息，並且不太安全(不要提交敏感數據)、提交的數據類型只限於ASCII字符。
POST方式：
將表單數據直接發送(隱藏)到action指定的處理程序。POST發送的數據不可見。Action指定的處理程序可以獲取到表單數據。
特點：可以提交海量信息，相對來說安全一些，提交的數據格式是多樣的(Word、Excel、rar、img)。
Enctype：
表單數據的編碼方式(加密方式)，取值可以是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。
- Application/x-www-form-urlencoded：默認加密方式，除了上傳文件之外的數據都可以
- Multipart/form-data：上傳附件時，必須使用這種編碼方式.
<input>：輸入標簽（文本框）（內聯標簽）
| type屬性值 | 表現形式 | 對應代碼 |
|---|---|---|
| text | 單行輸入文本 | <input type=text" /> |
| password | 密碼輸入框（不顯示明文） | <input type="password" /> |
| date | 日期輸入框 | <input type="date" /> |
| checkbox | 復選框 | <input type="checkbox" checked="checked" name='x' /> |
| radio | 單選框 | <input type="radio" name='x' /> |
| submit | 提交按鈕 | <input type="submit" value="提交" /> #發送瀏覽器上輸入標簽中的內容，配合form表單使用，頁面會刷新 |
| reset | 重置按鈕 | <input type="reset" value="重置" /> #頁面不會刷新，將所有輸入的內容清空 |
| button | 普通按鈕 | <input type="button" value="普通按鈕" /> |
| hidden | 隱藏輸入框 | <input type="hidden" /> |
| file | 文本選擇框 | <input type="file" /> （等學了form表單之后再學這個） |
用於接收用戶輸入。
<input type="text" />
屬性：
type="屬性值"：文本類型。屬性值可以是：text（默認）password：密碼類型radio：單選按鈕，名字相同的按鈕作為一組進行單選（單選按鈕，天生是不能互斥的，如果想互斥，必須要有相同的name屬性。name就是“名字”。
）。非常像以前的收音機，按下去一個按鈕，其他的就抬起來了。所以叫做radio。checkbox：多選按鈕，名字相同的按鈕作為一組進行選擇。checked：將單選按鈕或多選按鈕默認處於選中狀態。當<input>標簽的type="radio"時，可以用這個屬性。屬性值也是checked，可以省略。hidden：隱藏框，在表單中包含不希望用戶看見的信息button：普通按鈕，結合js代碼進行使用。submit：提交按鈕，傳送當前表單的數據給服務器或其他程序處理。這個按鈕不需要寫value自動就會有“提交”文字。這個按鈕真的有提交功能。點擊按鈕后，這個表單就會被提交到form標簽的action屬性中指定的那個頁面中去。reset：重置按鈕，清空當前表單的內容，並設置為最初的默認值image：圖片按鈕，和提交按鈕的功能完全一致，只不過圖片按鈕可以顯示圖片。file：文件選擇框。
提示：如果要限制上傳文件的類型，需要配合JS來實現驗證。對上傳文件的安全檢查：一是擴展名的檢查，二是文件數據內容的檢查。
value="內容"：文本框里的默認內容（已經被填好了的）size="50"：表示文本框內可以顯示五十個字符。一個英文或一個中文都算一個字符。
注意size屬性值的單位不是像素哦。readonly：文本框只讀，不能編輯。因為它的屬性值也是readonly，所以屬性值可以不寫。
用了這個屬性之后，在google瀏覽器中，光標點不進去；在IE瀏覽器中，光標可以點進去，但是文字不能編輯。disabled：文本框只讀，不能編輯，光標點不進去。屬性值可以不寫。
例子：
<form>
姓名：<input value="呵呵" >逗比<br> 昵稱：<input value="哈哈" readonly=""><br> 名字：<input type="text" value="name" disabled=""><br> 密碼：<input type="password" value="pwd" size="50"><br> 性別：<input type="radio" name="gender" value="male" checked="">男 <input type="radio" name="gender" value="female" >女<br> 愛好：<input type="checkbox" name="love" value="eat">吃飯 <input type="checkbox" name="love" value="sleep">睡覺 <input type="checkbox" name="love" value="bat">打豆豆 </form>
效果：
四種按鈕的舉例：
<form> <input type="button" value="普通按鈕"><br> <input type="submit" value="提交按鈕"><br> <input type="reset" value="重置按鈕"><br> <input type="image" src="images/bojie.jpeg" width="400" value="圖片按鈕2"><br> <input type="file" value="文件選擇框"> </form>
效果：
<select>：下拉列表標簽（內聯標簽）
<select>標簽里面的每一項用<option>表示。select就是“選擇”，option“選項”。
select標簽和ul、ol、dl一樣，都是組標簽。
<select>標簽的屬性：
multiple：可以對下拉列表中的選項進行多選。沒有屬性值。size="3"：如果屬性值大於1，則列表為滾動視圖。默認屬性值為1，即下拉視圖。
<option>標簽的屬性：
selected：預選中。沒有屬性值。
例子：
<form> <select> <option>小學</option> <option>初中</option> <option>高中</option> <option>大學</option> <option selected="">研究生</option> </select> <br><br><br> <select size="3"> <option>小學</option> <option>初中</option> <option>高中</option> <option>大學</option> <option>研究生</option> </select> <br><br><br> <select multiple=""> <option>小學</option> <option>初中</option> <option selected="">高中</option> <option selected="">大學</option> <option>研究生</option> </select> <br><br><br> </form>
效果:
<textarea>標簽：多行文本輸入框（內聯標簽）
text就是“文本”，area就是“區域”。
屬性：
value：提交給服務器的值。rows="4"：指定文本區域的行數。cols="20"：指定文本區域的列數。readonly：只讀。
例子：
<form>
<textarea name="txtInfo" rows="4" cols="20">路飛學城</textarea>
</form>
效果：
表單的語義化
比如，我們在注冊一個網站的信息的時候，有一部分是必填信息，有一部分是選填信息，這個時候可以利用表單的語義化。
<form> <fieldset> <legend>賬號信息</legend> 姓名：<input value="呵呵" >逗比<br> 密碼：<input type="password" value="pwd" size="50"><br> </fieldset> <fieldset> <legend>其他信息</legend> 性別：<input type="radio" name="gender" value="male" checked="">男 <input type="radio" name="gender" value="female" >女<br> 愛好：<input type="checkbox" name="love" value="eat">吃飯 <input type="checkbox" name="love" value="sleep">睡覺 <input type="checkbox" name="love" value="bat">打豆豆 </fieldset> </form>
效果：
<label>標簽（內聯標簽）
我們先來看下面一段代碼：
<input type="radio" name="sex" /> 男 <input type="radio" name="sex" /> 女
對於上面這樣的單選框，我們只有點擊那個單選框（小圓圈）才可以選中，點擊“男”、“女”這兩個文字時是無法選中的；於是，label標簽派上了用場。
本質上來講，“男”、“女”這兩個文字和input標簽時沒有關系的，而label就是解決這個問題的。我們可以通過label把input和漢字包裹起來作為整體。
解決方法如下：
<input type="radio" name="sex" id="nan" /> <label for="nan">男</label> <input type="radio" name="sex" id="nv" /> <label for="nv">女</label>
上方代碼中，input元素要有一個id，然后label標簽有一個for屬性，和id相同，那么這個label和input就有綁定關系了。
當然了，復選框也有label：（任何表單元素都有label）
<input type="checkbox" id="kk" /> <label for="kk">10天內免登陸</label>